javascripthtmlprogressive-web-appsworkbox

My PWA using Workbox CLI and its service-worker generator doesn't work offline

I'm newbie in building PWAs and working with Workbox (V5). And I'm having problem making my page to be cached and work offline!

Here is what I have done:

  1. I wrote my index.html file in a way that it has the needed meta tags for PWAs, loads the manifest file (manifest.webmanifest), and registers the service-worker JavaScript file (sw.js).
  2. I installed workbox-cli using npm install workbox-cli --global command.
  3. I generated my workbox-config.js file using workbox wizard command and tweaked it manually to fit my desire configurations.
  4. I finally generated my service-worker (sw.js) file and a workbox-xxx.js file using workbox generateSW workbox-config.js command.

Now when I run my page on localhost and then open up the Chrome DevTools, and go to Lighthouse section to audit my webpage with it, it says my app is installable, and PWA optimized... But says it doesn't work offline:

- Current page does not respond with a 200 when offline

- start_url does not respond with a 200 when offlineTimed out waiting for start_url (http://127.0.0.1:4000/?source=pwa) to respond.

Here is my index.html.

<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="#eeeeee" />
  <meta name="apple-mobile-web-app-title" content="Hello" />
  <meta name="description" content="I'm here. Hello World!" />
  <meta name="theme-color" content="#eeeeee" />

  <link rel="shortcut icon" href="./favicon.ico" />
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">


  <title>Hello</title>
  <meta name="description" content="Hello World!">
  <link rel="manifest" href="./manifest.webmanifest" />

  <link rel="stylesheet" href="./assets/styles/main.css">
</head>


  <body>

    <h1>Hello World!</h1>

    <script src="./assets/scripts/main.js" charset="utf-8"></script>

    <script>
    // Check that service workers are supported
    if ('serviceWorker' in navigator) {
      // Use the window load event to keep the page load performant
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./sw.js');
      });
    }
    </script>

    <noscript>Please enable JavaScript to continue using this application.</noscript>
    
  </body>

</html>

Here is my manifest.webmanifest.

{
  "short_name": "Hello",
  "name": "Hello",
  "description": "I'm here. Hello World!",
  "icons": [
    {
      "src": "/assets/images/android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/images/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "scope": "/",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "orientation": "portrait-primary",
  "theme_color": "#eeeeee",
  "background_color": "#eeeeee"
}

Here is my workbox-config.js. As you can see I only pre-cache .html and .ico files, and then do runtime caching for images or .css and .js files.

module.exports = {
  globDirectory: "./",
  globPatterns: [
    "**/*.{html,ico}"
  ],
  globIgnores: [
    "node_modules/**/*",
    "{.,_}*/**/*",
    "**/*.{md,txt}",
    "Gemfile*",
    "package*"
  ],
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images',
        expiration: {
          maxEntries: 10,
          maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
        },
      },
    },
    {
      urlPattern: /\.(?:css|js)$/,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'assets',
      },
    }
  ],
  swDest: "./sw.js",
  sourcemap: false
};

I cannot understand what am I doing wrong! Everything is clear and based on the Workbox documentations! Please help! Anyone knows what's going wrong over here?

Thanks in advance.

Regards, Ali

Solution

  • Try adding ignoreURLParametersMatching: [/^source$/] to your workbox-config.js. This will tell workbox-precaching that the ?source=pwa query parameter can be ignored when looking for a matching URL in the cache.

    By default, anything starting with utm_ or the parameter fbclid is ignored, so if you wanted, another approach would be to change your start_url to something like /?utm_source=pwa.