技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
Service Worker 脚本通过 navigator.serviceWorker.register
方法注册到页面,之后可以脱离页面在浏览器后台运行:
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('service worker 注册成功');
})
.catch(function (err) {
console.log('servcie worker 注册失败');
});
}
出于安全原因, Service Worker 脚本的作用范围不能超出脚本文件所在的路径。比如地址是 /sw-test/sw.js
的脚本只能控制 /sw-test/
下的页面。
Service Worker 从注册开始需要先 install
, 如果 install
成功, 接下来需要 activate
, 然后才能接管页面。但是如果页面被先前的 Service Worker 控制着, 那么它会停留在 installed(waiting)
这个阶段等到页面重新打开才会接管页面, 或者可以通过调用 self.skipWaiting()
方法跳过等待。所以一个 Service Worker 脚本的生命周期有这样一些阶段(从左往右):