Service Worker.js - Javascript

简介

Service Worker是运行在Web Worker上下文中的一种WebSocket API。它可以使得在脱机的情况下运行Web应用程序成为可能，同时还可以通过拦截和处理网络请求从而提供离线缓存和其他高级功能。

如何启用

在注册Service Worker前，需要使其支持当前的浏览器。Service Worker可被用于不受支持的版本中，但会自动忽略掉。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('Service Worker successfully registered');
      })
      .catch(function(err) {
        console.error('Failed to register Service Worker', err);
      });
  }

上面的例子检查了浏览器是否支持Service Worker，然后注册了一个名为“sw.js”的文件。注册完成后，通过返回一个Promise来让我们可以获取注册对象registration，它包含了Service Worker的状态信息。

生命周期

Service Worker的生命周期包括以下五个阶段：

1. 加载
2. 安装
3. 激活
4. 运行中
5. 终止

加载

当页面首次加载时，浏览器会尝试检查当前的Service Worker是否支持缓存，如果支持，则通过加载文件使Service Worker启动。

安装

当Service Worker首次加载时，会在文档范围内运行一次install事件。这里可以进行一些初始化的操作，如缓存、获取资源等。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

上面的例子说明，在Service Worker安装完成之后，将cache添加到数组中并依次缓存。

激活

当Service Worker安装成功后，会在文档范围内运行一次activate事件。在这里，你可以对之前初始化的资源做一些处理，如删除过期缓存、更新缓存等。

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(keys.map((key) => {
        if (key !== 'my-cache') {
          return caches.delete(key);
        }
      }));
    })
  );
});

上面的例子说明，在Service Worker激活之后，循环调用缓存项并根据策略删除缓存。

运行中

当Service Worker激活之后，它便可继续监听请求并进行处理。你可以使用fetch事件监听请求并做处理。

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

上面的例子说明，在Service Worker运行期间，针对页面请求实现了对Cache的查找和返回处理。

终止

当Service Worker不再需要处理请求时，它可以通过调用self.skipWaiting()方法释放控制权，从而将客户端交给另一个Service Worker。

离线缓存

Service Worker最常见的应用之一就是离线缓存。为了实现离线缓存，你可以在Service Worker安装并激活时通过Cache API缓存资源。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

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

上面的例子说明在Service Worker安装并激活时将资源存储到缓存中，并在fetch响应时从缓存中取数据。如果响应内容在缓存中找不到，则通过Fetch API再次获取。

总结

Service Worker为开发者提供了一种跨所有浏览器的缓存方案、后台同步和消息推送服务。它可以改进Web应用程序的性能和用户体验，从而使Web应用程序更好用。但是，需要谨慎使用Service Worker，否则它可能会给用户的设备带来安全隐患或者性能问题。在使用Service Worker之前，开发者需要全面了解Web技术和相关安全问题。