PWA: No matching service worker detected. You may need to reload the page

Question

I get this warning:

No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start of the URL from the manifest.

The thing that my service worker is working.

I even tried with two other URLs, both of them with HTTPs.

---

Now I'm going to show you the code, I'm using:

site.webmanifest

{
    ...
    "start_url": "/",
    "display": "standalone"
    ...
}

To create my service-worker, I use the webpack plugin: WorkboxPlugin combined with Laravel Mix:

webpack.mix.js

mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    output: {
        publicPath: '/assets/build/', // fixes the output bug
    },
});

It creates the service-worker.js:

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
  "/assets/build/precache-manifest.cb67a9edd02323d8ea51560852b6cc0d.js"
);

workbox.core.skipWaiting();

workbox.core.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

With the precache-manifest.js

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "4e264a665cf5133098ac",
    "url": "/assets/build//js/main.js"
  },
  {
    "revision": "4e264a665cf5133098ac",
    "url": "/assets/build/css/main.css"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/layers-2x.png?4f0283c6ce28e888000e978e537a6a56"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/layers.png?a6137456ed160d7606981aa57c559898"
  },
  {
    "url": "/assets/build/images/vendor/leaflet/dist/marker-icon.png?2273e3d8ad9264b7daa5bdbf8e6b47f8"
  }
]);

What should I do with this warning?

Akkadian

Dumb question but your debug console shows the file as site.webmanifest and you later labeled the manifest file as site.manifest. Is the path in your <link type="manifest" ... pointing to the right file? – Jeannettejeannie

@JustinCollins sorry it's a typo here. I link to the correct manifest file – Akkadian

Asked for help here: bugs.chromium.org/p/chromium/issues/detail?id=996863 – Akkadian

@JustinCollins I might have an idea, that my scope is not set correctly, but I don't know how to fix it without "hacks" (can't really but the service worker on the public folder and cannot change server configs). (Reference: #35780897) – Akkadian

On my case I was having this error because the start_url of manifest.json was diferent than the loaded url (because it has a user redirection; example: domain.com/user1) – Cysticercoid

Answer 1

I found the solution! The scope was not set correctly. You need to understand, that the service worker needs to be in the root folder.

So my change is:

webpack.mix.js

mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
            swDest: '../../service-worker.js', //Need to move the service-worker to the root
        }),
    ],
    output: {
        publicPath: '/assets/build/', // fixes the output bug
    },
});

And now I need to register the service worker with the new path

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(reg => {
                console.log('Registration succeeded. Scope is ' + reg.scope);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
    });
}

Akkadian

Answer 2

The easiest solution here would be, like mentioned in previous answer, to put the service worker file in the root directory along with site webmanifest file.

But if you're like people who prefer to group their assets in sub-directories then you can set the scope manually by setting scope option to / and add the Service-Worker-Allowed HTTP header to the response. This way your service worker file doesn't need to be in the root directory.

Refer to Example 11 in https://w3c.github.io/ServiceWorker/#service-worker-script-response

    // Set the scope to an upper path of the script location
    // Response included "Service-Worker-Allowed : /"
    navigator.serviceWorker.register("/js/sw.js", { scope: "/" }).then(() => {
        console.log("Install succeeded as the max allowed scope was overriden to 
    '/'.");
    });

Cyprus