背景同步處理 全新的網路 API 可讓您延後動作，直到使用者的穩定版本為止 以獲得最佳效能和最安全的連線這可確保系統確實傳送使用者想要傳送的任何項目。
問題
網際網路是浪費時間的好地方。如果沒有浪費時間使用網路，我們無從得知貓不喜歡花朵、變色龍喜歡泡泡，又也無法確定我們的 Eric Bidelman 是 90 年代後期的推桿高爾夫球英雄。
但有時候，我們並不打算浪費時間。所需的使用者 比較像是：
- 手機不在身邊，也能輕鬆使用。
- 達成小目標。
- 手機可放入口袋，
- 恢復使用壽命。
遺憾的是，這種體驗經常因為連線品質不佳而中斷。我們都遇過來了。您的看似白色螢幕或旋轉圖示上頭，著眼於靜下這些精神，您應該多休息 10 秒的時間，以防萬一。10 秒過後，不會發生任何事情。
但現在就放棄吧！您已經投入時間，即使去走也沒關係，別再浪費時間。到了這個階段，您「想」放棄了，但是您知道第二個動作，也就是僅在您等待時，系統才會載入所有內容。
服務工作處理程序可讓您從快取提供內容，藉此解決網頁載入的部分。不過，網頁何時需要傳送資料到伺服器呢？
目前，如果使用者點選「傳送」他們必須在旋轉圖示上觀摩，直到作業完成如果他們嘗試離開或關閉分頁，我們會使用 onbeforeunload 顯示以下訊息：「不對，請你再看一下這個旋轉圖示。抱歉」如果使用者未連上網路，系統會告訴使用者「很抱歉，您必須稍後回來再試一次」。
這太爛了。背景同步處理功能可讓你事半功倍。
解決方案
以下影片是 Emojoy (僅限表情符號的即時通訊示範)。這是一款漸進式網頁應用程式，且可在離線狀態下運作。應用程式會使用推送訊息和通知，並使用背景同步功能。
如果使用者嘗試在沒有網路連線的情況下嘗試傳送訊息，那麼郵件會在一恢復連線後於背景傳送，可惜的是。
自 2016 年 3 月起，Chrome 已推出 49 以上版本的背景同步功能。按照下列步驟操作，即可查看相關動作：
- 開啟 Emojoy。
- 處於離線狀態 (使用飛航模式或造訪當地的 Faraday 電路)。
- 輸入訊息內容。
- 返回主畫面 (可選擇關閉分頁或瀏覽器)。
- 請連上網路。
- 訊息會在背景傳送！
能夠像這樣在背景傳送，可進一步提升效能。應用程式不需要對訊息傳送進行如此大事，因此可以將訊息直接新增至輸出內容。
如何要求背景同步處理
以真正的可延伸網路風格來說，這是 有了低階功能，您更能自由執行所需工作。您要求 使用者有連線時要觸發的事件；如果使用者有連線，此事件將立即觸發 已有連線。然後您可以接聽該活動 不需要費心處理
和推送訊息一樣，這項服務會使用「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 個不同的同步處理事件，請使用不重複的代碼！
這個簡單示範瞭解如何基本使用。而會使用同步處理事件顯示通知。
背景同步處理的用途為何？
在理想情況下，您可以使用這項功能，將重要資料排定在網頁生命週期以外的時間。即時通訊訊息、電子郵件、文件更新、設定變更、相片上傳... 所有您想傳送至伺服器的內容 (即便使用者離開或關閉分頁)。網頁可以將這些圖片儲存在「寄件匣」中則會由 Service Worker 擷取並傳送
不過，您也可以用它來擷取少量資料...
另一個示範！
這是我為「超載網頁載入」建立的離線維基百科示範。後來我已對這項功能增添一點背景同步特效。
你自己試試看請先確認您使用的是 Chrome 49 以上版本，然後：
- 前往任一文章 (可能是 Chrome)。
- 處於離線狀態 (使用飛航模式，或是加入像我一樣可靠的行動服務供應商)。
- 按一下其他文章的連結。
- 您應該已經收到無法載入網頁的通知；如果網頁只載入一段時間，也會出現。
- 同意接收通知。
- 關閉瀏覽器。
- 切換為線上狀態
- 系統會在文章下載、快取及可供瀏覽時通知你！
透過這種模式，使用者只要將手機放在口袋裡，就可以繼續處理生活大小事，當他們想要找東西時，手機就會發出快訊。
權限
我展示的示範使用網頁通知，但需要取得權限，但背景同步處理則不會。
同步處理事件通常會在使用者開啟網站時完成，因此需要使用者授權才會對體驗造成負面影響。因此，我們會限制能夠登錄及觸發同步處理的時間，藉此防止作業遭到濫用。例如：
- 您只能在使用者開啟網站視窗時註冊同步處理事件。
- 事件執行時間設有上限，因此您無法使用它每隔 x 秒就對伺服器進行連線偵測 (ping)、比特幣等形式的連線偵測 (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();
}
如果無法使用服務工作處理程序或背景同步處理功能，請直接發布內容 建立頁面
即便使用者看來連線狀況良好，也建議您使用背景同步功能。這樣一來，即使在資料傳送過程中遇到瀏覽和關閉分頁的情形，也還是能使用背景同步處理功能。
未來
我們的目標是在 2016 年上半年推出 Chrome 穩定版的背景同步處理功能，並開發「定期在背景同步處理」的變化版本。透過定期背景同步處理，您可以要求受時間間隔、電池狀態和網路狀態限制的事件。不過，這就需要使用者授權。此外，這些事件觸發的時間和頻率，也會取決於瀏覽器。換句話說，新聞網站可以每小時要求同步處理一次，但瀏覽器可能會知道您在 07:00 時只讀取該網站，因此同步處理作業每天會在 06:50 啟動。比起一次性同步，這個做法有點進步，但很快就會推出。
小畢正在將 Android 和 iOS 的成功模式帶到網路上，同時仍保持網路優質的服務！