使用 workbox 協助構建 PWA 應用

1. 說明

workbox 是 GoogleChrome 團隊推出的一套解決方案，提供站點離線訪問能力，可以更方便、更簡單的解決 Service Workers 絕大多數問題

重要文件版本

• workbox-build ‘3.0.0’

2. workbox 簡單使用

workbox 是協助 Service worker 使用的，與一般的 Service worker 一樣，首先需要在文件中注冊 Service worker

<script> if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('./sw.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});}); } </script>

在注冊的 Service worker 文件 sw.js 中使用 workbox 處理資源的緩存

// sw.js// 引入核心文件 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js' );// 設置緩存名稱前綴 workbox.core.setCacheNameDetails({ prefix: 'gulp-pwa-demo' });/*一下兩個接口對應 service worker 中的self.skipWaiting() 強制等待中的 Service Worker 被激活self.clients.claim() 新的 Service Worker 被激活后使其立即獲得頁面控制權*/workbox.skipWaiting(); workbox.clientsClaim();// 要 precache 預先緩存的文件 self.__precacheManifest = [{url: 'index.html',revision: 'dbd40fec5ea49691d7c6c775192f66f5'},{url: 'scripts/index.js',revision: 'd7968e072cb4b90efcbaf72e94ba00c9'},{url: 'styles/index.css',revision: '9707c6dcc441f4704f5ede55bf2f7d55'} ].concat(self.__precacheManifest || []);workbox.precaching.suppressWarnings();// precacheAndRoute 預緩存靜態文件 workbox.precaching.precacheAndRoute(self.__precacheManifest, {});/*registerRoute 路由請求緩存第一個參數可以是正則、完整路徑字符串、或者是返回布爾值的函數第二個參數 workbox.strategies.networkFirst() 是一個路由緩存策略，用來確定資源緩存方式*/workbox.routing.registerRoute(new RegExp('.*.js'),workbox.strategies.networkFirst() );

路由緩存策略

• staleWhileRevalidate 請求的路由有對應的 cache 緩存就直接返回，同時在后臺再次發起請求并更新 Cache
• networkFirst 請求后，首先嘗試拿到網路請求的返回結果，請求到就直接返回并且更新 cache，否則返回緩存中的內容
• cacheFirst 請求后，直接從 Cache 中取得結果，沒有的話在發起網絡請求
• networkOnly 強制使用網絡請求
• cacheOnly 強制使用 Cache 資源

3. 結合 gulp 使用 workbox

gulp 中使用 workbox 需要引入 workbox-build

sudo yarn add --dev workbox-build

在 gulpfile.js 中配置，全部的 workbox 配置都要寫在 workbox.generateSW(options) 中, workbox-build 工具會根據這個配置生成對應的 Service worker 文件，但是主文件中注冊Service worker 還是需要手動寫的，如果要實現‘添加到主屏幕功能’ 同樣需要自己配置 manifest.json

workbox.generateSW(options) 與 workbox.InjectManifest(options) 方法都是用來生成 Service worker 文件的，區別在于前者不需要模板文件，后者必須配置 swSrc: 'sw.js'指明模板來源，相當于在 模板 Service worker 中插入了 workbox 的代碼

const gulp = require('gulp'); const workbox = require('workbox-build');/*配置 PWA，API 與直接在 sw.js 中寫是有區別的*/gulp.task('generate-service-worker', () => {return workbox.generateSW({cacheId: 'gulp-pwa-demo', // 設置前綴globDirectory: './build', //匹配根目錄globPatterns: ['**/*.{html,js,css,png.jpg}'], // 匹配的文件globIgnores: ['sw.js'], // 忽略的文件swDest: `./build/sw.js`, // 輸出 Service worker 文件clientsClaim: true, // Service Worker 被激活后使其立即獲得頁面控制權skipWaiting: true, // 強制等待中的 Service Worker 被激活runtimeCaching: [// 配置路由請求緩存 對應 workbox.routing.registerRoute{urlPattern: /.*\.js/, // 匹配文件handler: 'networkFirst' // 網絡優先},{urlPattern: /.*\.css/,handler: 'staleWhileRevalidate', // 緩存優先同時后臺更新options: {// 這里可以設置 cacheName 和添加插件plugins: [{cacheableResponse: {statuses: [0, 200]}}]}},{urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif)/,handler: 'cacheFirst', // 緩存優先options: {plugins: [{expiration: {maxAgeSeconds: 24 * 60 * 60, // 最長緩存時間,maxEntries: 50 // 最大緩存圖片數量}}]}},{urlPattern: /.*\.html/,handler: 'networkFirst'}]}).then(() => {console.info('Service worker generation completed.');}).catch(error => {console.warn('Service worker generation failed: ' + error);}); });// 壓縮輸出, 將 generate-service-worker 任務添加到末尾 gulp.task('build', cb => {runSequence('clean-build','minify-html',['minify-css', 'minify-js', 'move-libs-build'],'minify-img','build-json','generate-service-worker',cb); });

執行后生成的 service-worker 文件如下，與直接寫 service-worker 是一樣的

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js' );workbox.core.setCacheNameDetails({ prefix: 'gulp-pwa-demo' });workbox.skipWaiting(); workbox.clientsClaim();/*** The workboxSW.precacheAndRoute() method efficiently caches and responds to* requests for URLs in the manifest.* See https://goo.gl/S9QRab*/ self.__precacheManifest = [{url: 'index.html',revision: 'ffed06b43693a980d15df9eb95171465'},{url: 'libs/jquery-3.2.1.min.js',revision: 'c9f5aeeca3ad37bf2aa006139b935f0a'},{url: 'pages/aboutus.html',revision: '1bd0eef5e0e1a30063fe89ba68860f24'},{url: 'scripts/index.js',revision: 'd7968e072cb4b90efcbaf72e94ba00c9'},{url: 'scripts/registerServiceWorker.js',revision: '998c0ec9841a4e1f12872b37e4223d61'},{url: 'styles/aboutus.css',revision: '96895554b989e2f194169fe7e4d2a8b5'},{url: 'styles/index.css',revision: '9707c6dcc441f4704f5ede55bf2f7d55'} ].concat(self.__precacheManifest || []); workbox.precaching.suppressWarnings(); workbox.precaching.precacheAndRoute(self.__precacheManifest, {});workbox.routing.registerRoute(/.*\.js/,workbox.strategies.networkFirst(),'GET' ); workbox.routing.registerRoute(/.*\.css/,workbox.strategies.staleWhileRevalidate({plugins: [{ cacheableResponse: { statuses: [0, 200] } }]}),'GET' ); workbox.routing.registerRoute(/.*\.(?:png|jpg|jpeg|svg|gif)/,workbox.strategies.cacheFirst({plugins: [{ expiration: { maxAgeSeconds: 86400, maxEntries: 50 } }]}),'GET' ); workbox.routing.registerRoute(/.*\.html/,workbox.strategies.networkFirst(),'GET' );

參考

• 神奇的 Workbox 3.0
• Mercari Web 版 に Workbox で Service Worker を導入する話
• Workbox 入門
• google 的文檔 被墻了

其他相關

• PWA 漸進式網絡應用 - 1 - 簡介及調試方法
• PWA 漸進式網絡應用 - 2 - 使用 Service Workers
• PWA 漸進式網絡應用 - 3 - manifest.json 添加應用至桌面
• PWA 漸進式網絡應用 - 4 - 推送通知

總結

以上是生活随笔為你收集整理的使用 workbox 协助构建 PWA 应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。