PWA - How to cache html pages (not only js, css...)

Question

If I use,

registerRoute(
    new RegExp('.*'),
    new CacheFirst({
        cacheName: 'all',
    })
);

it will work and cache all the pages with all the assets. So if I refresh the page in offline mode, it works.

But apparently it's not a good idea to cache ALL! So I want to cache js|css|eot|ttf|otf|woff|woff2 and of course the html as well.

So if I use

registerRoute(
    new RegExp('(\.(js|css|eot|ttf|otf|woff|woff2)$)'), // <<== how to add html type here to be cached?
    new CacheFirst({
        cacheName: 'all',
    })
);

and refresh the page while it's in offline mode, it can't view the page since it hasn't cached.

I'm using Vuejs, Mix, Workbox.

Answer 1

There are a number of different options for configuring runtime routing and caching; you can also create multiple routes with different strategies for each type of resource. Routing based on the request.destination value is a fairly robust approach.

I would avoid using a CacheFirst strategy for any URLs that are unversioned, since you don't have a great way of making sure it ever gets updated after you deploy changes. StaleWhileRevalidate or NetworkFirst is a safer strategy to use for URLs that don't contain hashes.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate, NetworkFirst} from 'workbox-strategies';

registerRoute(
  // Match HTML document requests.
  ({request}) => request.destination === 'document',
  new NetworkFirst({
    cacheName: 'html',
  })
);

registerRoute(
  // Match JS, CSS, and font requests.
  ({request}) => ['font', 'script', 'style'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'resources',
  })
);