推荐阅读:Service Worker 简介
基本使用:
1. 注册
<!-- /report/index.html 片段 --> <script> if (navigator.serviceWorker) { navigator.serviceWorker.register('./sw.js').then(res => { console.log('注册成功'); // serviceWorker 是有作用域的,这里作用域是/report,如果是其他路径(例如/alarm)用到这个serviceWorker,它也不会工作。但是/report/**/* 都是可以生效的 console.log('作用域是:' + res.scope); }).catch(e => { console.log('注册失败'); }) } </script>
2. 安装
// /report/sw.js 片段 const CACHE_NAME = 'my-cache'; const cacheList = ['./index.html'] this.addEventListener('install', ev => { // waitUntil 传入 Promise,判断安装时间和成功与否 ev.waitUntil( // 如果有则打开,不存在则创建这个 'my-cache' 缓存空间 caches.open(CACHE_NAME).then(myCache => { // 往缓存里面存文件 // return 出去形成 Promise 链,否则,caches.open 成功后, waitUntil 就以为已经安装成功了 return myCache.addAll(cacheList); }) ) })
3. 拦截请求并缓存
// /report/sw.js 片段 const CACHE_NAME = 'my-cache'; //.... this. addEventListener('fetch', ev => { // respondWith 传入一个 Promise,作为返回给页面的响应 ev.respondWith( // 在所有缓存里面找是否有e.request的缓存 caches.match(ev.request).then(res => { if (res) { return res; } return fetch(ev.request).then(res => { // 缓存新请求 return res; }) }) ) })