昨天了解了下谷歌黑科技Service Worker前端加速，在其开源项目中提到了Service Worker缓存实现工具sw-toolbox.js的升级版，拥有更强大的缓存能力，支持预缓存以及向客户端发送消息的能力，适合大型复杂的网络环境。
workbox的介绍
workbox.js 是一个强大的 Service Worker 库，提供了多个模块（库）来支持不同的功能。以下是一些常用的 workbox.js 模块及其对应的功能：
- workbox-core：提供了 Workbox 核心功能，包括配置、日志记录等。
- workbox-routing：用于路由管理，可以根据请求类型、URL 等条件来选择不同的缓存策略。
- workbox-strategies：提供了各种缓存策略，如 CacheFirst、NetworkFirst、StaleWhileRevalidate 等。
- workbox-precaching：用于预缓存功能，可以在安装 Service Worker 时预先缓存指定的资源。
- workbox-expiration：用于管理缓存条目的过期时间和策略。
- workbox-background-sync：提供了后台同步功能，可以在离线时将请求暂存并在恢复在线时重新发送。
- workbox-broadcast-update：用于向客户端发送更新通知，以便刷新缓存。
- workbox-window：提供了在客户端中使用 Workbox 的工具，如注册 Service Worker、发送消息等。
这些模块可以根据实际需求单独或组合使用，帮助开发者更灵活地构建和管理 Service Worker，实现离线缓存、预缓存、动态缓存、后台同步等功能。每个模块都有其特定的功能和用途，开发者可以根据需求选择合适的模块来实现所需的功能。
注意：workbox.js的资源属于嵌套结构，引入workbox.js文件后，会自动加载需要的模块（通过网络），这个东西是国外Google开发的工具，国内加载它你知道会发生什么的。所以建议将它们都下载到本地，然后自己引用它们。
简单使用
下载js工具，国外可以直接用，国内建议下载到本地使用。
复制
https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js
与sw-toolbox.js的用法一样，需要准备一个自定义的配置文件service-worker.js，这个文件中写上你的缓存规则。
复制
importScripts('/static/js/workbox-sw.js');
importScripts('/static/js/libs/workbox-precaching.prod.js');
//加载更多模块，这里举例，自己加载吧，建议放在本地加载，不然会自动加载网络资源
if (workbox) {
console.log('Workbox loaded successfully');
} else {
console.log('Workbox failed to load');
}
workbox.precaching.precacheAndRoute([
{ url: '/static/js/app.js?ver=2.0', revision: '1' },
{ url: '/static/css/app.css?ver=2.0, revision: '1' }
]);
// 缓存本地资源
workbox.routing.registerRoute(
({url}) => url.origin === self.location.origin && url.pathname.endsWith('.js'),
new workbox.strategies.StaleWhileRevalidate()
);
workbox.routing.registerRoute(
({url}) => url.origin === self.location.origin && url.pathname.endsWith('.css'),
new workbox.strategies.StaleWhileRevalidate()
);
workbox.routing.registerRoute(
({url}) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
new workbox.strategies.CacheFirst()
);
// 缓存特定目录下的资源
workbox.routing.registerRoute(
new RegExp('/static/'),
new workbox.strategies.StaleWhileRevalidate()
);
// 缓存跨域请求
workbox.routing.registerRoute(
new RegExp('https://www.daimadog.org'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'or-cache',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [200] //仅换成200状态码的响应
}),
new workbox.expiration.ExpirationPlugin({
maxEntries: 50, //总共50条
maxAgeSeconds: 60 * 60 // 缓存1小时
})
]
})
);
// 处理其他请求
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());
// 安装Service Worker
self.addEventListener('install', event => {
event.waitUntil(self.skipWaiting());
});
// 激活Service Worker
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
这里要介绍下workbox的几种缓存策略，它继承了sw-toolbox.js的缓存策略，并且增加了一种StaleWhileRevalidate策略，它能在使用缓存的同时，对服务器发起请求，得到数据后更新本地缓存，让用户无感获得最新数据。
下面是所有缓存策略
- CacheFirst：首先尝试从缓存中获取资源，如果缓存中存在则直接返回，否则从网络请求资源，并将新的资源缓存起来。适用于优先使用缓存数据的场景。
- NetworkFirst：首先尝试从网络获取资源，如果网络请求失败则从缓存中获取资源。适用于需要实时数据的场景，如新闻、实时通讯等。
- CacheOnly：仅从缓存中获取资源，如果缓存不存在则返回失败。适用于完全离线可用的资源。
- NetworkOnly：仅从网络获取资源，不使用缓存。适用于需要实时数据且不关心缓存的场景。
- NetworkOnlyWithFallback：首先尝试从网络获取资源，如果网络请求失败则返回缓存中的备用资源。适用于优先使用网络数据但有备用方案的场景。
- CacheOnlyWithFallback：仅从缓存中获取资源，如果缓存不存在则返回备用资源。适用于完全离线可用的资源，但有备用数据可用。
- StaleWhileRevalidate：从缓存中获取资源，并同时发起网络请求，得到响应后更新缓存。
然后在网页中注册你的workbox工具，放在根目录下拥有更大的作用域，超出作用域范围规则不会生效。
复制
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service Worker registered');
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
});
}
</script>好了，完成了，对于小型简单的网站而言，sw-toolbox.js已经够用了，没必要上新工具。
评论 （0）