背景同步處理是新的網路 API，可讓您在使用者連線穩定前，暫緩執行動作。這可確保使用者要傳送的內容確實傳送出去。
問題
網際網路是消磨時間的好地方，我們不會浪費時間在網路上搜尋，貓咪不喜歡花朵、變色龍喜歡泡泡，或是Eric Bidelman是90 年代末的推桿高爾夫英雄。
但有時，我們不想浪費時間。理想的使用者體驗應類似於：
- 手機從口袋中拿出。
- 達成次要目標。
- 手機放回口袋。
- 繼續生活。
不幸的是，這項體驗經常因連線不佳而中斷。我們都曾經歷過這種情況。你盯著空白畫面或旋轉圖示，知道自己應該放棄並繼續生活，但還是再等 10 秒，以防萬一。10 秒後？不會發生任何事情。
但為何要放棄？你已經花費時間，如果什麼都沒有就離開，那就太浪費了，所以你繼續等待。到這個時候，你「想」放棄，但你知道，只要你放棄，就會錯過所有內容載入前的那一秒鐘。
服務工作者可解決網頁載入問題，讓您從快取提供內容。但如果網頁需要傳送內容給伺服器，該怎麼辦呢？
目前，如果使用者按下訊息的「傳送」按鈕，就必須一直盯著旋轉圖示，直到傳送作業完成為止。如果使用者嘗試離開或關閉分頁，我們會使用 onbeforeunload 顯示類似「不，我需要你再盯著這個旋轉圖示看一會兒」的訊息。抱歉」；如果使用者沒有連線，我們會告訴使用者：「很抱歉，你必須稍後再試一次。」
這根本是胡說八道。背景同步處理功能可讓您更有效率。
解決方案
以下影片為 Emojoy 的表情符號專用聊天示範。這是一個漸進式網頁應用程式，採用離線優先的運作方式。應用程式會使用推播訊息和通知，並使用背景同步功能。
如果使用者在完全無法連線時嘗試傳送訊息，系統會在使用者恢復連線後在背景傳送訊息。
自 2016 年 3 月起，Chrome 49 以上版本提供背景同步處理功能。如要查看實際運作情形，請按照下列步驟操作：
- 開啟 Emojoy。
- 離線 (使用飛航模式或前往當地的法拉第籠)。
- 輸入訊息。
- 返回主畫面 (視需要關閉分頁或瀏覽器)。
- 連上網路。
- 訊息會在背景傳送！
這樣一來，您就能在背景傳送資料，進而提升效能。應用程式不需要特別處理訊息傳送作業，因此可以立即將訊息加入輸出內容。
如何要求背景同步
在真正的可擴充網頁樣式中，這是一項低階功能，可讓您自由執行所需的操作。您要求在使用者連上網路時觸發事件，如果使用者已連上網路，則會立即觸發。接著，您可以監聽該事件，並執行所需的操作。
與推播訊息一樣，這項功能會使用 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 個獨立的同步處理事件，請使用專屬代碼！
以下是簡單的示範，只會執行最基本的工作，使用同步處理事件顯示通知。
我可以將背景同步處理功能用於哪些情況？
理想情況下，您應該使用這項功能，安排在網頁生命週期結束後傳送您重視的任何資料。即時通訊訊息、電子郵件、文件更新、設定變更、相片上傳內容... 凡是您希望傳送至伺服器的內容，即使使用者離開或關閉分頁，也能傳送。網頁可將這些內容儲存在 indexedDB 中的「outbox」儲存庫中，Service Worker 會擷取這些內容並傳送。
不過，您也可以使用它擷取少量資料...
另一個示範！
這是我為超級充電網頁載入建立的離線維基百科示範。我已在其中加入一些背景同步功能。
親自試試看。請確認你使用的是 Chrome 49 以上版本，然後執行下列操作：
- 開啟任一文章，例如 Chrome。
- 離線 (使用飛航模式或加入像我一樣糟糕的行動網路供應商)。
- 點選其他文章的連結。
- 系統應會通知您網頁無法載入 (如果網頁只是需要一些時間載入，也會顯示這則訊息)。
- 同意接收通知。
- 關閉瀏覽器。
- 切換為線上狀態
- 系統會在文章下載完畢、快取完成且可供查看時通知你！
使用者只要採用這個模式，就能將手機放入口袋，繼續過著自己的生活，因為他們知道手機會在擷取所需內容時發出通知。
權限
我展示的示範使用 網頁通知，需要權限，但背景同步本身不需要。
同步處理事件通常會在使用者開啟網站頁面時完成，因此要求使用者授權會導致使用者體驗不佳。我們會限制同步作業的註冊和觸發時間，以防濫用。例如：
- 只有在使用者開啟網站視窗時，您才能註冊同步處理事件。
- 事件執行時間有上限，因此您無法使用這些事件每隔 x 秒對伺服器執行 ping 作業、挖掘比特幣或執行其他作業。
當然，這些限制可能會根據實際使用情況而放寬或收緊。
漸進增強
所有瀏覽器都支援背景同步功能還需要一段時間，尤其是 Safari 和 Edge 尚未支援服務工作者。不過，漸進式改善功能在這裡很有幫助：
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();
}
如果無法使用服務工作者或背景同步功能，請按照目前的方式，從網頁發布內容。
即使使用者似乎擁有良好的連線品質，仍建議使用背景同步功能，因為這可避免在傳送資料期間發生導覽和分頁關閉的情況。
未來
我們預計在 2016 上半年將背景同步功能納入穩定版 Chrome，同時開發「定期背景同步」的變化版本。透過定期背景同步處理功能，您可以要求以時間間隔、電池狀態和網路狀態為限制的事件。當然，這需要使用者授權，且瀏覽器也會決定這些事件的觸發時機和頻率。換句話說，新聞網站可以要求每小時同步處理一次，但瀏覽器可能知道您只會在 7 點閱讀該網站，因此會在每天 6 點 50 分啟動同步處理作業。這個想法比一次性同步處理更為複雜，但我們會推出這項功能。
我們會逐步將 Android 和 iOS 的成功模式引進網頁，同時保留網頁的優點！