你是否曾经因为网络不稳定而苦恼?是否希望你的网页在离线时依然能流畅运行?今天,我们将探讨如何利用 Workbox 来优化你的 Service Worker,提升网页性能,确保你的 Web 应用在任何环境下都能稳定运行。
目前您可能还用不到这篇文章,不过可以先收藏起来。希望将来它能为您提供所需的帮助!
🎈什么是 Service Worker?
在深入了解 Workbox 之前,了解 Service Worker 的基础知识是必要的。Service Worker是运行在浏览器背后的独立线程,用于拦截和处理网络请求、管理缓存和处理推送通知。它的主要目的是增强 Web 应用的离线体验和性能。
Service Worker 在用户访问网页时被安装,并在后台运行,能够在不干扰主页面的情况下执行任务。
Service Worker 的生命周期分为以下3个阶段:
1、安装(Install):当浏览器发现新的 Service Worker 脚本时,会触发 install
事件。在这个阶段,开发者通常会缓存应用的静态资源。
self.addEventListener('install', event => { event.waitUntil( caches.open('my-cache').then(cache => { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js' ]); }) ); });
2、激活(Activate):安装完成后,Service Worker 会进入激活阶段。在这个阶段,开发者可以清理旧的缓存,确保新的缓存策略生效。
self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== 'my-cache') { return caches.delete(cacheName); } }) ); }) ); });
3、运行(Running):激活后,Service Worker 进入运行状态,开始拦截和处理网络请求。开发者可以通过 fetch
事件来控制请求的处理方式。
self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); });
Service Worker主要应用于以下几个场景:
离线支持:通过缓存静态资源和动态内容,确保应用在没有网络连接时仍然可以使用。
缓存管理:提高应用性能,通过缓存减少网络请求次数和加快页面加载速度。
推送通知:Service Worker 可以处理推送通知,即使用户没有打开应用也能接收消息。
手动编写 Service Worker 也可以实现,但是过于复杂,现在有一款比较成熟 npm 库 Workbox。
为什么选择 Workbox?🔥🔥
Workbox 功能强大特性
Workbox 是由 Google 开发的一组库和工具,帮助开发者轻松地将 Service Worker 集成到他们的 Web 应用中。它简化了缓存管理和离线支持,使得 Web 应用能够在没有网络连接的情况下依然保持高性能和可靠性。
主要用途包括:
简化缓存管理:通过预定义的策略自动处理资源的缓存。
提高性能:加快资源加载速度,减少服务器负载。
增强离线功能:确保应用在离线状态下仍能正常运行。
提供插件与扩展:通过各种插件轻松扩展功能,如背景同步、Google Analytics集成等。
与手动编写 Service Worker 的对比,使用 Workbox,开发者只需配置即可,大大提升了开发效率。经过广泛测试和社区验证,提供了高可靠性和性能优化的默认实现。
引入 Workbox(最简单的方法)
引入 Workbox(最简单的方法)可以通过以下几个步骤完成。Workbox 是一个强大的库,用于帮助开发人员简化构建进程中的离线支持和缓存策略。以下是最简单的方法来引入 Workbox:
1. 使用 Workbox CLI
Workbox CLI 是最快速且简单的方式来引入 Workbox 并生成 Service Worker 文件。
安装 Workbox CLI
你需要全局安装 Workbox CLI 工具。打开终端并运行以下命令:
npm install -g workbox-cli
初始化 Workbox
在你的项目根目录下,运行以下命令来初始化 Workbox:
workbox wizard
这会引导你完成配置过程,并生成一个
workbox-config.js
文件。生成 Service Worker
运行以下命令生成 Service Worker 文件:
workbox generateSW workbox-config.js
这将创建一个
service-worker.js
文件,你需要将它注册到你的应用中。注册 Service Worker
在你的应用入口文件(例如
index.js
或main.js
)中添加以下代码来注册 Service Worker:if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js').then(registration => { console.log('SW registered: ', registration); }).catch(registrationError => { console.log('SW registration failed: ', registrationError); }); }); }
2. 使用 Workbox CDN
如果你不想使用 CLI 工具,你也可以直接通过 CDN 引入 Workbox:
在 HTML 文件中添加 Workbox 的 CDN 链接
在你的 HTML 文件的
<head>
标签中添加以下代码:<script src="https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js"></script>
创建和注册 Service Worker
创建一个
service-worker.js
文件并添加以下代码:importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'); workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
然后在你的应用入口文件中注册这个 Service Worker:
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js').then(registration => { console.log('SW registered: ', registration); }).catch(registrationError => { console.log('SW registration failed: ', registrationError); }); }); }
使用 Workbox 插件(可选)
你可以根据需要添加其他 Workbox 插件,例如缓存策略:
workbox.routing.registerRoute( ({request}) => request.destination === 'image', new workbox.strategies.CacheFirst({ cacheName: 'images', plugins: [ new workbox.expiration.ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 天 }), ], }) );
Workbox配置
Workbox 预缓存功能
workbox.precaching
对象提供了常用的预缓存功能,其中最常用的方法是 workbox.precaching.precacheAndRoute
。它的作用跟我们前面实现的 Precacher.precacheAndRoute()
的功能类似, 都是将传入的资源列表进行预缓存,同时对匹配到的预缓存请求直接从本地缓存中读取并返回。
workbox.routing.precacheAndRoute([ { url: '/index.html', revision: 'asdf' }, '/index.abc.js', '/index.bcd.css' ])
Workbox 路由功能全面解析
Workbox 对资源请求匹配和对应的缓存策略执行进行了统一管理,采用路由注册的组织形式,以此来规范化动态缓存。Workbox 提供了简洁的 workbox.routing.registerRoute
方法来注册路由,规范化动态缓存操作。基本用法如下:
workbox.routing.registerRoute(match, handlerCb)
🐱路由匹配规则详解
workbox.routing.registerRoute
的第一个参数 match
是路由匹配规则,支持以下几种匹配模式:
字符串匹配:对资源 URL 进行字符串匹配。无论是完整 URL 还是相对路径,都可以匹配到相应资源。
workbox.routing.registerRoute('http://127.0.0.1:8080/index.css', handlerCb) workbox.routing.registerRoute('/index.css', handlerCb) workbox.routing.registerRoute('./index.css', handlerCb)
例如,以上注册的路由都能匹配到 http://127.0.0.1:8080/index.css
。
正则匹配:对资源 URL 进行正则匹配。
workbox.routing.registerRoute(//index.css$/, handlerCb)
这个规则可以匹配以下同域资源:
http://127.0.0.1:8080/index.css
http://127.0.0.1:8080/a/index.css
但无法匹配跨域资源。为匹配跨域资源需明确指定域名:
workbox.routing.registerRoute( /^https://third-party-site.com/.*/index.css$/, handlerCb )
自定义方法匹配:根据需求实现复杂的资源请求匹配规则。
const match = ({url, event}) => { return url.pathname === '/index.html' }
match
方法接收 url
和 event
参数,其中 url
是 URL
类实例,event
是 fetch
事件回调参数。
🐱资源请求处理方法
第二个参数 handlerCb
决定如何响应匹配到的请求,可以从网络、缓存获取资源或在 Service Worker 中直接生成响应。
const handlerCb = ({url, event, params}) => { return Promise.resolve(new Response('Hello World!')) }
handlerCb
方法接收的对象包含以下属性:
url
:经过URL
类实例化的event.request.url
。event
:fetch
事件回调参数。params
:自定义匹配方法返回的值。
注意:handlerCb
必须是异步函数,返回一个 Promise,该 Promise 的解析结果必须是一个 Response 对象。
Workbox 的路由功能通过统一管理资源请求匹配和缓存策略,显著提升了前端开发的效率和用户体验。
Workbox缓存策略(🔥🔥核心点,非常重要)
Workbox 提供了一系列灵活且强大的缓存策略,帮助开发者优化Web应用的性能。以下是几种常用的缓存策略以及它们的详细说明和应用场景:
NetworkFirst:网络优先
CacheFirst:缓存优先
NetworkOnly:仅使用正常的网络请求
CacheOnly:仅使用缓存中的资源
StaleWhileRevalidate:从缓存中读取资源的同时发送网络请求更新本地缓存
const {NetworkFirst, CacheFirst, StaleWhileRevalidate} = workbox.strategies; workbox.routing.registerRoute(/\api/, new workbox.strategies.NetworkFirst())
Stale-while-revalidate
当请求的路由有对应的 Cache 缓存结果就直接返回,在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存,如果本来就没有 Cache 缓存的话,直接就发起网络请求并返回结果,这对用户来说是一种非常安全的策略。
在第一次请求获取资源时,从网络中提取资源,将其放入缓存中并返回网络响应。
对于后续请求,首先从缓存提供资源,然后“在后台”从网络重新请求该资源,并更新资源的缓存条目。
对于此后的请求,您将收到在上一步中从缓存中放置的最后一个网络提取的版本。
Cache First
当匹配到请求之后直接从 Cache 缓存中取得结果,如果 Cache 缓存中没有结果,那就会发起网络请求,拿到网络请求结果并将结果更新至 Cache 缓存,并将结果返回给客户端。这种策略比较适合结果不怎么变动且对实时性要求不高的请求。
Network First
优先尝试拿到网络请求的返回结果,如果拿到网络请求的结果,就将结果返回给客户端并且写入 Cache 缓存,如果网络请求失败,那最后被缓存的 Cache 缓存结果就会被返回到客户端,这种策略一般适用于返回结果不太固定或对实时性有要求的请求,为网络请求失败进行兜底。
Cache Only
始终从缓存中获取资源,不发起网络请求。
Network Only
始终从网络请求资源,不使用缓存。
扩展延伸:Workbox自定义策略
在某些情况下,您可能希望使用自己的其他策略来响应请求,或者只是通过模板在 Service Worker 中生成请求。
为此可以提供一个异步返回 Response
对象的函数 handler
。
const handler = async ({ url, event }) => { return new Response(`Custom handler response.`); }; workbox.routing.registerRoute(new RegExp(matchString), handler);
需要注意的是,如果在 match
回调中返回一个值,它将 handler
作为 params
参数传递到回调中。
const match = ({ url, event }) => { if (url.pathname === '/example') { return { name: 'Workbox', type: 'guide', }; } }; const handler = async ({ url, event, params }) => { // Response will be "A guide to Workbox" return new Response(`A ${params.type} to ${params.name}`); }; workbox.routing.registerRoute(match, handler);
如果 URL 中的某些信息可以在 match 回调中解析一次并在中使用,则这可能会对 handler
有所帮助。
总结
希望这篇文章对你理解使用 Workbox 功能有所帮助。如果你有任何疑问或见解,欢迎在评论区分享或提问,让我们共同进步!