作為 PWA 的象征之一，我們首先做的，就是加上 Service Worker。
我們的項目是使用 ejs 在 webpack 階段注入幾個變量生成最后的 index.html 的，所以直接拿 index.ejs 動刀即可：
<body> <div id="container"></div> <script src="<%= bundle %>"></script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js', { scope: './' }).then(function(registration) { registration.onupdatefound = function() { if (navigator.serviceWorker.controller) { const installingWorker = registration.installing; installingWorker.onstatechange = function() { switch (installingWorker.state) { case 'installed': break; case 'redundant': throw new Error('The installing ' + 'service worker became redundant.'); default: // Ignore } }; } }; }).catch(function(e) { console.error('Error during service worker registration:', e); }); } else { console.log('service worker is not supported'); } </script>即 body 中，第二個 script 標簽的內容，其參數 service-worker.js，是與 index.html 在同一個目錄的空文件：
// This file is intentionally without code.// It's PResent so that service worker registration// will work when serving from the 'public' directory.實際上打包后會生成真正的 service-worker.js，所以現在只是用來占個位子。
納尼？這樣就好了？
確實，這樣，我們就已經完成了注冊，這也是 PWA 和微信小程序這種二流方案不同的地方，其更注重于如何提高現有設計實現下的體驗，使用開放的標準并進行推進。
下一步就是增加我們的緩存策略了，我們需要安裝 2 個小工具：
npm install sw-precache --savenpm install sw-toolbox --save然后在 package.json 里面更新一下我們的 script：
"scripts": { "build": "npm run copy && node run build && npm run precache", "build:debug": "npm run copy && node run build --debug && npm run precache", "copy": "cp node_modules/sw-toolbox/sw-toolbox.js public/sw-toolbox.js", "precache": "./node_modules/sw-precache/cli.js --root=public --config=sw-precache-config.json"}如上，增加 copy 和 precache 任務，并更新 build，在 build 前后插入新的 task。
然后就是配置文件了，在項目目錄下，增加 sw-precache-config.json 文件：
在 public 目錄下，增加 runtime-caching.js 文件：
運行一下 npm run build，發現 service-worker.js 被更新了，里面是生成的策略腳本。
再次運行 Lighthouse 后，發現我們的評分已經嗖嗖嗖上去了：
這里的秘密就在 runtime-caching.js 文件里，我們更新一下：
// global.toolbox is defined in a different script, sw-toolbox.js, which is part of the// https://github.com/GoogleChrome/sw-toolbox project.// That sw-toolbox.js script must be executed first, so it needs to be listed before this in the// importScripts() call that the parent service worker makes.(function (global) { // See https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options // and https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxfastest // for more details on how this handler is defined and what the toolbox.fastest strategy does. global.toolbox.router.get('/(.*)', global.toolbox.fastest, { origin: //.(?:googleapis|gstatic|firebaseio|appspot)/.com$/, }); global.toolbox.router.get('/(.+)', global.toolbox.fastest, { origin: 'https://api.pai.bigins.cn/', }); global.toolbox.router.get('/(.+)', global.toolbox.fastest, { origin: 'https://qa.api.pai.bigins.cn/', }); global.toolbox.router.get('/(.+)', global.toolbox.fastest, { origin: 'https://pai.bigins.cn/', }); global.toolbox.router.get('/*', global.toolbox.fastest); global.toolbox.precache(['/index.html', '/index.css', '/img/logo.png']);}(self));然后再提交構建一下，在 Chrome 的 Network Panel 中，勾選 Offline，然后刷新頁面，哇，依然可以用誒。
通過完善 Service Worker，我們的評分已經嗖嗖嗖上了80，達到了83分。
剩下的就是一些比較棘手的性能和體驗問題了，我們下回見。
新聞熱點
疑難解答
