点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
「引言」:产品说:“网络不好,没有网络就不能展示页面了吗?” 前端开发人员****
你是否曾经因为网络不稳定而苦恼?是否希望你的网页在离线时依然能流畅运行?今天,我们将探讨如何利用 Workbox 来优化你的 Service Worker,提升网页性能,确保你的 Web 应用在任何环境下都能稳定运行。
![9dc49859cd8d3e860143b5d4e7bd8fa3.png](https://img-blog.csdnimg.cn/img_convert/9dc49859cd8d3e860143b5d4e7bd8fa3.png)
目前您可能还用不到这篇文章,不过可以先收藏起来。希望将来它能为您提供所需的帮助!
🎈什么是 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 缓存的话,直接就发起网络请求并返回结果,这对用户来说是一种非常安全的策略。
在第一次请求获取资源时,从网络中提取资源,将其放入缓存中并返回网络响应。
对于后续请求,首先从缓存提供资源,然后“在后台”从网络重新请求该资源,并更新资源的缓存条目。
对于此后的请求,您将收到在上一步中从缓存中放置的最后一个网络提取的版本。
![36e6b71c4cf558fa6a64cbcc01b5dc3e.png](https://img-blog.csdnimg.cn/img_convert/36e6b71c4cf558fa6a64cbcc01b5dc3e.png)
Cache First
当匹配到请求之后直接从 Cache 缓存中取得结果,如果 Cache 缓存中没有结果,那就会发起网络请求,拿到网络请求结果并将结果更新至 Cache 缓存,并将结果返回给客户端。这种策略比较适合结果不怎么变动且对实时性要求不高的请求。
![7fe40f38b40e7d4abccdf9505d68e42b.png](https://img-blog.csdnimg.cn/img_convert/7fe40f38b40e7d4abccdf9505d68e42b.png)
Network First
优先尝试拿到网络请求的返回结果,如果拿到网络请求的结果,就将结果返回给客户端并且写入 Cache 缓存,如果网络请求失败,那最后被缓存的 Cache 缓存结果就会被返回到客户端,这种策略一般适用于返回结果不太固定或对实时性有要求的请求,为网络请求失败进行兜底。
![460a9793e8815c3088ec0cf9db50d544.png](https://img-blog.csdnimg.cn/img_convert/460a9793e8815c3088ec0cf9db50d544.png)
Cache Only
始终从缓存中获取资源,不发起网络请求。
![82ae24b6fc8f987a8efc1ebbc3b3d3fa.png](https://img-blog.csdnimg.cn/img_convert/82ae24b6fc8f987a8efc1ebbc3b3d3fa.png)
Network Only
始终从网络请求资源,不使用缓存。
![5f1a8d3ca535112539f6935ed219e485.png](https://img-blog.csdnimg.cn/img_convert/5f1a8d3ca535112539f6935ed219e485.png)
扩展延伸: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 功能有所帮助。如果你有任何疑问或见解,欢迎在评论区分享或提问,让我们共同进步!
你打算如何在项目中处理网络不给力的情况呢?期待你的留言!
往期推荐
没有那么难!10 分钟带你构建monorepo架构,前端通用自动化 CI/CD 方案
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