使用 workbox 協(xié)助構(gòu)建 PWA 應(yīng)用

1. 說明

workbox 是 GoogleChrome 團(tuán)隊(duì)推出的一套解決方案，提供站點(diǎn)離線訪問能力，可以更方便、更簡(jiǎn)單的解決 Service Workers 絕大多數(shù)問題

重要文件版本

• workbox-build ‘3.0.0’

2. workbox 簡(jiǎn)單使用

workbox 是協(xié)助 Service worker 使用的，與一般的 Service worker 一樣，首先需要在文件中注冊(cè) 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>

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

// sw.js// 引入核心文件 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js' );// 設(shè)置緩存名稱前綴 workbox.core.setCacheNameDetails({ prefix: 'gulp-pwa-demo' });/*一下兩個(gè)接口對(duì)應(yīng) service worker 中的self.skipWaiting() 強(qiáng)制等待中的 Service Worker 被激活self.clients.claim() 新的 Service Worker 被激活后使其立即獲得頁面控制權(quán)*/workbox.skipWaiting(); workbox.clientsClaim();// 要 precache 預(yù)先緩存的文件 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 預(yù)緩存靜態(tài)文件 workbox.precaching.precacheAndRoute(self.__precacheManifest, {});/*registerRoute 路由請(qǐng)求緩存第一個(gè)參數(shù)可以是正則、完整路徑字符串、或者是返回布爾值的函數(shù)第二個(gè)參數(shù) workbox.strategies.networkFirst() 是一個(gè)路由緩存策略，用來確定資源緩存方式*/workbox.routing.registerRoute(new RegExp('.*.js'),workbox.strategies.networkFirst() );

路由緩存策略

• staleWhileRevalidate 請(qǐng)求的路由有對(duì)應(yīng)的 cache 緩存就直接返回，同時(shí)在后臺(tái)再次發(fā)起請(qǐng)求并更新 Cache
• networkFirst 請(qǐng)求后，首先嘗試拿到網(wǎng)路請(qǐng)求的返回結(jié)果，請(qǐng)求到就直接返回并且更新 cache，否則返回緩存中的內(nèi)容
• cacheFirst 請(qǐng)求后，直接從 Cache 中取得結(jié)果，沒有的話在發(fā)起網(wǎng)絡(luò)請(qǐng)求
• networkOnly 強(qiáng)制使用網(wǎng)絡(luò)請(qǐng)求
• cacheOnly 強(qiáng)制使用 Cache 資源

3. 結(jié)合 gulp 使用 workbox

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

sudo yarn add --dev workbox-build

在 gulpfile.js 中配置，全部的 workbox 配置都要寫在 workbox.generateSW(options) 中, workbox-build 工具會(huì)根據(jù)這個(gè)配置生成對(duì)應(yīng)的 Service worker 文件，但是主文件中注冊(cè)Service worker 還是需要手動(dòng)寫的，如果要實(shí)現(xiàn)‘添加到主屏幕功能’ 同樣需要自己配置 manifest.json

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

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

執(zhí)行后生成的 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 を?qū)毪工朐?/li>
• Workbox 入門
• google 的文檔 被墻了

其他相關(guān)

• PWA 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用 - 1 - 簡(jiǎn)介及調(diào)試方法
• PWA 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用 - 2 - 使用 Service Workers
• PWA 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用 - 3 - manifest.json 添加應(yīng)用至桌面
• PWA 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用 - 4 - 推送通知

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。