• Google 新推出Background sync 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 请求,受时间,电池状态和网络状态。

  • 相关阅读:
    pdf 去水印 比较好用
    ffmpeg从视频中每隔几秒提取一张图片
    tampermonkey 网盘直链下载助手
    淘工厂买的usb 蓝牙5.0 外置台式机 适配器(下载)
    Apache Doris 轻松入门和快速实践
    一步一步编译最新版Apache Doris 0.15版本的详细过程
    go使用msgpack
    服务接口杂谈
    关于真伪3层所讨论的
    jattach最近的一些更新
  • 原文地址:https://www.cnblogs.com/powertoolsteam/p/5076210.html
Copyright © 2020-2023  润新知