From 4de77784c9ee5bf787e7bda41aae84d81edff78a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 21 Jan 2024 11:50:05 +0900 Subject: [PATCH] =?UTF-8?q?enhance(sw):=20=E3=82=AA=E3=83=95=E3=83=A9?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E8=A1=A8=E7=A4=BA=E3=81=AE=E3=83=87=E3=82=B6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=92=E6=94=B9=E5=96=84=20(#13052)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(sw): オフライン表示のデザインを改善 * Update Changelog * fix * fix * fix * 言語が取得できなかった場合のフォールバックを追加 * (change) translation key --- CHANGELOG.md | 3 +++ locales/index.d.ts | 10 ++++++++++ locales/ja-JP.yml | 4 ++++ packages/sw/src/sw.ts | 17 +++++++++++++---- 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 993899ca2f..716937d628 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 6e763cda10..910b1edad8 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 fd1c891ee7..6460397db7 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 b79fd8ce7a..f423eaca20 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',