Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance(sw): オフライン表示のデザインを改善 #13052

Merged
merged 9 commits into from
Jan 21, 2024
Merged

enhance(sw): オフライン表示のデザインを改善 #13052

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c91e83c
enhance(sw): オフライン表示のデザインを改善
kakkokari-gtyih Jan 20, 2024
df81103
Update Changelog
kakkokari-gtyih Jan 20, 2024
73af882
fix
kakkokari-gtyih Jan 20, 2024
8964b10
fix
kakkokari-gtyih Jan 20, 2024
91db763
fix
kakkokari-gtyih Jan 20, 2024
f89c2da
言語が取得できなかった場合のフォールバックを追加
kakkokari-gtyih Jan 20, 2024
c7ccf10
Merge branch 'develop' into enhance-13050
kakkokari-gtyih Jan 21, 2024
5c8f5a2
(change) translation key
kakkokari-gtyih Jan 21, 2024
a8e45d6
Merge branch 'enhance-13050' of https://github.com/kakkokari-gtyih/mi…
kakkokari-gtyih Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@
- Fix: ipv4とipv6の両方が利用可能な環境でallowedPrivateNetworksが設定されていた場合プライベートipの検証ができていなかった問題を修正
- Fix: properly handle cc followers

### Service Worker
- Enhance: オフライン表示のデザインを改善・多言語対応

## 2023.12.2

### General
Expand Down
10 changes: 10 additions & 0 deletions locales/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9554,6 +9554,16 @@ export interface Locale extends ILocale {
*/
"lookingForPlayer": string;
};
"_disconnected": {
/**
* オフライン - サーバーに接続できません
*/
"title": string;
/**
* サーバーに接続できません
*/
"header": string;
};
}
declare const locales: {
[lang: string]: Locale;
Expand Down
4 changes: 4 additions & 0 deletions locales/ja-JP.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2544,3 +2544,7 @@ _reversi:
timeLimitForEachTurn: "1ターンの時間制限"
freeMatch: "フリーマッチ"
lookingForPlayer: "対戦相手を探しています"

_disconnected:
kakkokari-gtyih marked this conversation as resolved.
Show resolved Hide resolved
title: "オフライン - サーバーに接続できません"
header: "サーバーに接続できません"
17 changes: 13 additions & 4 deletions packages/sw/src/sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,8 +27,15 @@ globalThis.addEventListener('activate', ev => {
);
});

function offlineContentHTML(): string {
return `<!doctype html>Offline. Service Worker @${_VERSION_} <button onclick="location.reload()">reload</button>`;
async function offlineContentHTML() {
const i18n = await (swLang.i18n ?? swLang.fetchLocale()) as Partial<I18n<Locale>>;
const messages = {
title: i18n.ts?._disconnected?.title ?? 'Offline - Could not connect to server',
header: i18n.ts?._disconnected?.header ?? 'Could not connect to server',
reload: i18n.ts?.reload ?? 'Reload',
};

return `<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1"name="viewport"><title>${messages.title}</title><style>body{background-color:#0c1210;color:#dee7e4;font-family:Hiragino Maru Gothic Pro,BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;line-height:1.35;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:24px;box-sizing:border-box}.icon{max-width:120px;width:100%;height:auto;margin-bottom:20px;}.message{text-align:center;font-size:20px;font-weight:700;margin-bottom:20px}.version{text-align:center;font-size:90%;margin-bottom:20px}button{padding:7px 14px;min-width:100px;font-weight:700;font-family:Hiragino Maru Gothic Pro,BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;line-height:1.35;border-radius:99rem;background-color:#b4e900;color:#192320;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}button:hover{background-color:#c6ff03}</style></head><body><svg class="icon"fill="none"height="24"stroke="currentColor"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"viewBox="0 0 24 24"width="24"xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z"fill="none"stroke="none"/><path d="M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62"/><path d="M3 3l18 18"/></svg><div class="message">${messages.header}</div><div class="version">v${_VERSION_}</div><button onclick="reloadPage()">${messages.reload}</button><script>function reloadPage(){location.reload(!0)}</script></body></html>`;
}

globalThis.addEventListener('fetch', ev => {
Expand All @@ -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',
Expand Down
Loading