85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
const CACHE_NAME = 'file-cache-v1'
|
|
const FILE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml']
|
|
|
|
self.addEventListener('install', (event) => {
|
|
console.log('Service Worker 安装')
|
|
})
|
|
|
|
self.addEventListener('activate', (event) => {
|
|
console.log('Service Worker 激活, 立即接管页面')
|
|
event.waitUntil(clients.claim())
|
|
})
|
|
|
|
self.addEventListener('fetch', (event) => {
|
|
//console.log('Service Worker 获取资源:', event.request.url)
|
|
|
|
if (!event.request.url.match(/\.(jpeg|jpg|gif|png|webp|svg)$/i)) {
|
|
return event.respondWith(fetch(event.request))
|
|
}
|
|
|
|
event.respondWith(
|
|
caches.match(event.request).then(async (cachedResponse) => {
|
|
// 如果文件已缓存，则返回缓存的响应
|
|
if (cachedResponse) {
|
|
console.log('使用了缓存:', event.request.url)
|
|
|
|
for (const key of await caches.keys()) {
|
|
const cache = await caches.open(key)
|
|
|
|
const requests = await cache.keys()
|
|
requests.forEach((request) => {
|
|
console.log(request.url)
|
|
})
|
|
}
|
|
|
|
return cachedResponse
|
|
}
|
|
|
|
// 如果缓存中没有，则发起网络请求并缓存新图像(检查网络响应是否为文件)
|
|
return fetch(event.request).then(async (networkResponse) => {
|
|
if (networkResponse && networkResponse.ok && FILE_TYPES.includes(networkResponse.headers.get('Content-Type'))) {
|
|
const cache = await caches.open(CACHE_NAME)
|
|
await cache.put(event.request, networkResponse.clone())
|
|
}
|
|
return networkResponse
|
|
})
|
|
})
|
|
)
|
|
|
|
//// 先尝试从 webRTC 获取资源, 如果失败则从网络获取资源
|
|
//event.respondWith(async function () {
|
|
// const response = await fetch(event.request)
|
|
// return response
|
|
//}())
|
|
|
|
//event.respondWith(fetch(event.request))
|
|
//self.clients.matchAll().then(clients => {
|
|
// clients.forEach(client => {
|
|
// client.postMessage('Hello from Service Worker')
|
|
// })
|
|
//})
|
|
})
|
|
|
|
self.addEventListener('message', event => {
|
|
console.log("%c收到主线程消息: " + event.data, 'color: red;')
|
|
})
|
|
|
|
//// 检查通知权限
|
|
//if (Notification.permission === 'granted') {
|
|
// // 如果已经授权，则可以显示通知
|
|
// registration.showNotification('Hello World')
|
|
//} else if (Notification.permission === 'default') {
|
|
// // 如果权限尚未授予，则请求权限
|
|
// Notification.requestPermission().then(permission => {
|
|
// if (permission === 'granted') {
|
|
// // 权限授予成功后显示通知
|
|
// showNotification();
|
|
// } else {
|
|
// console.log('Notification permission denied');
|
|
// }
|
|
// }).catch(err => {
|
|
// console.log('Failed to request notification permission', err);
|
|
// });
|
|
//} else {
|
|
// console.log('Notification permission denied');
|
|
//}
|