关于 Service Worker 概念的例子,请参考我之前的这篇文章。本文是实战。
本地新建一个 html 文件,该文件里加载一个 Service worker 的实现:该 HTML 加载的 Service Worker 实现,位于 sw.js 文件内:
// @ts-nocheck var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/purehtml/serviceworker.html' ]; self.addEventListener('install', function(event) { // Perform install steps // @ts-ignore event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { console.log('Cache hit: ', response); return response; } return fetch(event.request).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream // and because we want the browser to consume the response // as well as the cache consuming the response, we need // to clone it so we have two streams. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });
一定要把该 html 和 JavaScript,发布到 web server 上运行(比如使用 Node.js 的 express 框架)。
如果本地直接打开 HTML,会遇到错误:ServiceWorker registration failed:TypeError:failed to register a ServiceWorker:The URL protocol of the current origin(‘null’) is not supported.ServiceWorker registration successful with scope:
刷新之后,可以看到该应用的 Cache Storage 里,已经显示了两条缓存数据:看到了处于 active 状态的 Service Worker:
如果一个网页是通过 Service Worker 返回的,在 Chrome 开发者工具里能看到对应的图标: