|
|
<!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> |
|
|
|
|
|
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); |
|
|
}); |
|
|
`; |
|
|
|
|
|
|
|
|
const blob = new Blob([swCode], { type: 'application/javascript' }); |
|
|
const blobUrl = URL.createObjectURL(blob); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
}); |
|
|
a(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
