I have a client with a CRA site who wants to install a PWA with only a fallback "you're offline" page.
I wondered if it's a common request? If so I'm happy to work on a PR to add it as a cra-template?
e.g. cra-template-pwa-fallback-page & cra-template-pwa-fallback-page-typescript
/// <reference lib="webworker" />
/* eslint-disable no-restricted-globals */
declare const self: ServiceWorkerGlobalScope;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ignored = self.__WB_MANIFEST;
self.addEventListener("install", (event) => {
event.waitUntil(
(async function () {
const cache = await caches.open("static-v1");
await cache.addAll(["offline.html"]);
})()
);
});
self.addEventListener("activate", (event) => {
event.waitUntil(
(async function () {
if (self.registration.navigationPreload) {
await self.registration.navigationPreload.enable();
}
})()
);
});
self.addEventListener("fetch", (event) => {
const { request } = event;
// Always bypass for range requests, due to browser bugs
if (request.headers.has("range")) return;
event.respondWith(
(async function () {
const cachedResponse = await caches.match(request);
if (cachedResponse) return cachedResponse;
try {
const response = await event.preloadResponse;
if (response) return response;
return await fetch(request);
} catch (err) {
if (request.mode === "navigate") {
return caches.match("offline.html");
}
throw err;
}
})()
);
});
export {};