Google 新推出Background sync API

简介: Background sync是Google新推出的Web API,可延迟用户行为,直到用户网络连接稳定。这样有助于保证用户想要发送的数据就是实际发送的数据。   目前存在的问题 网络是消磨用户时间最多的途径,时间浪费在网络上等待网页加载,网页呈现等一些加载数据方面。

Background sync是Google新推出的Web API,可延迟用户行为,直到用户网络连接稳定。这样有助于保证用户想要发送的数据就是实际发送的数据。

 

目前存在的问题

网络是消磨用户时间最多的途径,时间浪费在网络上等待网页加载,网页呈现等一些加载数据方面。

但是有很多时候,并不希望浪费时间,更期望达成是以下的体验:1. 拿出手机;2. 实现用户目标;3. 放回手机;4. 享受人生

然而,流畅的用户体验往往都会受糟糕的网络而影响,常常会为用户呈现空白屏幕或停滞不动的进度条,用户最多能容忍10秒。尽管“Service workers”可通过加载缓存,来解决页面问题,但当客户端会发送多个数据时,会产生问题。

此刻,如果用户点击发送阪牛,必须盯着屏幕,直到信息提交完成,如果用户尝试导航或关闭页面,则使用对话框提示用户,进度还未完成,需要你耐心等待。如果用户取消连接,则需要告诉用户“抱歉,需要您重新执行操作。”有了Background Sync 所有的问题都迎刃而解。

解决方案

之前,当用户使用即时聊天记录,发送表情时,如果无网络连接,一旦有网络连接,信息就会立马发送出去。后台异步没有随着Chrome的新版本一起发布,你需要设置:“//flags/#enable-experimental-web-platform-features”并重启浏览器。

1. 打开App

2. 关闭网络连接

3. 输入信息

4. 返回主屏幕

5. 打开网络连接

6. 后台就会发送信息

后台发送消息会提升性能。App不需要处理消息发送的问题,因此App会将消息直接加入到输出流。

 

如何实现后台同步

真正的可扩展Web Style,可实现任何想要的功能。当用户有网络连接时,则立即触发事件。

如推送消息,使用service worker作为事件目标,当页面无法打开的时候,可帮助你打开,下面是为页面注册同步的代码:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
Then listen for the event in /sw.js:

self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});
 

doSomeStuff()会返回成功标记,表明操作成功或失败,一旦它被执行了,则表明同步工作。如果失败,另外一个同步操作会被尝试重新连接。

sync 标签名必须是唯一标识的。

 

什么情况下使用后台同步?

可以在发送数据时使用调度,聊天,消息,邮件,文档更新,设置更改时,上传照片时,任何想要发送给服务器的数据都可以使用。即使页面关闭或用户跳转到其他页面,该页面也会将数据存到Indexed DB,并且Service Worker会检索到这些信息,并且发送。

渐进增强

并不是所有的浏览器都支持Background Sync,特别是Safari和Edge 不支持Servcie workers。渐进增强功可帮助实现该功能:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navgiator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

service workers 或background Sync 浏览器都不支持,就采取旧方法实现。

无论用户的网络连接状态好还是差,使用Background Sync 都是最佳的解决方案,可在发送数据期间防止用户跳转或关闭页面。

 

Background Sync 未来发展

Google预计2016年将background Sync  嵌入到Chrome中。功能上正在研究“periodic background sync”,支持时间段内的periodicsync 请求,受时间,电池状态和网络状态。

相关文章
|
28天前
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
2月前
|
JSON 搜索推荐 API
【2024更新】如何使用google index api来自动提交url
本文提供了一个详细的指南,说明如何创建并使用使用google index api,google自动提交url来优化seo。
34 0
|
6月前
|
关系型数据库 MySQL API
Go语言微服务框架 - 6.用Google风格的API接口打通MySQL操作
随着RPC与MySQL的打通,整个框架已经开始打通了数据的出入口。 接下来,我们就尝试着实现通过RPC请求操作MySQL数据库,打通整个链路,真正地让这个平台实现可用。
18 0
|
7月前
|
JavaScript 前端开发 API
什么是 Web API 中的 background fetch API
什么是 Web API 中的 background fetch API
50 0
|
11月前
|
Web App开发 前端开发 JavaScript
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API
|
机器学习/深度学习 数据采集 人工智能
好饭不怕晚,Google基于人工智能AI大语言对话模型Bard测试和API调用(Python3.10)
谷歌(Google)作为开源过著名深度学习框架Tensorflow的超级大厂,是人工智能领域一股不可忽视的中坚力量,旗下新产品Bard已经公布测试了一段时间,毁誉参半,很多人把Google的Bard和OpenAI的ChatGPT进行对比,Google Bard在ChatGPT面前似乎有些技不如人。 事实上,Google Bard并非对标ChatGPT的产品,Bard是基于LaMDA模型对话而进行构建的,Bard旨在构建一个对话式的AI系统,使其能够更好地理解人类语言,并且具备进行多轮对话的能力。而GPT的目标是生成自然语言文本。
好饭不怕晚,Google基于人工智能AI大语言对话模型Bard测试和API调用(Python3.10)
|
Ubuntu JavaScript 前端开发
Google Map api国内正常使用该如何配置(2021最新)
Google Map api国内正常使用该如何配置(2021最新)
348 0
Google Map api国内正常使用该如何配置(2021最新)
EMQ
|
消息中间件 运维 Kubernetes
EMQX Enterprise 4.4.11 发布:CRL/OCSP Stapling、Google Cloud Pub/Sub 集成、预定义 API 密钥
EMQX Enterprise最新的4.4.11版本发布了CRL(证书吊销列表)与OCSP Stapling为客户端提供更灵活的安全防护,新增Google Cloud Pub/Sub集成帮助用户通过Google Cloud各类服务发掘更多物联网数据价值。
EMQ
125 0
EMQX Enterprise 4.4.11 发布:CRL/OCSP Stapling、Google Cloud Pub/Sub 集成、预定义 API 密钥
|
存储 传感器 编解码
微软行星云计算planet platform中的高分辨率影像通过API接入Google Earth Engine(GEE)
微软行星云计算planet platform中的高分辨率影像通过API接入Google Earth Engine(GEE)
314 0
微软行星云计算planet platform中的高分辨率影像通过API接入Google Earth Engine(GEE)
|
存储 前端开发 JavaScript
Google Earth Engine(GEE)——Qgis-earthengine使用 Python API 集成 Google Earth Engine 和 QGIS
Google Earth Engine(GEE)——Qgis-earthengine使用 Python API 集成 Google Earth Engine 和 QGIS
429 0
Google Earth Engine(GEE)——Qgis-earthengine使用 Python API 集成 Google Earth Engine 和 QGIS