title: PWA: No matching service worker detected. You may need to reload the page
body: <p>I get this warning:</p>
  
  <p><a href="https://i.stack.imgur.com/kQ7DP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kQ7DP.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>The thing that my service worker is working.</p>
  
  <p><a href="https://i.stack.imgur.com/SjktA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SjktA.png" alt="enter image description here"></a></p>
  
  <p>I even tried with two other URLs, both of them with HTTPs.</p>
  
  <hr>
  
  <p>Now I'm going to show you the code, I'm using:</p>
  
  <p><strong><em>site.webmanifest</em></strong></p>
  
  <pre><code>{
      ...
      "start_url": "/",
      "display": "standalone"
      ...
  }
  </code></pre>
  
  <p>To create my service-worker, I use the webpack plugin: WorkboxPlugin combined with Laravel Mix:</p>
  
  <p><strong><em>webpack.mix.js</em></strong></p>
  
  <pre><code>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
      },
  });
  </code></pre>
  
  <p>It creates the <strong><em>service-worker.js:</em></strong></p>
  
  <pre><code>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, {});
  </code></pre>
  
  <p>With the <strong><em>precache-manifest.js</em></strong></p>
  
  <pre><code>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"
    }
  ]);
  </code></pre>
  
  <p>What should I do with this warning?</p>