提供网站建设公司有哪些,正规网络教育培训机构,网站建设百度认证,印象笔记到wordpress前言
当我们在一些地下停车场#xff0c;或者在火车上、电梯等无法避免的信号不稳定的场所#xff0c;使用网站应用处理一些表单操作或者上传数据的操作时#xff0c;面临的将是网络连接错误的响应#xff0c;使用户的操作白费。
而此刻 PWA 的 Sync API 就很好的解决了这…前言
当我们在一些地下停车场或者在火车上、电梯等无法避免的信号不稳定的场所使用网站应用处理一些表单操作或者上传数据的操作时面临的将是网络连接错误的响应使用户的操作白费。
而此刻 PWA 的 Sync API 就很好的解决了这个问题让用户处理一些数据上传的操作时无需关系网络环境所有相关操作均会完成。Sync API 也是 PWA 离线里面的重要一环下面就说一块。 SyncManager API
SyncManager 接口提供了用于注册和获取 Sync 注册的接口。Sync 是一个简单且非常实用的功能。
通过 ServiceWorkerRegistration 接口的 sync 进行获取
navigator.serviceWorker.ready.then(reg {console.log(reg.sync)
})方法
SyncManager.register
用于注册一个 sync tagtag 按照自己的需求设置。
语法
SyncManager.register(DOMString tag).then(function(void) { ... })返回 void 的 Promise。
SyncManager.getTags
用于获取已注册且未完成的 sync tag完成后的 sync tag 会自动从此列表中删除。
语法
SyncManager.getTags().then(function(tags[]) { ... })返回注册 syn tag 的字符串数组的 Promise。
事件
onsync
注册后的 Sync tag 会触发 ServiceWorkerGlobalScope 下的 onsync 事件。
此事件值包含两个属性
tag返回触发此次事件的注册 Sync tag 的 tag 值。lastChance如果浏览器在尝试多次后还未成功当 lastChance 为 true 时表示不再尝试且此次 sync tag 删除。
流程
从注册一个 Sync tag 到这个 Sync tag 完成会经历三个阶段
Registered sync注册 sync。Dispatched sync event发出 sync 事件。Sync completedSync 完成。
SyncManager.register(tag) 后会立即注册 sync并将注册后的 sync tag 放入 sync 的注册列表中可以通过SyncManager.getTags() 获取到然后会判断当前的网络环境只有网络在线的情况下注册的 Sync 才会发出 sync 事件然后当 SyncEvent.waitUntil() 中 Promise 为 reject 时将会周期性的触发 onsync 事件直到不为 reject 才会完成 Sync tag然后将相关 tag 清除。
在 Chrome 下当 SyncEvent.waitUntil() 中的参数值一直为 Promise reject 时会最多触发三次 onsync 事件每次的周期时间至少为 5 分钟。 注意sync 事件中的处理结果必须放在 SyncEvent.waitUntil() 中否则会立即完成 Sync。 注意上图中的重试次数和周期时间是 Chrome 环境下的体现具体次数和周期标准中未规范可以 e.lastChance 来判读处理最后一次的相关逻辑。 可以通过 DevTools 里的 Background Services 查看 Sync 的执行过程 使用场景
SyncManager 本身只是一个简单的 APIsync 事件中也只有两个只读属性所以基于 Sync 来做的同步数据比较好的方式搭配 IndexDB 来实现下面两个场景也是基于 IndexDB。
1. 完全 Sync 化数据请求传输
这种场景下相关场景的数据请求先写入 IndexDB 中然后注册 Sync在 onsync 中根据相关 tag 来处理 IndexDB 中的数据请求。
下面是一个聊天应用的场景 index.html
btnSend.addEventListener(click, async () {await db.add(chatList, { msg, time, useId});reg await navigator.serviceWorker.ready;reg.sync.register(send_chat);
})sw.js
self.addEventListener(sync, e {e.tag send_chat e.waitUntil(new Promise.then(async (res, rej) {var allData await db.getAll(chatList);return Promise.all(allData.map(data fetch(data)));}))
})2. 失败请求的 Sync 化
这个场景可以针对于某些特定请求先让它正常发送网络请求如果失败则将失败的请求放到相关的 IndexDB 中并设定这条网络请求可尝试的有效期有效期内均会重拾。
关于 sync 的周期上面也说过在 Chrome 下最多尝试三次本场景下的这种需求需要相关的 sync tag 一直处理可用状态所以需要对这一层进行修改满足需求。
例如点赞场景 index.html
btnLike.addEventListener(click, () {reg await navigator.serviceWorker.ready;reg.sync.register(like’);fetch(data).catch(e {db.add(likeList, {data, lastTime: 12938749138}); // 有效期时间戳})
})sw.js
self.addEventListener(sync, e {if (e.tag send_chat) {e.waitUntil(new Promise.then(async (res, rej) {while (db.get(likeList)[0]) {var data db.get(likeList)[0];try {if(data.lastTime Date.now()) {db.remove(likeList, data)} else {await fetch(data);db.remove(likeList, data)} } catch (err) {if(e.lastChance true) { // 如果最后一次尝试机会则重新注册保证一直有效self.registration.sync.register(like)}}}}));}
});注意上面代码中的 db 为模拟的伪代码。 通过 Sync API 的支持网站应用可以较大的离线化提升用户的体验度和应用的可靠性。这样用户在网络连接失败的情况下也能上传表单、点赞评论文章、发送消息等等为用户带来积极的影响。也意味着 Web 应用更加接近原生应用的体验效果。 博客名称王乐平博客 CSDN博客地址http://blog.csdn.net/lecepin 本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
