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

* feat: オフライン時の画面にリロードボタンを追加リロードのためのボタンがないとPWAでインターネットが復帰しても何もできなくなるため。 * docs(changelog): add オフライン時の画面にリロードボタンを追加
misskey-dev · Jul 11, 2023 · 9845cce · 9845cce
1 parent cf3e391
commit 9845cce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@
 - ユーザーのContextMenuに「アンテナに追加」ボタンを追加
 - フォローやお気に入り登録をしていないチャンネルを開く時は概要ページを開くように
 - 画面ビューワをタップした場合、マウスクリックと同様に画像ビューワを閉じるように
+- オフライン時の画面にリロードボタンを追加
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正

diff --git 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',
+					},
+				});
+			}),
 	);
 });