背景同步簡介

阿奇巴德 (Jake Archibald)
Jake Archibald

背景同步處理是新的網路 API,可將動作延後到使用者穩定連線為止。這樣可確保系統確實傳送使用者要傳送的內容。

問題

網際網路是浪費時間的絕佳場所。少花時間在網路上,我們無從瞭解貓不喜歡花變色龍戀愛泡泡,或是我們自己的 Eric Bidelman在 90 年代後期在推桿高爾夫球英雄

但有時候,我們不想要浪費時間。所需使用者體驗更像:

  1. 手機不在口袋中。
  2. 達成次要目標。
  3. 手機放回口袋中。
  4. 恢復生活。

不過很抱歉,由於連線品質不佳,經常導致這項體驗不佳。我們都遇過了您正注視著白色螢幕或旋轉圖示,並知道您應該放棄和繼續生活。但可以再給它 10 秒,以備不時之需。然後在 10 秒過後?不會發生任何事情。

但現在放棄吧?您已經投入了時間,所以在不帶任何東西的情況下走路會很浪費,所以必須繼續等待。此時,您「希望」放棄,但您也知道。第二,也就是第二,這樣一來,只有在您等待時,所有內容才會載入。

Service Worker 可透過快取提供內容,藉此解決網頁載入部分的問題。但是當網頁需要將內容傳送至伺服器時呢?

目前,如果使用者在郵件上按下「傳送」,他們必須先按下旋轉圖示,才能傳送完畢。如果客戶嘗試離開或關閉分頁,我們會使用 onbeforeunload 顯示類似「不是,我需要再把這個旋轉圖示加上星號。抱歉,如果使用者未連上網路,我們會告訴使用者「很抱歉,過來,請稍後再試一次」。

是垃圾。背景同步處理功能還有許多好處。

解決方案

以下影片是「Emojoy」(僅使用表情符號的聊天示範影片)。這是漸進式網頁應用程式,具備離線優先運作的功能。這款應用程式會使用推送訊息和通知,並會使用背景同步功能。

如果使用者嘗試在沒有網路連線時傳送訊息,幸好,系統會在他們連上網路後於背景傳送訊息。

自 2016 年 3 月起,Chrome 皆搭載 Chrome 49 以上版本的背景同步功能。您可以按照下列步驟查看動作:

  1. 開啟 Emojoy
  2. 離線 (使用飛航模式或造訪當地的 Faraday Cage)。
  3. 輸入訊息。
  4. 返回主畫面 (選擇關閉分頁或瀏覽器)。
  5. 請連上網路。
  6. 系統會在背景中傳送訊息!

在背景傳送這類訊息時,效能也明顯提升。應用程式不需要對傳送訊息進行大量處理,因此可立即將訊息加入輸出內容。

如何要求背景同步處理

就真正的可擴充網路風格而言,這項低階功能可讓您自由執行需要的工作。您要求在使用者有連線時觸發事件,此事件會在使用者已連上網路時立即觸發。然後,您可以監聽該事件,並執行您需要的任何行動。

就像推送訊息一樣,它會使用「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`:

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

大功告成!在上述中,doSomeStuff() 應傳回承諾,表示嘗試執行的任何動作成功/失敗。如果符合,即表示作業已完成。如果失敗,系統將安排再次同步處理。重試同步處理也會等待連線能力,並採用指數輪詢策略。

每次同步處理時,同步處理的標記名稱 (上述範例中的「myFirstSync」) 不得重複。假如您使用與待同步處理作業相同的代碼註冊同步處理,該代碼就會與現有的同步作業一起顯示。也就是說,每當使用者傳送郵件時,您都可以註冊「清除可用的方塊」,但如果使用者離線時傳送 5 封郵件,系統只會在使用者上線時同步處理一次。如果您需要 5 個不同的同步處理事件,只要使用不重複的代碼即可!

看看這個簡單的示範,瞭解最低限度的情況;瞭解如何使用同步事件顯示通知。

背景同步處理功能有哪些用途?

在理想情況下,您應使用它來安排在網頁使用期間傳送您重視的任何資料。即時通訊、電子郵件、文件更新、設定變更、相片上傳... 即使使用者離開或關閉分頁,仍想透過所有方式連至伺服器的資料。網頁可以將這些資訊儲存在已建立索引資料庫的「寄件匣」中,服務工作處理程序會擷取這些這些資料並傳送。

雖然你也可以用它來擷取少量資料...

又是吧!

這是我為「Supercharging Page Load」建立的離線 Wikipedia 示範。我已經添加一些背景同步神奇效果。

你自己試試看確認你使用的是 Chrome 49 以上版本,然後:

  1. 前往任一文章 (可能的 Chrome)。
  2. 離線 (使用飛航模式或加入像我一樣的超棒行動服務供應商)。
  3. 按一下連結前往其他文章。
  4. 您應該會看到網頁無法載入 (如果網頁需要一點時間才能載入,也會顯示這個狀態)。
  5. 同意通知。
  6. 請關閉瀏覽器。
  7. 切換為線上狀態
  8. 報導下載、快取且可供檢視時,你會收到通知!

透過這個模式,使用者可以將手機放在口袋中,以便開始處理生活大小事,並得知手機會在偵測到需要時發出警示。

權限

我顯示的示範使用網頁通知,需要取得權限,但背景同步處理本身並未運作。

當使用者將網頁開啟時,系統通常會完成同步處理事件,因此需要使用者授權可能會導致使用者體驗不佳。我們限制了可以註冊及觸發同步處理作業的時間點,以防止濫用行為。例如:

  • 只有當使用者開啟網站視窗時,你才能註冊同步處理事件。
  • 事件執行時間會受到限制,因此您無法使用事件執行時間每 x 秒對伺服器進行連線偵測 (ping)、探入比特等。

當然,這些限制可能會因實際使用情況而放寬或延長。

漸進增強

所有瀏覽器都將於一段時間之後支援背景同步功能,特別是 Safari 和 Edge 尚未支援 Service Worker 的功能。但先進的增強功能可以派上用場:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.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 Worker 或背景同步功能,只要按照目前的做法從頁面發布內容即可。

因此,即使使用者似乎能順暢連線,我們還是建議您使用背景同步功能,這樣可防止您在資料傳送期間的導覽和分頁關閉。

日後規劃

我們的目標是在 2016 上半年推出 Chrome 穩定版,同時針對「定期背景同步處理」這個版本進行開發。透過定期的背景同步,您可以要求依時間間隔、電池狀態和網路狀態限制的事件。這當然需要使用者授權,同時也要視瀏覽器決定這些事件的觸發時間和頻率。換句話說,新聞網站每小時可要求同步處理一次,但瀏覽器可能知道你是在 07:00 讀取該網站,因此同步處理作業每天都會在 06:50 執行。這個想法比一次性同步還更進一步,但我們日後會陸續推出。

稍早,我們紛紛將 Android 和 iOS 的成功模式導入網路,同時保留讓網路更美好的事物!