fix(sw): オフライン時のfetch timeout処理を実装 (#16952)

* fix(sw): implement fetch timeout handling for navigation and offline content

* fix(sw): increase fetch timeout

* fix(sw): improve fetch timeout handling for i18n content

* fix(sw): 結局、fetchを通るかCacheがhitするはずなので、i18nのところはいらない

* fix(sw): 400番台のエラーを無条件でオフラインページにしていたのを修正

* 間違えた

* i18nもtimeoutが必要

* import sortingを修正

* import sortingを修正

* Fix: Frontend のsharedにはアクセスできないじゃん...

* SPDX

* Update CHANGELOG.md

* Update packages/sw/src/scripts/lang.ts

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

* Update packages/sw/src/sw.ts

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

* Update CHANGELOG.md

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

---------

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

1 files changed, 15 insertions, 4 deletions

diff --git a/packages/sw/src/scripts/lang.ts b/packages/sw/src/scripts/lang.ts
index 40b6aa4e7b..63ac4ce399 100644
--- a/packages/sw/src/scripts/lang.ts
+++ b/packages/sw/src/scripts/lang.ts
@@ -8,6 +8,7 @@
  */
 import { get, set } from 'idb-keyval';
 import { I18n } from '@@/js/i18n.js';
+import { FETCH_TIMEOUT_MS } from '@/const.js';
 import type { Locale } from 'i18n';
 
 class SwLang {
@@ -37,11 +38,21 @@ class SwLang {
 
 		// _DEV_がtrueの場合は常に最新化
 		if (!localeRes || _DEV_) {
-			localeRes = await fetch(localeUrl);
-			const clone = localeRes.clone();
-			if (!clone.clone().ok) throw new Error('locale fetching error');
+			const controller = new AbortController();
+			const timeout = globalThis.setTimeout(() => {
+				controller.abort('locale-fetch-timeout');
+			}, FETCH_TIMEOUT_MS);
 
-			caches.open(this.cacheName).then(cache => cache.put(localeUrl, clone));
+			try {
+				localeRes = await fetch(localeUrl, { signal: controller.signal });
+
+				const clone = localeRes.clone();
+				if (!clone.clone().ok) throw new Error('locale fetching error');
+
+				caches.open(this.cacheName).then(cache => cache.put(localeUrl, clone));
+			} finally {
+				globalThis.clearTimeout(timeout);
+			}
 		}
 
 		return new I18n<Locale>(await localeRes.json());