使用 Service Worker 做一个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原文出处： 人人网FED博客   

在上一篇《我是怎样让网站用上HTML5 Manifest》介绍了怎么用Manifest做一个离线网页应用，结果被广大网友吐槽说这个东西已经被deprecated，移出web标准了，现在被Service Worker替代了，不管怎么样，Manifest的一些思想还是可以借用的。笔者又将网站升级到了Service Worker，如果是用Chrome等浏览器就用Service Worker做离线缓存，如果是Safari浏览器就还是用Manifest，读者可以打开这个网站感受一下，断网也是能正常打开。

渐进式Web应用（PWA）入门教程（下）

2018/05/25 · 基础技术 · PWA

原文出处： Craig Buckler   译文出处：葡萄城控件   

上篇文章我们对渐进式Web应用（PWA）做了一些基本的介绍。

渐进式Web应用（PWA）入门教程（上）

在这一节中，我们将介绍PWA的原理是什么，它是如何开始工作的。

1. 什么是Service Worker

Service Worker是谷歌发起的实现PWA（Progressive Web App）的一个关键角色，PWA是为了解决传统Web APP的缺点：

（1）没有桌面入口

（2）无法离线使用

（3）没有Push推送

那Service Worker的具体表现是怎么样的呢？如下图所示：

Service Worker是在后台启动的一条服务Worker线程，上图我开了两个标签页，所以显示了两个Client，但是不管开多少个页面都只有一个Worker在负责管理。这个Worker的工作是把一些资源缓存起来，然后拦截页面的请求，先看下缓存库里有没有，如果有的话就从缓存里取，响应200，反之没有的话就走正常的请求。具体来说，Service Worker结合Web App Manifest能完成以下工作（这也是PWA的检测标准）：

包括能够离线使用、断网时返回200、能提示用户把网站添加一个图标到桌面上等。

第一步：使用HTTPS

渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可以让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。

由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址，所以在本示例中您并不需要开启HTTPS。另外，出于调试目的，您可以在启动Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查：

• –user-data-dir
• –unsafety-treat-insecure-origin-as-secure

2. Service Worker的支持情况

Service Worker目前只有Chrome/Firfox/Opera支持：

Safari和Edge也在准备支持Service Worker，由于Service Worker是谷歌主导的一项标准，对于生态比较封闭的Safari来说也是迫于形势开始准备支持了，在Safari TP版本，可以看到：

在实验功能（Experimental Features）里已经有Service Worker的菜单项了，只是即使打开也是不能用，会提示你还没有实现：

但不管如何，至少说明Safari已经准备支持Service Worker了。另外还可以看到在今年2017年9月发布的Safari 11.0.1版本已经支持WebRTC了，所以Safari还是一个上进的孩子。

Edge也准备支持，所以Service Worker的前景十分光明。

第二步：创建一个应用程序清单（Manifest）

应用程序清单提供了和当前渐进式Web应用的相关信息，如：

• 应用程序名
• 描述
• 所有图片（包括主屏幕图标，启动屏幕页面和用的图片或者网页上用的图片）

本质上讲，程序清单是页面上用到的图标和主题等资源的元数据。

程序清单是一个位于您应用根目录的JSON文件。该JSON文件返回时必须添加Content-Type: application/manifest+json 或者 Content-Type: application/jsonHTTP头信息。程序清单的文件名不限，在本文的示例代码中为manifest.json：

