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

* feat: オフライン時の画面にリロードボタンを追加リロードのためのボタンがないとPWAでインターネットが復帰しても何もできなくなるため。 * docs(changelog): add オフライン時の画面にリロードボタンを追加
2023-07-11 18:24:10 +09:00 · 2023-07-11 18:24:10 +09:00 · 9845ccec5b
parent cf3e39178b
commit 9845ccec5b
2 changed files with 13 additions and 1 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -30,6 +30,7 @@
 - ユーザーのContextMenuに「アンテナに追加」ボタンを追加
 - フォローやお気に入り登録をしていないチャンネルを開く時は概要ページを開くように
 - 画面ビューワをタップした場合、マウスクリックと同様に画像ビューワを閉じるように
+- オフライン時の画面にリロードボタンを追加
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
--- 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',
+					},
+				});
+			}),
 	);
 });