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.
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',
})
);