使用 ServiceWorker 缓存 WebApp-阿里云开发者社区

使用 ServiceWorker 缓存 WebApp

2023-04-26 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ServiceWorker 也是一种 worker，他的功能偏向代理或者缓存，应该算是功能最强大的一类 worker 了，PWA的实现就离不开ServiceWorker。

ServiceWorker 也是一种 worker，他的功能偏向代理或者缓存，应该算是功能最强大的一类 worker 了，PWA的实现就离不开ServiceWorker。

ServiceWorker API 大部分浏览器都已经支持了，可以看到 Can I Use 网站给出的数据如下

1682520411(1).png

注册

在使用ServiceWorker之前要先对其进行注册，通过 navigator.serviceWorker.register 来注册一个ServiceWorker

if ('serviceWorker' in navigator) {
  // 当浏览器支持ServiceWorker时才进行注册
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
复制代码

多个页面共用一个ServiceWorker，但一个页面只能使用一个ServiceWorker，同样的ServiceWorker也要遵循同源和 HTTPS的约束。某种角度来说ServiceWorker可以完成 SharedWorker 能做的事情，but 有点大材小用。

注册方法返回一个 Promise 对象，注册成功的状态是 resolved 失败则为 rejected，按理来说一般不会失败。

ServiceWorker的生效范围是注册路径的上一级路径，比如引入的ServiceWorker路径为/app/sw.js，那么就会对/app下的页面生效，而在/dev等目录下则不会生效。

此时如果想要对其他作用域生效，可以显式地指定作用域

navigator.serviceWorker.register(
  '/app/service-worker.js',
  { scope: '/' }
)
复制代码

这样就可以在根目录下的所有页面生效。

通信

ServiceWorker 和主进程之间的通信也是基于事件驱动的，ServiceWorker支持了以下事件

1682520450(1).png

生命周期

其中 install 和 activate 是受生命周期控制的，分别会在安装和激活时触发，message 则会在接收到主进程的 message 时触发；右边 3 个时间是功能性事件，从左到右分别会在请求、后台同步、推送通知时触发。

如果新版本的 ServiceWorker 出现报错，会继续使用旧版文件

生命周期：

installing：正在安装，此时会触发 install 事件

↓ 当 event.waitUntil 执行完成进入 installed；调用 self.skipWaiting 时可以跳过等待直接接管网页

installed：完成安装，此时并不会正常工作，而是进入 waiting 状态

↓ 等页面刷新之后激活

activating：正在激活，此时触发 activate 事件，可以通过调用self.clients.claim来控制未受控的客户端

↓ 当 event.waitUntil 执行完成进入 activated

activated：激活完成，此时可以正常监听功能性事件

↓

redundant：被替换

install：ServiceWorker安装时触发，通常在这个时机缓存文件。
activate：ServiceWorker激活时触发，通常在这个时机做一些重置的操作，例如处理旧版本ServiceWorker的缓存。

1682520478(1).png

例如在 install 事件缓存文件

self.addEventListener('install', (e) => {
  let CACHE_NAME = 'app-1'
  let urls = ['/', '/index.js', '/style.css']
  e.waitUntil(
    caches.open(CACHE_NAME).
      then(cache => cache.addAll(urls))
  )
})
复制代码

在 activate 事件清理无用的缓存

self.addEventListener('activate', (e) => {
  let cacheWhitelist = ['v2']; // 新版本文件白名单
  e.waitUntil(
    Promise.all([
      self.clients.claim(),
      caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (cacheWhitelist.indexOf(key) === -1) {
            return caches.delete(key);
          }
        }));
      }])
  );
})
复制代码

在 ServiceWorker 和主进程之间互发消息和之前的 worker 不一样，我们需要通过 navigator.serviceWorker.controller获取ServiceWorker实例，然后调用 postMessage 发送消息

主进程向 worker 发送(install完成之前 controller 获取不到，所以可以用另一种方式来发送)

// client
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
      // navigator.serviceWorker.controller.postMessage('msg from client')
      let serviceWorker
      if (registration.installing) {
        serviceWorker = registration.installing;
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
      } else if (registration.active) {
        serviceWorker = registration.active;
      }
      if (serviceWorker) {
        serviceWorker.postMessage({ data: 'test msg' })
      }
    });
  });
}
// ServiceWorker
self.addEventListener('message', (e) => {
  console.log(e.data);
})
复制代码

如果要从 worker 中向主进程中发送消息则需要借助 MessageChannel来完成

// client
function sendMessage(message) {
  return new Promise((resolve, reject) => {
    let messageChannel = new MessageChannel();
    messageChannel.port1.onmessage = function (event) {
      if (event.data.error) {
        reject(event.data.error);
      } else {
        resolve(event.data);
      }
    };
    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
  });
}
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
      // navigator.serviceWorker.controller.postMessage('msg from client')
      let serviceWorker
      if (registration.installing) {
        serviceWorker = registration.installing;
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
      } else if (registration.active) {
        serviceWorker = registration.active;
      }
      if (serviceWorker) {
        sendMessage({ data: 'msg from client' }).then(data => {
          console.log(data);
        })
      }
    });
  });
}
// ServiceWorker
self.addEventListener('message', (e) => {
  console.log(e.data);
  e.ports[0].postMessage({
    msg: 'received msg',
    source: 'service-worker'
  })
})
复制代码

功能事件

最常用的功能莫过于监听 fetch事件来处理缓存了，主要是通过 fetch 和 cache 的配合来实现缓存或者代理等功能。

📢：fetch 会受 scope 限制，如果 scope 是/assets，则/api下的请求将不会触发 fetch 事件

self.addEventListener('fetch', (fetchEvent) => {
  if (!fetchEvent.request.url.startsWith(fetchEvent.request.referrer)) {
    // 不是本页面发出的请求不进行处理
    return
  }
  fetchEvent.respondWith(
    // 缓存中匹配当前请求
    caches.match(fetchEvent.request)
      .then(res => {
        // 存在缓存直接返回
        if (res) {
          return res
        } else {
          // 否则重新请求并缓存
          return fetch(fetchEvent.request).then((response) => {
            caches.open('app-1')
              .then(cache =>
                cache.put(fetchEvent.request, response)
              );
            return response.clone();
          })
        }
      })
  );
})
复制代码