Google 新推出Background sync API - powertoolsteam－IT工程師數位筆記本

文章出處

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();
}