File size: 1,680 Bytes
23443f5 39eaa9c 266d361 966f2f5 e67a04b 266d361 23443f5 966f2f5 fb0ef54 266d361 966f2f5 610a87b 966f2f5 e80644a 266d361 966f2f5 610a87b 966f2f5 fb0ef54 966f2f5 e80644a 39eaa9c 966f2f5 266d361 23443f5 39eaa9c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Blob Service Worker サンプル</title><script src="dev-tools.js"></script>
</head>
<body>
<h1>Blob Service Worker デモ</h1>
<button id="fetch-button">データ取得</button>
<script>
// 1. Service Worker のコードを文字列として用意
const swCode = `
self.addEventListener('install', event => {
console.log('[SW] Installed');
self.skipWaiting(); // 即時有効化（開発用）
});
self.addEventListener('activate', event => {
console.log('[SW] Activated');
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
console.log('[SW] Fetch intercepted:', event.request.url);
});
`;
// 2. Blob を作成し、オブジェクトURLに変換
const blob = new Blob([swCode], { type: 'application/javascript' });
const blobUrl = URL.createObjectURL(blob);
// 3. Service Worker を登録
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(blobUrl)
.then(reg => {
console.log('[Main] Service Worker registered from Blob:', reg.scope);
})
.catch(err => {
console.error('[Main] Registration failed:', err);
});
}
// 4. デモ用：ボタンクリックで fetch 通信
document.getElementById('fetch-button').addEventListener('click', () => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(data => {
console.log('[Main] Fetched data:', data);
});
});
</script>
</body>
</html>
|