/// /* 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 { CacheableResponsePlugin } from "workbox-cacheable-response"; import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching"; import { registerRoute } from "workbox-routing"; import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from "workbox-strategies"; declare const self: ServiceWorkerGlobalScope; 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 }: { request: Request; url: 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; }, 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.startsWith("/static"), // Customize this strategy as needed, e.g., by changing to CacheFirst. new StaleWhileRevalidate({ cacheName: "app-static", plugins: [ // Ensure that once this runtime cache reaches a maximum size the // least-recently used files are removed. new ExpirationPlugin({ maxEntries: 100 }), ], }) ); registerRoute( ({ url }) => [ "cdn.jsdeliv.net", "cdnjs.cloudflare.com", "static.cloudflareinsights.com", process.env.REACT_APP_IMAGES_API_URL || "i.metahkg.org", "na.cx", "gstatic.com", "google.com", "sa.metahkg.org", ].some((i) => url.origin.includes(i)), new CacheFirst({ cacheName: "app-external-assets", plugins: [ new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxAgeSeconds: 60 * 24 * 60 }), ], }) ); registerRoute( ({ url }) => url.pathname.startsWith("/api"), new NetworkFirst({ cacheName: "app-api", plugins: [ new CacheableResponsePlugin({ statuses: [200], }), new ExpirationPlugin({ maxAgeSeconds: 60 * 24 * 30 }), ], }) ); // This allows the web app to trigger skipWaiting via // registration.waiting.postMessage({type: 'SKIP_WAITING'}) self.addEventListener("message", (event) => { if (event.data && event.data.type === "SKIP_WAITING") { self.skipWaiting(); } if (event.data && event.data.type === "CHECK_VERSION") { const build = process.env.REACT_APP_build || "1"; self.clients.matchAll({ includeUncontrolled: true, type: "window" }).then((all) => all.map((client) => client.postMessage({ type: "CURRENT_VERSION", payload: `build ${build}`, }) ) ); } }); // Any other custom service worker logic can go here.