オフライン時の画面にリロードボタンを追加 (#11242)

* feat: オフライン時の画面にリロードボタンを追加リロードのためのボタンがないとPWAでインターネットが復帰しても何もできなくなるため。 * docs(changelog): add オフライン時の画面にリロードボタンを追加
2023-07-11 18:24:10 +09:00
parent cf3e39178b
commit 9845ccec5b
2 changed files with 13 additions and 1 deletions
--- a/packages/sw/src/sw.ts
+++ b/packages/sw/src/sw.ts
@@ -21,6 +21,10 @@ globalThis.addEventListener('activate', ev => {
 	);
 });

+function offlineContentHTML(): string {
+	return `<!doctype html>Offline. Service Worker @${_VERSION_} <button onclick="location.reload()">reload</button>`
+}
+
 globalThis.addEventListener('fetch', ev => {
 	let isHTMLRequest = false;
 	if (ev.request.headers.get('sec-fetch-dest') === 'document') {
@@ -34,7 +38,14 @@ globalThis.addEventListener('fetch', ev => {
 	if (!isHTMLRequest) return;
 	ev.respondWith(
 		fetch(ev.request)
-			.catch(() => new Response(`Offline. Service Worker @${_VERSION_}`, { status: 200 })),
+			.catch(() => {
+				return new Response(offlineContentHTML(), {
+					status: 200,
+					headers: {
+						'content-type': 'text/html',
+					},
+				});
+			}),
 	);
 });