diff --git a/CHANGELOG.md b/CHANGELOG.md
index 993899ca2..716937d62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,9 @@
- Fix: ipv4とipv6の両方が利用可能な環境でallowedPrivateNetworksが設定されていた場合プライベートipの検証ができていなかった問題を修正
- Fix: properly handle cc followers
+### Service Worker
+- Enhance: オフライン表示のデザインを改善・多言語対応
+
## 2023.12.2
### General
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 6e763cda1..910b1edad 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9554,6 +9554,16 @@ export interface Locale extends ILocale {
*/
"lookingForPlayer": string;
};
+ "_offlineScreen": {
+ /**
+ * オフライン - サーバーに接続できません
+ */
+ "title": string;
+ /**
+ * サーバーに接続できません
+ */
+ "header": string;
+ };
}
declare const locales: {
[lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index fd1c891ee..6460397db 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2544,3 +2544,7 @@ _reversi:
timeLimitForEachTurn: "1ターンの時間制限"
freeMatch: "フリーマッチ"
lookingForPlayer: "対戦相手を探しています"
+
+_offlineScreen:
+ title: "オフライン - サーバーに接続できません"
+ header: "サーバーに接続できません"
diff --git a/packages/sw/src/sw.ts b/packages/sw/src/sw.ts
index b79fd8ce7..f423eaca2 100644
--- a/packages/sw/src/sw.ts
+++ b/packages/sw/src/sw.ts
@@ -6,6 +6,7 @@
import { get } from 'idb-keyval';
import * as Misskey from 'misskey-js';
import type { PushNotificationDataMap } from '@/types.js';
+import type { I18n, Locale } from '@/scripts/i18n.js';
import { createEmptyNotification, createNotification } from '@/scripts/create-notification.js';
import { swLang } from '@/scripts/lang.js';
import * as swos from '@/scripts/operations.js';
@@ -26,8 +27,15 @@ globalThis.addEventListener('activate', ev => {
);
});
-function offlineContentHTML(): string {
- return `Offline. Service Worker @${_VERSION_} `;
+async function offlineContentHTML() {
+ const i18n = await (swLang.i18n ?? swLang.fetchLocale()) as Partial>;
+ const messages = {
+ title: i18n.ts?._offlineScreen?.title ?? 'Offline - Could not connect to server',
+ header: i18n.ts?._offlineScreen?.header ?? 'Could not connect to server',
+ reload: i18n.ts?.reload ?? 'Reload',
+ };
+
+ return `${messages.title}${messages.header}
v${_VERSION_}
`;
}
globalThis.addEventListener('fetch', ev => {
@@ -43,8 +51,9 @@ globalThis.addEventListener('fetch', ev => {
if (!isHTMLRequest) return;
ev.respondWith(
fetch(ev.request)
- .catch(() => {
- return new Response(offlineContentHTML(), {
+ .catch(async () => {
+ const html = await offlineContentHTML();
+ return new Response(html, {
status: 200,
headers: {
'content-type': 'text/html',