10分钟带你初步了解 Service Worker

news2024/11/28 10:35:53

是什么？

服务器与浏览器的中介
持久的浏览器离线缓存

有什么用？

解放主线程，节省资源加载，提高浏览体验

其他描述

基于web worker，并在其基础上，增加了离线缓存的功能
独立于当前网页线程（后台线程）
在网页发起请求进行代理，缓存文件（网络代理）
必须是https的协议
被install后，就永远存在，除非手动卸载

生命周期

在这里插入图片描述

具体展现

在Application，能看到该页面是否激活sw
在这里插入图片描述

也可以在NetWork，查看具体的接口文件，是否缓存于sw
在这里插入图片描述

也可以在Application的Cache Storage中查看缓存的具体内容：
在这里插入图片描述

基本使用

1. 注册

通知浏览器分配一块内存

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
    .register('./serviceworker.js')
    .then((reg) => {
      console.log('ServiceWorker register success: ', reg)
    }).catch((err) => {
      console.log('ServiceWorker register failed: ', err)
    })
}

sw拥有作用域，会监听该作用域下面代理的代所有请求，
例如我只能想要监听my文件夹，就在注册时指定路径：

 navigator.serviceWorker.register('./home/serviceworker.js')

2. 安装

注册后，浏览器就会安装sw，我们可以通过事件监听

// 资源属性
var CACHE_PREFIX = 'cms-sw-cache';
var CACHE_VERSION = '0.0.20';
var CACHE_NAME = CACHE_PREFIX+'-'+CACHE_VERSION;
var ALL_ASSETS = ['./main.css'];

self.addEventListener('install', (event) => {
  //用来强制更新的servicework跳过等待时间
  self.skipWaiting() 
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
       return cache.addAll(ALL_ASSETS)
    })
  )
})

3. 激活

self.addEventListener('activate', (event) => {
  var cacheWhitelist = [CACHE_NAME]
  // 保证 激活之后能够马上作用于所有的终端
  self.clients.claim() 
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
        if (cacheWhitelist.indexOf(cacheName) === -1) {
          return caches.delete(cacheName)
        }
       })
      )
    })
   )
})

在激活sw时需要删除之前的缓存，可将需要的缓存放在有个白名单中
然后通过caches.keys()拿到所有缓存，将不再白名单中的缓存删掉。

4. 拦截网络请求

  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) 
          return response;
        return fetch(event.request);
       })
     );
   });

5. 卸载

navigator.serviceWorker.getRegistrations().then(function (registrations) {
    for (let registration of registrations) {
      //安装在网页的service worker不止一个，找到我们的那个并删除
      if (registration && registration.scope === 'http://localhost:8080/') {
        registration.unregister()
      }
    }
  })