Service worker

Service worker(sw) 是一种在浏览器中运行的 JavaScript 脚本的能力，有着独立于网页的运行环境

使用方式

我们一般会将这种脚步命名为 sw.js, 它需要在目标前端网页中注册，作为一种辅助线程提高前端网页的体验

<script>
// 浏览器支持
if ('serviceWorker' in navigator) {
    const registration = await navigator.serviceWorker.register('/sw.js')
}
</script>

特性

一些特性

拦截请求

在 sw.js 中，可以通过监听 fetch 事件，拦截到当前网页的请求事件，这意味着我们可以利用 sw 实现请求的 Mock 功能，可以用来写单元测试。例如：使用 mswjs/msw 这个库

self.addEventListener('fetch', function(event) {

});

缓存能力

浏览器还会给 sw 分配50M左右的储存空间，这意味着它有了缓存资源的能力。而且由于是本地缓存，缓存了资源后，某些情况不联网也能够访问网站

// 网页安装 sw 的时候，偷偷请求资源并缓存下来
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache-name').then(function(cache) {
      return cache.addAll([
        '/path/to/resource1',
        '/path/to/resource2',
      ]);
    })
  );
});
//当前网页请求资源的时候，直接返回刚刚缓存的资源
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

TIP

从上面的特性看来，sw 就相当于一个小型的服务器，可以响应当前网页的请求，并且有一定的缓存能力，充当着前端网页和远程服务器的中间代理服务器

限制

考虑到安全性，Service Worker 必须运行在 HTTPS 的网站

在开发环境，处于localhost 的时候，没有这种限制

workbox

由于直接写原生的 sw.js，比较繁琐和复杂，所以一些工具就出现了，而 Workbox 是其中的佼佼者，由 Google 团队推出

文档链接：workbox