From 85ae337fb8b9acc2bd1d91462c6c71189878df29 Mon Sep 17 00:00:00 2001 From: Kieran Date: Thu, 19 Jan 2023 11:46:52 +0000 Subject: [PATCH] Cache external content --- src/service-worker.js | 61 ++++++++++++------------------------------- 1 file changed, 17 insertions(+), 44 deletions(-) diff --git a/src/service-worker.js b/src/service-worker.js index 0f1e0ce..d3fd20e 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -1,68 +1,41 @@ /* eslint-disable no-restricted-globals */ -// This service worker can be customized! -// See https://developers.google.com/web/tools/workbox/modules -// for the list of available Workbox modules, or add any other -// code you'd like. -// You can also remove this file if you'd prefer not to use a -// service worker, and the Workbox build step will be skipped. - import { clientsClaim } from 'workbox-core'; import { ExpirationPlugin } from 'workbox-expiration'; import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; import { registerRoute } from 'workbox-routing'; -import { StaleWhileRevalidate } from 'workbox-strategies'; +import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies'; clientsClaim(); - -// Precache all of the assets generated by your build process. -// Their URLs are injected into the manifest variable below. -// This variable must be present somewhere in your service worker file, -// even if you decide not to use precaching. See https://cra.link/PWA precacheAndRoute(self.__WB_MANIFEST); -// Set up App Shell-style routing, so that all navigation requests -// are fulfilled with your index.html shell. Learn more at -// https://developers.google.com/web/fundamentals/architecture/app-shell const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$'); -registerRoute( - // Return false to exempt requests from being fulfilled by index.html. - ({ request, url }) => { - // If this isn't a navigation, skip. - if (request.mode !== 'navigate') { - return false; - } // If this is a URL that starts with /_, skip. - - if (url.pathname.startsWith('/_')) { - return false; - } // If this looks like a URL for a resource, because it contains // a file extension, skip. - - if (url.pathname.match(fileExtensionRegexp)) { - return false; - } // Return true to signal that we want to use the handler. - - return true; - }, +registerRoute(({ request, url }) => { + if (request.mode !== 'navigate' || url.pathname.startsWith('/_') || url.pathname.match(fileExtensionRegexp)) { + return false; + } + return true; +}, 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. +const staticTypes = ["image", "video", "audio"] +registerRoute(({ request, url }) => url.origin === self.location.origin && staticTypes.includes(request.destination), new StaleWhileRevalidate({ - cacheName: 'images', + cacheName: 'static-content', plugins: [ - // Ensure that once this runtime cache reaches a maximum size the - // least-recently used images are removed. new ExpirationPlugin({ maxEntries: 50 }), ], }) ); -// This allows the web app to trigger skipWaiting via -// registration.waiting.postMessage({type: 'SKIP_WAITING'}) +// External media domains which have unique urls (never changing content) and can be cached forever +const externalMediaHosts = ["void.cat", "nostr.build", "imgur.com", "i.imgur.com", "pbs.twimg.com", "i.ibb.co"]; +registerRoute(({ request, url }) => externalMediaHosts.includes(url.host) && staticTypes.includes(request.destination), + new CacheFirst({ + cacheName: "ext-content-hosts" + })); + self.addEventListener('message', (event) => { if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting();