我有这个非常基本的问题
我正在努力了解 Service Worker 的生命周期,或者更好的是,实际上是什么初始化和更改状态。
我现在有2个问题:
1 -chrome://inspect/#service-workers
总有 2 或 3 行,显示服务工作者都以相同的 PID 运行。为什么?为什么不是只有一个?
2-当我在刷新时检查我的服务人员时,我得到了这个:
- 第566章 启动并运行【停止】
- 第570章 等待激活【skipWaiting】
这意味着什么?什么是 566,什么是 570?我想它们是 sw 的实例,但为什么有两个呢?为什么 570 还在等待?我必须做些什么来确保它会被注册-安装-激活?
3- 一般问题
- 在正常生命周期中结束安装事件的原因是什么?
- 在正常生命周期中触发激活事件的原因是什么?
索引.html
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('./sw.js')
.then(function(registration) {
// successful
console.log('Success: ', registration);
}).catch(function(err) {
// registration failed
console.log('Error: ', err);
});
});
}
</script>
sw.js
var cache_name = 'v1';
var cache_files = [
'./',
'./index.html',
'./style.css'
]
self.addEventListener('install', function(e){
console.log('SW install:', e);
e.waitUntil(
caches.open(cache_name)
.then(function(cache){
console.log('cache', cache);
return cache.addAll(cache_files);
})
.then(function(cache){
console.log('Cache completed');
})
)
});
self.addEventListener('activate', function(event) {
console.log('SW activate:', event);
});
self.addEventListener('fetch', function(e){
console.log('SW fetch:', e.request.url)
e.respondWith(
caches.match(e.request)
.then(function(cache_response){
if(cache_response) return cache_response;
return fetch(e.request);
})
.catch(function(err){
console.log('Cache error', err)
})
);
});
谢谢!