构建一个 Service Worker 应用的步骤
- 注册 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);
});
}
});
- 在 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)。