我有一个非常基本的问题。
我正在努力理解Service Worker生命周期，或者更好的说，是在实际情况下如何初始化和改变状态。
我现在有2个问题：
1 - 在chrome://inspect/#service-workers中，总是有2或3条线，显示所有运行相同PID的服务工作者。为什么？为什么不只有一个？
2- 当我刷新后检查我的服务工作者时，我得到了这个：
- #566已激活并正在运行 [stop]
- #570等待激活 [skipWaiting]
那是什么意思？566和570是什么？我想它们是sw的实例，但为什么会有两个？为什么570还在等待？我应该做些什么来确保它将被注册-安装-激活？
3- 一般性问题
- 什么结束了正常生命周期中的install事件？
- 什么触发了正常生命周期中的activate事件？
index.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)
})
);
});
谢谢！