1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
const CACHE = "kodaira-parks-v1";
const APP_SHELL = [
"/kodaira-data/parks/",
"/manifest.webmanifest",
"/icons/icon-192.png",
"/icons/icon-512.png",
];
self.addEventListener("install", (event) => {
event.waitUntil(
caches
.open(CACHE)
.then((cache) => cache.addAll(APP_SHELL))
.then(() => self.skipWaiting()),
);
});
self.addEventListener("activate", (event) => {
event.waitUntil(
caches
.keys()
.then((keys) =>
Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key))),
)
.then(() => self.clients.claim()),
);
});
self.addEventListener("fetch", (event) => {
const request = event.request;
if (request.method !== "GET") return;
const url = new URL(request.url);
// OSMのタイルなど外部オリジンのものはキャッシュしない。
if (url.origin !== self.location.origin) return;
// ページ遷移はネットワーク優先。オフライン時はキャッシュ→公園ページ。
if (request.mode === "navigate") {
event.respondWith(
fetch(request)
.then((response) => {
const copy = response.clone();
caches.open(CACHE).then((cache) => cache.put(request, copy));
return response;
})
.catch(() =>
caches
.match(request)
.then((cached) => cached || caches.match("/kodaira-data/parks/")),
),
);
return;
}
// それ以外はキャッシュ優先。取得できたらキャッシュを更新する。
event.respondWith(
caches.match(request).then((cached) => {
const network = fetch(request)
.then((response) => {
if (response.ok) {
const copy = response.clone();
caches.open(CACHE).then((cache) => cache.put(request, copy));
}
return response;
})
.catch(() => cached);
return cached || network;
}),
);
});
|
