Skip to content
This repository was archived by the owner on Feb 23, 2026. It is now read-only.

Commit df7c77b

Browse files
mattyateamattyatea
committed
Service Worker Auto Preloadをオプトアウトするように
1 parent 39c7e92 commit df7c77b

File tree

1 file changed

+51
-43
lines changed

1 file changed

+51
-43
lines changed

‎packages/sw/src/sw.ts‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,34 @@ import { createEmptyNotification, createNotification } from '@/scripts/create-no
1313
import { swLang } from '@/scripts/lang.js';
1414
import * as swos from '@/scripts/operations.js';
1515

16-
// async function respondToNavigation(request: Request): Promise<Response> {
17-
// const controller = new AbortController();
18-
// const timeout = globalThis.setTimeout(() => {
19-
// controller.abort('navigation-timeout');
20-
// }, FETCH_TIMEOUT_MS);
21-
//
22-
// try {
23-
// const response = await fetch(request, { signal: controller.signal });
24-
//
25-
// if (response?.status && response.status < 500) return response;
26-
// if (response?.type === 'opaqueredirect') return response;
27-
// } catch (error) {
28-
// if (_DEV_) {
29-
// console.warn('navigation fetch failed; showing offline page', error);
30-
// }
31-
// } finally {
32-
// globalThis.clearTimeout(timeout);
33-
// }
34-
//
35-
// // Only show offline page when network request actually fails
36-
// const html = await offlineContentHTML();
37-
// return new Response(html, {
38-
// status: 200,
39-
// headers: {
40-
// 'content-type': 'text/html',
41-
// },
42-
// });
43-
// }
16+
async function respondToNavigation(request: Request): Promise<Response> {
17+
const controller = new AbortController();
18+
const timeout = globalThis.setTimeout(() => {
19+
controller.abort('navigation-timeout');
20+
}, FETCH_TIMEOUT_MS);
21+
22+
try {
23+
const response = await fetch(request, { signal: controller.signal });
24+
25+
if (response?.status && response.status < 500) return response;
26+
if (response?.type === 'opaqueredirect') return response;
27+
} catch (error) {
28+
if (_DEV_) {
29+
console.warn('navigation fetch failed; showing offline page', error);
30+
}
31+
} finally {
32+
globalThis.clearTimeout(timeout);
33+
}
34+
35+
// Only show offline page when network request actually fails
36+
const html = await offlineContentHTML();
37+
return new Response(html, {
38+
status: 200,
39+
headers: {
40+
'content-type': 'text/html',
41+
},
42+
});
43+
}
4444

4545
async function offlineContentHTML() {
4646
let i18n: Partial<I18n<Locale>>;
@@ -59,8 +59,16 @@ async function offlineContentHTML() {
5959
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>`;
6060
}
6161

62-
globalThis.addEventListener('install', () => {
63-
// ev.waitUntil(globalThis.skipWaiting());
62+
globalThis.addEventListener('install', (ev) => {
63+
// Opt-out of the ServiceWorkerAutoPreload experiment using Static Routing API
64+
if ('addRoutes' in ev) {
65+
ev.addRoutes({
66+
condition: {
67+
urlPattern: new URLPattern({ pathname: '/*' }),
68+
},
69+
source: 'fetch-event',
70+
});
71+
}
6472
});
6573

6674
globalThis.addEventListener('activate', ev => {
@@ -75,19 +83,19 @@ globalThis.addEventListener('activate', ev => {
7583
);
7684
});
7785

78-
// globalThis.addEventListener('fetch', ev => {
79-
// let isHTMLRequest = false;
80-
// if (ev.request.headers.get('sec-fetch-dest') === 'document') {
81-
// isHTMLRequest = true;
82-
// } else if (ev.request.headers.get('accept')?.includes('/html')) {
83-
// isHTMLRequest = true;
84-
// } else if (ev.request.url.endsWith('/')) {
85-
// isHTMLRequest = true;
86-
// }
87-
//
88-
// if (!isHTMLRequest) return;
89-
// ev.respondWith(respondToNavigation(ev.request));
90-
// });
86+
globalThis.addEventListener('fetch', ev => {
87+
let isHTMLRequest = false;
88+
if (ev.request.headers.get('sec-fetch-dest') === 'document') {
89+
isHTMLRequest = true;
90+
} else if (ev.request.headers.get('accept')?.includes('/html')) {
91+
isHTMLRequest = true;
92+
} else if (ev.request.url.endsWith('/')) {
93+
isHTMLRequest = true;
94+
}
95+
96+
if (!isHTMLRequest) return;
97+
ev.respondWith(respondToNavigation(ev.request));
98+
});
9199

92100
globalThis.addEventListener('push', ev => {
93101
// クライアント取得

0 commit comments

Comments
 (0)