diff --git a/src/service-worker.js b/src/service-worker.js index a0ad009..64f4584 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -9,9 +9,19 @@ import { clientsClaim } from 'workbox-core'; import { ExpirationPlugin } from 'workbox-expiration'; +import {CacheableResponsePlugin} from 'workbox-cacheable-response'; import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; import { registerRoute } from 'workbox-routing'; -import { StaleWhileRevalidate } from 'workbox-strategies'; +import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies'; +import {setCacheNameDetails} from 'workbox-core'; +import {BackgroundSyncPlugin} from 'workbox-background-sync'; + +setCacheNameDetails({ + prefix: 'kevins-toolbox', + suffix: 'v1', + precache: 'precache', + runtime: 'runtime' +}); clientsClaim(); @@ -45,21 +55,52 @@ registerRoute( }, createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html') ); - -// An example runtime caching route for requests that aren't handled by the -// precache, in this case same-origin .png requests like those from in public/ registerRoute( - // Add in any other file extensions or routing criteria as needed. - ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst. - new StaleWhileRevalidate({ - cacheName: 'images', - plugins: [ - // Ensure that once this runtime cache reaches a maximum size the - // least-recently used images are removed. - new ExpirationPlugin({ maxEntries: 50 }), - ], - }) -); + ({request}) => request.destination === 'image', + new CacheFirst({ + cacheName: 'images', + plugins: [ + new CacheableResponsePlugin({ + statuses: [0, 200], + }), + new ExpirationPlugin({ + maxEntries: 60, + maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days + }), + ], + }), + ); + + registerRoute( + ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('translation.json'), + new StaleWhileRevalidate({ + cacheName: 'translations', + plugins: [ + new ExpirationPlugin({ maxEntries: 5 }), + ], + }) + ); + + registerRoute( + ({url}) => url.origin === 'https://fonts.googleapis.com' || + url.origin === 'https://fonts.gstatic.com', + new StaleWhileRevalidate({ + cacheName: 'google-fonts', + plugins: [ + new ExpirationPlugin({maxEntries: 20}), + ], + }), + ); + + registerRoute( + ({request}) => request.destination === 'script' || + request.destination === 'style', + new StaleWhileRevalidate({ + plugins: [ + new BackgroundSyncPlugin() + ] + }) + ); // This allows the web app to trigger skipWaiting via // registration.waiting.postMessage({type: 'SKIP_WAITING'})