{ "name" : "PWA Website", "short_name" : "PWA", "description" : "An example PWA website", "start_url" : "/", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/images/logo/logo072.png", "sizes" : "72x72", "type" : "image/png" }, { "src" : "/images/logo/logo152.png", "sizes" : "152x152", "type" : "image/png" }, { "src" : "/images/logo/logo192.png", "sizes" : "192x192", "type" : "image/png" }, { "src" : "/images/logo/logo256.png", "sizes" : "256x256", "type" : "image/png" }, { "src" : "/images/logo/logo512.png", "sizes" : "512x512", "type" : "image/png" } ] }

程序清单文件建立完之后，你需要在每个页面上引用该文件：

<link rel="manifest" href="/manifest.json">

以下属性在程序清单中经常使用，介绍说明如下：

• name: 用户看到的应用名称
• short_name: 应用短名称。当显示应用名称的地方不够时，将使用该名称。
• description: 应用描述。
• start_url: 应用起始路径，相对路径，默认为/。
• scope: URL范围。比如：如果您将“/app/”设置为URL范围时，这个应用就会一直在这个目录中。
• background_color: 欢迎页面的背景颜色和浏览器的背景颜色（可选）
• theme_color: 应用的主题颜色，一般都会和背景颜色一样。这个设置决定了应用如何显示。
• orientation: 优先旋转方向，可选的值有：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
• display: 显示方式——fullscreen（无Chrome），standalone（和原生应用一样），minimal-ui（最小的一套UI控件集）或者browser（最古老的使用浏览器标签显示）
• icons: 一个包含所有图片的数组。该数组中每个元素包含了图片的URL，大小和类型。

3. 使用Service Worker

Service Worker的使用套路是先注册一个Worker，然后后台就会启动一条线程，可以在这条线程启动的时候去加载一些资源缓存起来，然后监听fetch事件，在这个事件里拦截页面的请求，先看下缓存里有没有，如果有直接返回，否则正常加载。或者是一开始不缓存，每个资源请求后再拷贝一份缓存起来，然后下一次请求的时候缓存里就有了。

第三步：创建一个 Service Worker

Service Worker 是一个可编程的服务器代理，它可以拦截或者响应网络请求。Service Worker 是位于应用程序根目录的一个个的JavaScript文件。

您需要在页面对应的JavaScript文件中注册该ServiceWorker：

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

如果您不需要离线的相关功能，您可以只创建一个 /service-worker.js文件，这样用户就可以直接安装您的Web应用了！

Service Worker这个概念可能比较难懂，它其实是一个工作在其他线程中的标准的Worker，它不可以访问页面上的DOM元素，没有页面上的API，但是可以拦截所有页面上的网络请求，包括页面导航，请求资源，Ajax请求。

上面就是使用全站HTTPS的主要原因了。假设您没有在您的网站中使用HTTPS，一个第三方的脚本就可以从其他的域名注入他自己的ServiceWorker，然后篡改所有的请求——这无疑是非常危险的。

Service Worker 会响应三个事件：install，activate和fetch。

（1）注册一个Service Worker

Service Worker对象是在window.navigator里面，如下代码：

JavaScript

window.addEventListener("load", function() { console.log("Will the service worker register?"); navigator.serviceWorker.register('/sw-3.js') .then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened: ", err) }); });

在页面load完之后注册，注册的时候传一个js文件给它，这个js文件就是Service Worker的运行环境，如果不能成功注册的话就会抛异常，如Safari TP虽然有这个对象，但是会抛异常无法使用，就可以在catch里面处理。这里有个问题是为什么需要在load事件启动呢？因为你要额外启动一个线程，启动之后你可能还会让它去加载资源，这些都是需要占用CPU和带宽的，我们应该保证页面能正常加载完，然后再启动我们的后台线程，不能与正常的页面加载产生竞争，这个在低端移动设备意义比较大。

还有一点需要注意的是Service Worker和Cookie一样是有Path路径的概念的，如果你设定一个cookie假设叫time的path=/page/A，在/page/B这个页面是不能够获取到这个cookie的，如果设置cookie的path为根目录/，则所有页面都能获取到。类似地，如果注册的时候使用的js路径为/page/sw.js，那么这个Service Worker只能管理/page路径下的页面和资源，而不能够处理/api路径下的，所以一般把Service Worker注册到顶级目录，如上面代码的”/sw-3.js”，这样这个Service Worker就能接管页面的所有资源了。

Install事件

该事件将在应用安装完成后触发。我们一般在这里使用Cache API缓存一些必要的文件。

首先，我们需要提供如下配置

1. 缓存名称（CACHE）以及版本（version）。应用可以有多个缓存存储，但是在使用时只会使用其中一个缓存存储。每当缓存存储有变化时，新的版本号将会指定到缓存存储中。新的缓存存储将会作为当前的缓存存储，之前的缓存存储将会被作废。
2. 一个离线的页面地址（offlineURL）：当用户访问了之前没有访问过的地址时，该页面将会显示。
3. 一个包含了所有必须文件的数组，包括保障页面正常功能的CSS和JavaScript。在本示例中，我还添加了主页和logo。当有不同的URL指向同一个资源时，你也可以将这些URL分别写到这个数组中。offlineURL将会加入到这个数组中。
4. 我们也可以将一些非必要的缓存文件（installFilesDesirable）。这些文件在安装过程中将会被下载，但如果下载失败，不会触发安装失败。

// 配置文件 const version = '1.0.0', CACHE = version + '::PWAsite', offlineURL = '/offline/', installFilesEssential = [ '/', '/manifest.json', '/css/styles.css', '/js/main.js', '/js/offlinepage.js', '/images/logo/logo152.png' ].concat(offlineURL), installFilesDesirable = [ '/favicon.ico', '/images/logo/logo016.png', '/images/hero/power-pv.jpg', '/images/hero/power-lo.jpg', '/images/hero/power-hi.jpg' ];

installStaticFiles() 方法使用基于Promise的方式使用Cache API将文件存储到缓存中。

// 安装静态资源 function installStaticFiles() { return caches.open(CACHE) .then(cache => { // 缓存可选文件 cache.addAll(installFilesDesirable); // 缓存必须文件 return cache.addAll(installFilesEssential); }); }

最后，我们添加一个install的事件监听器。waitUntil方法保证了service worker不会安装直到其相关的代码被执行。这里它会执行installStaticFiles()方法，然后self.skipWaiting()方法来激活service worker：

// 应用安装 self.addEventListener('install', event => { console.log('service worker: install'); // 缓存主要文件 event.waitUntil( installStaticFiles() .then(() => self.skipWaiting()) ); });

（2）Service Worker安装和激活

注册完之后，Service Worker就会进行安装，这个时候会触发install事件，在install事件里面可以缓存一些资源，如下sw-3.js：

JavaScript

const CACHE_NAME = "fed-cache"; this.addEventListener("install", function(event) { this.skipWaiting(); console.log("install service worker"); // 创建和打开一个缓存库 caches.open(CACHE_NAME); // 首页 let cacheResources = ["]; event.waitUntil( // 请求资源并添加到缓存里面去 caches.open(CACHE_NAME).then(cache => { cache.addAll(cacheResources); }) ); });

通过上面的操作，创建和添加了一个缓存库叫fed-cache，如下Chrome控制台所示：

Service Worker的API基本上都是返回Promise对象避免堵塞，所以要用Promise的写法。上面在安装Service Worker的时候就把首页的请求给缓存起来了。在Service Worker的运行环境里面它有一个caches的全局对象，这个是缓存的入口，还有一个常用的clients的全局对象，一个client对应一个标签页。

在Service Worker里面可以使用fetch等API，它和DOM是隔离的，没有windows/document对象，无法直接操作DOM，无法直接和页面交互，在Service Worker里面无法得知当前页面打开了、当前页面的url是什么，因为一个Service Worker管理当前打开的几个标签页，可以通过clients知道所有页面的url。还有可以通过postMessage的方式和主页面互相传递消息和数据，进而做些控制。

install完之后，就会触发Service Worker的active事件：

JavaScript

this.addEventListener("active", function(event) { console.log("service worker is active"); });

Service Worker激活之后就能够监听fetch事件了，我们希望每获取一个资源就把它缓存起来，就不用像上一篇提到的Manifest需要先生成一个列表。

你可能会问，当我刷新页面的时候不是又重新注册安装和激活了一个Service Worker？虽然又调了一次注册，但并不会重新注册，它发现”sw-3.js”这个已经注册了，就不会再注册了，进而不会触发install和active事件，因为当前Service Worker已经是active状态了。当需要更新Service Worker时，如变成”sw-4.js”，或者改变sw-3.js的文本内容，就会重新注册，新的Service Worker会先install然后进入waiting状态，等到重启浏览器时，老的Service Worker就会被替换掉，新的Service Worker进入active状态，如果不想等到重新启动浏览器可以像上面一样在install里面调skipWaiting：

JavaScript

this.skipWaiting();

Activate 事件

这个事件会在service worker被激活时发生。你可能不需要这个事件，但是在示例代码中，我们在该事件发生时将老的缓存全部清理掉了：

// clear old caches function clearOldCaches() { return caches.keys() .then(keylist => { return Promise.all( keylist .filter(key => key !== CACHE) .map(key => caches.delete(key)) ); }); } // application activated self.addEventListener('activate', event => { console.log('service worker: activate'); // delete old caches event.waitUntil( clearOldCaches() .then(() => self.clients.claim()) ); });

注意self.clients.claim()执行时将会把当前service worker作为被激活的worker。

Fetch 事件 该事件将会在网络开始请求时发起。该事件处理函数中，我们可以使用respondWith()方法来劫持HTTP的GET请求然后返回：

1. 从缓存中取到的资源文件
2. 如果第一步失败，资源文件将会从网络中使用Fetch API来获取（和service worker中的fetch事件无关）。获取到的资源将会加入到缓存中。
3. 如果第一步和第二步均失败，将会从缓存中返回正确的资源文件。

// application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return; let url = event.request.url; event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url); return response; } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url); if (newreq.ok) cache.put(event.request, newreq.clone()); return newreq; }) // app is offline .catch(() => offlineAsset(url)); }); }) ); });

offlineAsset(url)方法中使用了一些helper方法来返回正确的数据：

// 是否为图片地址? let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f); function isImage(url) { return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false); } // return 返回离线资源 function offlineAsset(url) { if (isImage(url)) { // 返回图片 return new Response( '<svg role="img" viewBox="0 0 400 300" xmlns=" d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>', { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' }} ); } else { // return page return caches.match(offlineURL); } }

offlineAsset()方法检查请求是否为一个图片，然后返回一个带有“offline”文字的SVG文件。其他请求将会返回 offlineURL 页面。

Chrome开发者工具中的ServiceWorker部分提供了关于当前页面worker的信息。其中会显示worker中发生的错误，还可以强制刷新，也可以让浏览器进入离线模式。

Cache Storage 部分例举了当前所有已经缓存的资源。你可以在缓存需要更新的时候点击refresh按钮。

（3）fetch资源后cache起来

如下代码，监听fetch事件做些处理：

JavaScript

this.addEventListener("fetch", function(event) { event.respondWith( caches.match(event.request).then(response => { // cache hit if (response) { return response; } return util.fetchPut(event.request.clone()); }) ); });

先调caches.match看一下缓存里面是否有了，如果有直接返回缓存里的response，否则的话正常请求资源并把它放到cache里面。放在缓存里资源的key值是Request对象，在match的时候，需要请求的url和header都一致才是相同的资源，可以设定第二个参数ignoreVary：

JavaScript

caches.match(event.request, {ignoreVary: true})

表示只要请求url相同就认为是同一个资源。

上面代码的util.fetchPut是这样实现的：

JavaScript

let util = { fetchPut: function (request, callback) { return fetch(request).then(response => { // 跨域的资源直接return if (!response || response.status !== 200 || response.type !== "basic") { return response; } util.putCache(request, response.clone()); typeof callback === "function" && callback(); return response; }); }, putCache: function (request, resource) { // 后台不要缓存，preview链接也不要缓存 if (request.method === "GET" && request.url.indexOf("wp-admin") < 0 && request.url.indexOf("preview_id") < 0) { caches.open(CACHE_NAME).then(cache => { cache.put(request, resource); }); } } };

需要注意的是跨域的资源不能缓存，response.status会返回0，如果跨域的资源支持CORS，那么可以把request的mod改成cors。如果请求失败了，如404或者是超时之类的，那么也直接返回response让主页面处理，否则的话说明加载成功，把这个response克隆一个放到cache里面，然后再返回response给主页面线程。注意能放缓存里的资源一般只能是GET，通过POST获取的是不能缓存的，所以要做个判断（当然你也可以手动把request对象的method改成get），还有把一些个人不希望缓存的资源也做个判断。

这样一旦用户打开过一次页面，Service Worker就安装好了，他刷新页面或者打开第二个页面的时候就能够把请求的资源一一做缓存，包括图片、CSS、JS等，只要缓存里有了不管用户在线或者离线都能够正常访问。这样我们自然会有一个问题，这个缓存空间到底有多大？上一篇我们提到Manifest也算是本地存储，PC端的Chrome是5Mb，其实这个说法在新版本的Chrome已经不准确了，在Chrome 61版本可以看到本地存储的空间和使用情况：

其中Cache Storage是指Service Worker和Manifest占用的空间大小和，上图可以看到总的空间大小是20GB，几乎是unlimited，所以基本上不用担心缓存会不够用。

第四步：创建可用的离线页面

离线页面可以是静态的HTML，一般用于提醒用户当前请求的页面暂时无法使用。然而，我们可以提供一些可以阅读的页面链接。

Cache API可以在main.js中使用。然而，该API使用Promise，在不支持Promise的浏览器中会失败，所有的JavaScript执行会因此受到影响。为了避免这种情况，在访问/js/offlinepage.js的时候我们添加了一段代码来检查当前是否在离线环境中：

/js/offlinepage.js 中以版本号为名称保存了最近的缓存，获取所有URL，删除不是页面的URL，将这些URL排序然后将所有缓存的URL展示在页面上：

// cache name const CACHE = '::PWAsite', offlineURL = '/offline/', list = document.getElementById('cachedpagelist'); // fetch all caches window.caches.keys() .then(cacheList => { // find caches by and order by most recent cacheList = cacheList .filter(cName => cName.includes(CACHE)) .sort((a, b) => a - b); // open first cache caches.open(cacheList[0]) .then(cache => { // fetch cached pages cache.keys() .then(reqList => { let frag = document.createDocumentFragment(); reqList .map(req => req.url) .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL)) .sort() .forEach(req => { let li = document.createElement('li'), a = li.appendChild(document.createElement('a')); a.setAttribute('href', req); a.textContent = a.pathname; frag.appendChild(li); }); if (list) list.appendChild(frag); }); }) });