Add Workbox offline support and html caching

Question

I am trying to start with workbox. I want to code my website as PWA. It should work offline. And for this, I want to use the CacheFirst Strategy. My Problem is, that the workbox doesnt work offline. And I even can not find my main html file in the cache.
Here is my initialization of my ServiceWorker in the main html file:

<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js');
      });
    }
  </script>

And here is my service-worker.js file:

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

workbox.routing.registerRoute(
  /\.html/,
  new workbox.strategies.CacheFirst({
    cacheName: 'html-cache',
  })
);

workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.CacheFirst({
    cacheName: 'css-cache',
  })
);

workbox.routing.registerRoute(
  /\.js/,
  new workbox.strategies.CacheFirst({
    cacheName: 'js-cache',
  })
);

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
);

You see I initialize it and set it up as need. Here you can see the caches in the dev console. But as you can see there is no html-cache. Why? And again it doesn't work offline. Additional info: I am running the website over HTTPS as it is needed for the service worker. Hope somebody can help me.
~Marcus

Arnelle Balane · Accepted Answer · 2020-01-07 11:55:18Z

The HTML are not getting cached because most likely they are being loaded or linked to without the .html extension, like so:

https://example.com/

<a href="/about">About</a>

However, the RegExp used to match requests to HTML pages checks for the .html extension:

workbox.routing.registerRoute(
  /\.html/,
  ...
);

The CSS, JS, and image resources are being cached properly because they are most likely being loaded with their file extensions, which matches the RegExp patterns passed to Workbox.

To fix this, make sure that the URLs used to request the HTML pages match the pattern. One way to achieve this is to visit them or link to them them with the .html extension:

https://example.com/index.html
https://example.com/about.html

<a href="/about.html">About</a>

Most of the time, it's desirable to use URLs without the .html extension. To still cache the HTML pages in this case, other ways of matching the URLs can be used. Workbox supports many ways to route requests: using a string, RegExp, or a callback function. The documentation provides a good explanation of when it's appropriate to use each one. One way this could look like would be (this can be as simple or complex as necessary):

function matchFunction({ url }) {
  const pages = ['/', '/about'];
  return pages.includes(url.pathname);
}

workbox.routing.registerRoute(
  matchFunction,
  new workbox.strategies.CacheFirst({
    cacheName: 'html-cache'
  })
);

Collectives™ on Stack Overflow

Add Workbox offline support and html caching

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related