Workbox-webpack-plugin does not work offline for me

Question

Here's my webpack plugins config:

    plugins: [
  new MiniCssExtractPlugin(),
  new WorkboxPlugin.GenerateSW({
    clientsClaim: true,

    skipWaiting: true,
    maximumFileSizeToCacheInBytes: 40 * 1024 * 1024
  })

Here I register the service worker in my main app.js file (the entry point of webpack)

if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/dist/service-worker.js')
      .then((registration => {
        console.log('SW registered: ', registration);
      }))
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}

I can see the console log in my chrome console confirming the service worker is registered. I can check in the auto-generated service-worker.js file that the source code supposedly caches my bundle.js:

     workbox.precacheAndRoute([{
    "url": "bundle.js",
    "revision": "889992e99eeb12acdcd7bc83b2b42279"
  }, {
    "url": "main.css",
    "revision": "b44f8ba70b6644eb8d2cbf732ed6dc09"
  }], {});

I can even see in my Cache storage both main.css and bundle.js files are cached. However, the service worker does not work correctly. Whenever I go off-line, I can see the typical "No internet" dinosaur. Any help would be appreciated.

Workbox-webpack-plugin does not work offline for me

0 Answers0