Sapper and Service Workers

Question

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

Thusly

Answer 1

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,
  },

Knifeedged

Answer 2

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?

Belch

I think you can safely remove. Benefits are for accessing resources offline. Anybody else have comments on that? – Thusly

@Thusly I removed mine with absolutely no issues. – Belch

Answer 3

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.

Ault