CODEWITHSUNDEEP
serviceworkersapper
jhickok
jhickok

Reputation: 997

Sapper and Service Workers

This is more of a service worker question, although it could be more specific to Sapper. I really don't know, as I am the first to admin I struggle with Service Workers, have barely used them, and feel like they are a pain the butt very often.

Basically, no matter what I do, I cannot get localhost:3000 to stop loading the old copy of the app. I've unregistered the service worker in various ways, including try to programmatically unregister. I've clear caches, and even cleared all browsing data from the browser. The server from my Sapper dev environment is NOT running.

This is happening with Brave, but behaves the same in Opera, and seems like a general Chromium scenario. I don't user Firefox or Safari, but may test in one soon to see what behavior happens there.

Here is a clip showing how I try to unregister the Service Worker.

https://youtu.be/Cb24I_fEklE

Upvotes: 7

Views: 2141

Answers (3)

abitofcode
abitofcode

Reputation: 3078

Make sure to close any browser tabs that have the app running in it, you can't replace a service worker while it's servicing an existing version of the application. Also try reloading the page once the service worker is installed if there are any caching issues.

Upvotes: 0

Puru Vijay
Puru Vijay

Reputation: 116

I used this little trick that works like a charm. In your rollup.config.js, there's a serviceWorker object in the outputs object.

serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    preserveEntrySignatures: false,
    onwarn,
  },

Define a variable dev on top if not already declared:

const dev = process.env.NODE_ENV === "development";

Now change your service worker config like this:

serviceworker: !dev && {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    preserveEntrySignatures: false,
    onwarn,
  },

Upvotes: 7

Liam Fielding
Liam Fielding

Reputation: 1

Clear cache, the only thing that works for me to bypass it.

The issue is the service worker is service from the cache, serving from the cache again probably resets this item in the cache as even more valid to send and you get caught in something of a cycle.

--

I found this question because I was considering completely removing the service worker to try to get the performance of my site a little higher...

Is it critically necessary? What are the benefits of it?

Upvotes: 0

Related Questions