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?

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 ` — Justin Collins, Aug 22 '19 at 20:39
@JustinCollins sorry it's a typo here. I link to the correct manifest file — Philipp Mochine, Aug 23 '19 at 06:28
Asked for help here: https://bugs.chromium.org/p/chromium/issues/detail?id=996863 — Philipp Mochine, Aug 23 '19 at 15:01
@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: https://stackoverflow.com/questions/35780397/understanding-service-worker-scope) — Philipp Mochine, Aug 23 '19 at 17:03
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) — gtamborero, Nov 29 '20 at 00:39

score 5 · Answer 1 · answered Aug 23 '19 at 17:19

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);
            });
    });
}

score 1 · Answer 2 · answered Jun 02 '20 at 08:28

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 
    '/'.");
    });

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

2 Answers2