最前端

技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。

vuePress-theme-reco jimco    2014 - 2025
最前端 最前端
首页
索引
  • 分类
  • 标签
  • 归档
收藏
  • 网站
  • 资源
  • 文章
  • 书单
知识库
  • 前端

    • JS
    • CSS
    • HTML
  • 计算机通识

    • 网络
实验室
  • 手册

    • CSS3 参考手册 (opens new window)
    • HTML 参考手册 (opens new window)
    • NodeJS 参考手册 (opens new window)
    • PHP 参考手册 (opens new window)
  • 工具

    • CSS 格式化 (opens new window)
    • 在线编辑器 (opens new window)
author-avatar

jimco

74 文章
101 标签

首页
索引
  • 分类
  • 标签
  • 归档
收藏
  • 网站
  • 资源
  • 文章
  • 书单
知识库
  • 前端

    • JS
    • CSS
    • HTML
  • 计算机通识

    • 网络
实验室
  • 手册

    • CSS3 参考手册 (opens new window)
    • HTML 参考手册 (opens new window)
    • NodeJS 参考手册 (opens new window)
    • PHP 参考手册 (opens new window)
  • 工具

    • CSS 格式化 (opens new window)
    • 在线编辑器 (opens new window)

serviceWorker Tags

vuePress-theme-reco jimco    2014 - 2025
全部301angulardirectiveserverbigpipebfclayoutdomcssomrenderbrowserslistcoffeescriptnpmnodeshellcssjavascriptpromisecookiesessioncrontabformdesignsambasnippetdockercentos7offsetxbackbonejquerycleanes6generatorjsfrontendgzipuglifyflexhtmlmetahttpcachebrowserhttpswaterflowimagethispatternasyncbitbinarycorsjsonpiframemvvmiifememoryroutereventsortalgorithmoffset-pathsvgcanvasooclassyarneslintprogramsolid程序设计media重定向pwaserviceWorkersetIntervalstandardsslsandboxmicro-apptypescriptvimwebpackfontserifsans-serifsocket.iocometnodejsyeomanubbnginxrewrite数据结构
Service Worker 实践

# Service Worker 的生命周期

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 脚本的生命周期有这样一些阶段(从左往右):

jimco 2017/07/17 pwaserviceWorker
上一页 1 ... 1 ... 1 下一页