ServiceWorker

什么是ServiceWorker

ServiceWorkerH5的新API,是一段运行在浏览器后台的JavaScript脚本,独立于当前页面,因此不能和网页交互,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请求。

ServiceWorker生命周期

  • 安装
  • 激活,激活成功后可进入chrome://inspect/#service-workers查看当前的serviceworker,这个阶段对资源进行缓存
  • 监听,处理请求,若请求的资源被缓存过直接使用,否则向用户展示缓存的404页面。
  • 销毁

    • 只支持https协议或者localhost
    • 生命周期独立于web页面

一般断网后,页面会直接出现无法访问网站这样的提示,用chrome -> 开发者工具 -> New Work -> offline 可模拟断网,

ServiceWorker生命周期中的重要事件

install

页面加载时触发,此过程完成后,资源将被缓存

fetch

  • fetch用于拦截用户请求,并响应,返回Promise对象
  • 提供RequestResponse对象,前端可以用Request对象发起请求,在serviceworker中可用Response对象响应请求。

关键代码解析:

if ('serviceWorker' in navigator) {//serviceworker是navigator上面的属性
        navigator.serviceWorker.register('./service-worker.js').then(function(registration) {//注册serviceworker,service-worker.js和HTML页面在同级目录下,serviceworker大量依赖于promise,这里添加resolve或reject回调
        //resolve, 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        // reject,注册失败
        console.log('ServiceWorker registration failed: ', err);
       });
    }

下面便是缓存资源和离线响应资源的代码:

'use strict';

var cacheVersion = 0;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline.html';

this.addEventListener('install', event => {//开始安装serviceworker

  event.waitUntil(//caches.open打开的是一个自己命名的缓存名称

    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([//这里便是待缓存的资源
          './offline.svg',
          offlineUrl
      ]);
    })
  );
});//只有当所有资源都被缓存成功后install才算完成,因此要慎重考虑哪些资源应该被缓存

this.addEventListener('fetch', event => {
//fetch事件在安装成功后,离线请求时响应,在线时,若请求的资源再serviceworker中,则走200 OK (from ServiceWorker),离线时也是这个状态码

  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
        })
     );
  }
  else{
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

具体请点击这里

双向通信

浏览器有3中worker:

  • dedicated worker:专用worker
  • shared worker:共享worker
  • service worker

他们都可以通过postmessageonmessage进行通信

特点

serviceworker相比于XMLHTTPRequest请求优势:

  • 返回promise对象,减少回调嵌套。
  • 可利用Request和Response对象,响应用户请求
    serviceworker的存储是异步的,localStorage和sessionStorage的存储是同步的。
    获取更多serviceworker内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值