https://home-bcp.pages.dev/sw.js

1import {
2  RUNTIME_CACHE, 
3  APP_SHELL_CACHE
4} from './config.js'
5
6const APP_SHELL = ["/", "/index.html"];
7
8const isCacheableResponse = (response) =>
9  response && (response.ok || response.type === "opaque");
10
11self.addEventListener("install", (event) => {
12  event.waitUntil(
13    caches
14      .open(APP_SHELL_CACHE)
15      .then((cache) => cache.addAll(APP_SHELL))
16      .catch(() => {
17        // Do not block installation if one shell entry fails.
18      })
19      .then(() => self.skipWaiting())
20  );
21});
22
23self.addEventListener("activate", (event) => {
24  event.waitUntil(
25    caches
26      .keys()
27      .then((keys) =>
28        Promise.all(
29          keys
30            .filter((key) => ![APP_SHELL_CACHE, RUNTIME_CACHE].includes(key))
31            .map((key) => caches.delete(key))
32        )
33      )
34      .then(() => self.clients.claim())
35  );
36});
37
38const staleWhileRevalidate = async (request) => {
39  const cache = await caches.open(RUNTIME_CACHE);
40  const cached = await cache.match(request);
41
42  const networkPromise = fetch(request)
43    .then((response) => {
44      if (isCacheableResponse(response)) {
45        cache.put(request, response.clone());
46      }
47      return response;
48    })
49    .catch(() => cached);
50
51  return cached || networkPromise;
52};
53
54const matchImage = async (request) => {
55  const cache = await caches.open(RUNTIME_CACHE);
56  const cached = await cache.match(request);
57
58  return cached || fetch(request)
59}
60
61const networkFirstDocument = async (request) => {
62  const cache = await caches.open(APP_SHELL_CACHE);
63  try {
64    const response = await fetch(request);
65    if (isCacheableResponse(response)) {
66      cache.put(request, response.clone());
67    }
68    return response;
69  } catch {
70    const cachedDocument = await cache.match(request);
71    if (cachedDocument) return cachedDocument;
72
73    const fallbackShell = await cache.match("/");
74    if (fallbackShell) return fallbackShell;
75
76    throw new Error("No offline document available");
77  }
78};
79
80self.addEventListener("fetch", (event) => {
81  const { request } = event;
82  if (request.method !== "GET") return;
83
84  const url = new URL(request.url);
85  const isSameOrigin = url.origin === self.location.origin;
86
87  if (request.mode === "navigate") {
88    event.respondWith(networkFirstDocument(request));
89    return;
90  }
91
92  if (
93    isSameOrigin &&
94    (url.pathname.startsWith("/_build/") ||
95      ["script", "style", "font", "image"].includes(request.destination))
96  ) {
97    event.respondWith(staleWhileRevalidate(request));
98    return;
99  }
100
101  if (!isSameOrigin && ["style", "font"].includes(request.destination)) {
102    event.respondWith(staleWhileRevalidate(request));
103    return;
104  }
105
106  if (request.destination == "image") {
107    event.respondWith(matchImage(request));
108    return;
109  }
110});