通过基础篇:后台同步可知,我们可通过后台同步机制来解决传统 Web 应用所存在的以下问题:
- 页面发起的请求会随着页面的关闭而终止。
- 在离线状态下,很难将用户的网络请求缓存起来,并在网络恢复正常后再次进行请求。
- 从而为用户提供了恶劣网络环境下,无感知事务处理的能力。在该章中我们已对底层 API 的使用进行了详细介绍,故本章不再重述相关细节,而是直接对 Workbox 相关接口进行介绍说明。
# 基本使用
Workbox 使用
workbox.backgroundSync.Plugin完成后台同步的注册,比如:
workbox.routing.registerRoute(
'/articles',
new workbox.strategies.NetworkOnly({
plugins: [
new workbox.backgroundSync.Plugin('createArticle')
]
}),
'POST'
);
@前端进阶之旅: 代码已经复制到剪贴板
示例中,当
POST /articles请求失败时,Workbox 会自动将该请求添加到后台同步队列 createArticle 中,并在 sync 事件中自动进行重试。其中workbox.backgroundSync.Plugin的参数按照顺序依次为:
name:队列名称,该参数的值必须全局唯一,否则将抛出duplicate-queue-name异常。options: 配置信息,相关属性为maxRetentionTime:请求的最大有效时长(单位为分钟,默认值为七天),如果请求超过所指定的期限,将从队列中移除。onSync:sync触发时的回调函数,该回调函数的参数为含有 queue(类型为workbox.backgroundSync.Queue实例)属性的对象,如不指定将调用workbox.backgroundSync.Queue实例的replayRequests方法。若指定该属性的值,如果回调函数处理失败,需要抛出异常,以便浏览器后续继续进行尝试。
由于
workbox.backgroundSync.Plugin内部使用了workbox.backgroundSync.Queue来管理同步请求队列,因此我们可以使用它来自行控制请求被加入队列的时机,比如
const queue = new workbox.backgroundSync.Queue('createArticle');
self.addEventListener('fetch', event => {
event.waitUntil(
fetch(event.request.clone).catch(() => {
return queue.pushRequest({ request: event.request });
})
);
});
@前端进阶之旅: 代码已经复制到剪贴板
示例中,我们首先定义了
workbox.backgroundSync.Queue实例queue,然后在 fetch 事件中,如果请求出现异常,则调用 queue 的 pushRequest 方法将相关请求添加到同步队列中,之后 sync 事件触发后将自动重试队列中的请求。由于workbox.backgroundSync.Queue的参数与workbox.backgroundSync.Plugin一致,故不再重述。
# 同步事件注册
为了启用后台同步,我们在页面中注册了同步事件,主要代码如下:
window.addEventListener('load', function() {
if ('serviceWorker' in<