PWA - Service worker生命周期

Service worker是pwa实现的关键,理解service worker,它有什么特征,是如何工作的?

特征

  • 运行在自己的全局脚本上下文中
  • 不绑定到具体的页面
  • 无法修改页面中的元素,因为它无法访问dom
  • 只能使用https

如何工作的

Worker的生命周期

  • 注册
  • 下载,解析和执行
  • 安装
  • 激活

注册

调用register函数, service worker开始下载

下载,解析和执行

在注册过程中, 浏览器会开始下载, 解析并执行service worker,如果在此步骤出现任何的错误,resigter返回的promise都会执行reject操作,并且service worker会被废弃.

安装

一旦service worker成功执行,安装事件就会激活, service worker是基于事件的,意味着我们可以利用这些事件来实现超快速缓存技术。

激活

一旦安装完成,worker就被激活,并控制其范围内的一切,如果生命周期中的所有事件都成功了,worker便准备就绪,随时可以使用。

实例代码

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img{
      width: 300px;
    }
  </style>
</head>
<body>
  <img src="/images/xxx.jpg" alt="">
  <script>
    // 注册service worker.
    registerWorker();

    function registerWorker(){
      // 判断是否支持serviceWorker.
      if('serviceWorker' in navigator){
        navigator.serviceWorker.register('/sw.js').then(
          registration => {
            // 注册成功
            console.log('注册成功,', registration.scope);
          }
        ).catch(err => {
          // 注册失败
          console.log(err);
        })
      }
    }
  </script>
</body>
</html>
复制代码

sw.js文件

// 为fetch事件添加监听器
self.addEventListener('fetch', event => {
  // 拦截.jpg结尾的文件, 获取demo.jpg作为代替图片来响应请求.
  if(/\.jpg$/.test(event.request.url)){
    event.respondWith(fetch('/images/demo.jpg'));
  }
});
复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章