Easy to use and well customizable setDefaultHandler(); from workbox-routing when service worker powered by Workbox unless generateSW is the build tool. Default handler used for page caches with NetworkFirst strategy because html pages can't be cached throughout registerRoute or urlPattern with:
({ request }) => request.mode === 'navigate', I register routes for third party sources with NetworkOnly strategy that works fine while website static assets chached separately. Small static html pages are tricky enough for building a service worker because '/', '/page1/', '/page2/', /.../etc. and they will not be cached as expected.
FYI: / = index.html, /page1/ = /page1/index.htm, /page2/ = /page2/index.htm
Html pages managed by default handler because no other route registered for them. Here is customized setDefaultHandler in service worker file wrote by hand:
setDefaultHandler( new NetworkFirst({ networkTimeoutSeconds: 3, cacheName: 'runtime', plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 12, maxAgeSeconds: 60 * 60 * 24 * 15, // 15 days matchOptions: { ignoreVary: true }, }), ], }), ); Node-based build process can't let us use/customize setDefaultHandler. I guess NetworkOnly as default value with no opt to change. Thanks to this answer, however, build.js includes code snipet as follow. Anyways, caching strategy with route matching helps html page caching:
const {generateSW} = require('workbox-build'); // Please mind infinite loop issue with offline fallback! // It works well with Desktop but unstable with Mobile // precacheFallback leads to an unexpected behaviour in my website // Read on my comments below function matchFunction({ url }) { const pages = ['/', '/page1/', '/page2/', '/.../']; return pages.includes(url.pathname); } generateSW({ // ... other generateSW config options... runtimeCaching: [ { urlPattern: matchFunction, handler: 'NetworkFirst', options: { networkTimeoutSeconds: 3, cacheName: 'runtime', cacheableResponse: { statuses: [0, 200] }, expiration: { maxEntries: 12, maxAgeSeconds: 60 * 60 * 24 * 15, // 15 days matchOptions: { ignoreVary: true }, }, precacheFallback: { fallbackURL: 'offline.html', }, }, }, // ... other runtimeCaching options... ], }); Custom handler - as per @jeff-posnick - could be a way of setting a default handler for runtime caching in build.js but I'm not sure how need to hardcoding.
Note on 20 March
I prefer RegExp to matchFunction in runtime caching. RegExp route only matches HTML documents:
const {generateSW} = require('workbox-build'); generateSW({ // ... other generateSW config options... runtimeCaching: [ { urlPattern: RegExp('^[^.]+$'), // no change happens in other options }, // ... other runtimeCaching options... ], }); I have modified the question and added offline fallback option. RegExp with custom handler includes offline fallback would be a perfect solution, indeed. Hope precacheFallback is not the only way to go with worbox-build in generateSW mode.
Is there any chance to use workbox recipe like offlineFallback(); combined with a custom handler? I was wondering whether it would be an achiveable goal:
const {generateSW} = require('workbox-build'); const pageFallback = '/offline.html'; // I should figure out how to add offline.html to default cache name // (workbox-offline-fallbacks) in workbox-build generateSW mode // Custom hundler should be based on 'workbox-offline-fallbacks' const customHandler = async offline => { const destination = offline.request.destination; const cache = await self.caches.open('workbox-offline-fallbacks'); if (destination === 'document') { return (await cache.match(pageFallback)) || Response.error(); } return Response.error(); }; generateSW({ // ... other generateSW config options... runtimeCaching: [ { urlPattern: (customHandler, RegExp('^[^.]+$')), // no precacheFallback }, // ... other runtimeCaching options... ], }); customHandler could help to keep runtime caching smooth. However, offline fallback is missing from the pattern.
