Service Worker 应用

构建一个 Service Worker 应用的步骤

1. 注册 Service Worker

window.addEventListener('load', function(event) {
    if ('serviceWorker' in window.navigator) {
        navigator.serviceWorker.register('sw.js', {scope: '/'})
        .then(function(registeration) {
            console.log(registeration.scope);
        })
        .catch(function(error){
            console.log(error);
        });
    }
});

1. 在 Service Worker 的逻辑。

console.log('hello service worker!');
self.addEventListener('fetch', function(event) {
});

让 Web 应用离线可用

Fetch API

Service Worker 不支持 XMLRequest/ActiveXObject 接口。
Fetch 同时支持 Service Worker 与 Window 环境中使用。

（Fetch API）

几个比较重要的配置项说明：

• method：请求使用的方法，如 GET、POST。
• headers：请求的头信息。
• body：请求的 body 信息。
• mode：请求的模式，如 cors/no-cors/same-origin。
• credentials：是否自动发送 cookies、omit/same-origin/include。

Cache Stroage & Cache API

两个与缓存有关的接口，用于管理当前网页的缓存，可以通过全局变量 caches 来访问 Cache Storage 数据。

需要注意的是，以上的方法都是异步的，返回 Promise。

Service Worker 更新

缓存策略

不同的事物采取不同的策略，静态资源优先从缓存获取，如果获取失败再从网络获取（并保存到缓存）。对于接口数据，优先从网络获取（并保存到缓存），如果失败再从缓存获取。

以上的几种缓存策略是基础的策略，在实际应用中会组合几种策略灵活使用，

注意

避免 HTTP 缓存 Service Worker 文件

设置响应头 cache-control:no-cache。

避免缓存跨域资源

由于更新机制的问题，如果 Service Worker 缓存了错误的结果，将会对 web 应用造成灾难性后果。我们必须小心翼翼的检查网络返回是否准确。一种常见的做法是指缓存满足如下条件的结果:

• 响应为 200，避免缓存 304、404、50x 等常见的结果。
• 响应类型为 basic 或 cors ，只缓存同源或者正确的跨越请求结果，避免缓存错误的响应和不正确的跨越请求响应。
• 注意存储空间，即时清理缓存。

以上介绍的方法和实现都有现成的解决方案，你完全不需要手动修改代码。只需要配置即可
（workebox | lavas）。