可以使用window.addEventListener和caches对象来处理页面缓存事件。
window.addEventListener('load', function() {
// 检查是否支持Service Worker
if ('serviceWorker' in navigator) {
// 注册Service Worker
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker 注册成功：', registration.scope);
}).catch(function(err) {
console.log('Service Worker 注册失败：', err);
});
}
});
// 监听Service Worker的install事件
self.addEventListener('install', function(event) {
event.waitUntil(
// 打开缓存
caches.open('my-cache').then(function(cache) {
console.log('Opened cache');
// 缓存页面资源
return cache.addAll([
'/',
'/index.html',
'/styles/main.css',
'/script/main.js'
]);
})
);
});
// 监听Service Worker的fetch事件
self.addEventListener('fetch', function(event) {
event.respondWith(
// 从缓存中获取资源
caches.match(event.request).then(function(response) {
// 如果缓存中存在资源，直接返回缓存中的资源
if (response) {
return response;
}
// 如果缓存中不存在资源，通过网络获取资源并缓存到本地
return fetch(event.request).then(function(response) {
// 如果获取资源成功，将资源缓存到本地
return caches.open('my-cache').then(function(cache) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});关键词：
window.addEventListenercachesnavigator.serviceWorker.registerself.addEventListenerevent.waitUntilcaches.opencache.addAllcaches.matchfetchcache.put