<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="container">service worker</div> <script src="./app.js"></script> </body> </html>
main.css
.container{ color: red; }
app.js
// 注册 serviceWorker if (navigator.serviceWorker) { navigator.serviceWorker.register(‘./service-worker.js‘, { scope: ‘./‘ // 作用域 }).then(function (reg) { console.log(reg); }).catch(function (e) { console.log(e); }) } else { alert(‘Service Worker is not supported‘) }
service-worker.js
// 监听 serviceWorker install 事件 self.addEventListener(‘install‘, function(e) { // 会接受一个 promise 对象，返回成功后才会进行后续的运行 e.waitUntil( // caches 就是开启一个 cacheStorage caches.open(‘app-v1‘).then(function(cache){ console.log(‘open cache‘); return cache.addAll([ ‘./app.js‘, ‘./main.css‘, ‘./serviceWorker.html‘ ]) }) ) }) self.addEventListener(‘fetch‘, function(event) { // 读缓存 event.respondWith( caches.match(event.request).then(function(res) { if (res) { return res; } else { // 通过 fetch 方法向网络发起请求 fetch(url).then(function() { if (res) { // 对于新请求到资源存储到我们的 cachestorage中 } else { // 用户提示 } }) } }) ) })
原文：https://www.cnblogs.com/wzndkj/p/12159459.html