在背景同步處理網路應用程式的資料，打造更接近應用程式的體驗
你是否曾遇到下列任何情況？
- 搭乘火車或地鐵時，網路連線不穩定或沒有網路
- 觀看太多影片後，遭到電信業者限制
- 居住在頻寬難以滿足需求的國家/地區
如果有的話，您一定曾感到沮喪，因為在網路上完成某些事情時，往往會遇到困難，並想知道為什麼平台專屬應用程式在這些情況下通常表現更好。平台專屬應用程式可以預先擷取最新內容，例如新聞報導或天氣資訊。即使地鐵沒有網路，你還是可以閱讀新聞。
網頁應用程式可透過定期背景同步處理功能，定期在背景同步處理資料，讓網頁應用程式更接近平台專屬應用程式的行為。
試試看
「開發人員工具提示」是使用 Periodic Background Sync API 的 PWA。DevTools Tips PWA 每天都會擷取新的開發人員工具提示並儲存在快取中，因此使用者下次開啟應用程式時，無論是否連線都能存取提示。請務必安裝應用程式，才能使用 Periodic Background Sync API。
前往 GitHub 上的原始碼。具體來說，應用程式會在 registerPeriodicSync() 函式中註冊定期同步。應用程式會在服務工作人員程式碼中監聽 periodicsync 事件。
概念與用途
透過定期背景同步處理，您可以在啟動漸進式網頁應用程式或服務工作人員支援的頁面時，顯示最新內容。當應用程式或頁面未使用時，這項功能會在背景下載資料。這樣一來，應用程式啟動後，就不會在使用者觀看內容時重新整理。更棒的是，這項功能可防止應用程式在重新整理前顯示內容旋轉圖示。
如果沒有定期背景同步處理，網頁應用程式就必須使用其他方法下載資料。常見的例子是使用推播通知喚醒服務工作人員。使用者會收到「有新資料可用」等訊息，導致作業中斷。更新資料基本上是副作用。您仍可選擇使用推播通知接收真正重要的最新消息，例如重大突發新聞。
定期背景同步處理可能會與背景同步處理混淆。雖然名稱相似，但用途不同。除了其他用途外，背景同步作業最常用於在先前的要求失敗時，將資料重新傳送至伺服器。
正確掌握使用者參與度
如果處理不當，定期背景同步處理可能會浪費使用者資源。Chrome 會先進行試用期，確保功能正常運作，再正式發布。本節將說明 Chrome 做出的一些設計決策，盡可能提升這項功能的實用性。
Chrome 的第一個設計決策是，網頁應用程式只能在使用者將其安裝到裝置上，並以獨立應用程式的形式啟動後，才能使用週期性背景同步。Chrome 一般分頁不支援定期背景同步處理。
此外，Chrome 不希望未使用的網頁應用程式無故耗用電池或資料，因此設計了定期背景同步功能，開發人員必須為使用者提供價值，才能獲得這項功能。具體來說，Chrome 會使用網站參與度分數 (about://site-engagement/) 判斷特定網頁應用程式是否可以定期進行背景同步，以及同步頻率。換句話說，除非參與度分數大於零，否則系統完全不會觸發 periodicsync 事件，而參與度分數值會影響 periodicsync 事件的觸發頻率。這樣一來，只有您正在使用的應用程式會在背景同步處理。
定期背景同步處理與熱門平台上的現有 API 和做法有些相似。舉例來說，使用者關閉網頁後，一次性背景同步處理和推播通知可讓網頁應用程式的邏輯 (透過服務工作人員) 繼續運作一段時間。在大多數平台上，使用者通常會安裝應用程式，這些應用程式會定期在背景存取網路，以提供更優質的使用者體驗，例如進行重大更新、預先擷取內容及同步處理資料。同樣地，週期性背景同步也會延長網頁應用程式的邏輯生命週期，讓應用程式定期執行幾分鐘。
如果瀏覽器允許這種情況經常發生，且沒有任何限制，可能會導致一些隱私權疑慮。以下說明 Chrome 如何因應定期背景同步處理的這項風險：
- 背景同步活動只會在裝置先前連線的網路上進行。Chrome 建議只連線至由可信賴的第三方經營的網路。
- 與所有網際網路通訊一樣，週期性背景同步會顯示用戶端的 IP 位址、通訊對象伺服器，以及伺服器名稱。為減少這類曝光，讓曝光次數與應用程式只在前景同步處理時的曝光次數大致相同，瀏覽器會限制應用程式背景同步的頻率，使其與使用者使用該應用程式的頻率一致。如果使用者停止頻繁與應用程式互動，系統就會停止觸發定期背景同步。相較於平台專用應用程式的現狀，這是一項重大進展。
使用時機
使用規則會因瀏覽器而異。如先前所述，Chrome 對定期背景同步設有下列規定：
- 特定使用者參與度分數。
- 先前使用過的網路。
開發人員無法控制同步處理的時間。同步頻率會根據應用程式的使用頻率調整。(請注意，平台專屬應用程式不會執行這項操作)。也會將裝置的電源和連線狀態納入考量。
使用時機
當 Service Worker 喚醒以處理 periodicsync 事件時，您有機會要求資料，但並非義務。處理事件時，您應考量網路狀況和可用儲存空間，並下載不同量的資料。您可以參考下列資源：
權限
安裝 Service Worker 後，請使用 Permissions API 查詢 periodic-background-sync。您可以從視窗或 Service Worker 環境執行這項操作。
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
註冊定期同步
如先前所述，定期背景同步處理需要 Service Worker。使用 ServiceWorkerRegistration.periodicSync 擷取 PeriodicSyncManager，然後對其呼叫 register()。註冊時需要標記和最短同步間隔 (minInterval)。標記會識別已註冊的同步，因此可以註冊多個同步。在以下範例中，標記名稱為 'content-sync'，而 minInterval 為一天。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
驗證註冊
呼叫 periodicSync.getTags() 即可擷取註冊標記陣列。以下範例使用標記名稱，確認快取更新是否有效，避免再次更新。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
您也可以使用 getTags() 在網頁應用程式的設定頁面中顯示有效註冊清單，讓使用者啟用或停用特定類型的更新。
回應定期背景同步事件
如要回應定期背景同步事件，請在 Service Worker 中新增 periodicsync 事件處理常式。傳遞給該物件的 event 物件會包含與註冊時使用的值相符的 tag 參數。舉例來說，如果已註冊名為 'content-sync' 的週期性背景同步，則 event.tag 會是 'content-sync'。
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
取消註冊同步
如要結束已註冊的同步作業，請呼叫 periodicSync.unregister()，並提供要取消註冊的同步作業名稱。
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
介面
以下快速說明 Periodic Background Sync API 提供的介面。
PeriodicSyncEvent. 在瀏覽器選擇的時間傳遞至ServiceWorkerGlobalScope.onperiodicsync事件處理常式。PeriodicSyncManager。註冊及取消註冊定期同步，並為已註冊的同步提供標記。從 ServiceWorkerRegistration.periodicSync 屬性擷取這個類別的例項。ServiceWorkerGlobalScope.onperiodicsync。註冊處理常式，接收PeriodicSyncEvent。ServiceWorkerRegistration.periodicSync。傳回PeriodicSyncManager的參照。
範例
以下各節將舉例說明如何使用 Periodic Background Sync API。
更新內容
以下範例使用定期背景同步處理，為新聞網站或網誌下載並快取最新文章。請注意標記名稱，這會指出同步類型 ('update-articles')。對 updateArticles() 的呼叫會包裝在 event.waitUntil() 中，因此 Service Worker 不會在文章下載及儲存完畢前終止。
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
在現有網頁應用程式中新增定期背景同步處理功能
這組變更是將定期背景同步功能新增至現有 PWA 時的必要步驟。這個範例包含許多實用的記錄陳述式，可說明網頁應用程式中週期性背景同步的狀態。
對定期背景同步 API 進行偵錯
在本機測試時，取得週期性背景同步處理的端對端檢視畫面可能是一項挑戰。在偵錯網頁應用程式的行為時，瞭解有效註冊、約略同步間隔和過去同步事件的記錄，可提供實用的背景資訊。幸好，您可以使用 Chrome 開發人員工具的實驗功能，找到所有這類資訊。
記錄當地活動
開發人員工具的「定期背景同步」部分，會依據定期背景同步生命週期的重要事件整理資訊，包括註冊同步、執行背景同步，以及取消註冊。如要取得這些事件的相關資訊，請按一下「開始錄製」。
錄製期間，DevTools 中會顯示與事件相應的項目，並記錄每個事件的內容和中繼資料。
啟用記錄功能後，最多可保留三天，讓開發人員工具擷取可能發生的背景同步處理本機偵錯資訊，即使是幾小時後發生的情況也一樣。
模擬事件
雖然記錄背景活動很有幫助，但有時您會想立即測試 periodicsync 處理常式，而不必等待事件以正常頻率觸發。
您可以使用 Chrome 開發人員工具的「應用程式」面板中的「服務工作人員」部分，您可以在「定期同步處理」欄位中提供要使用的事件標記，並視需要多次觸發。
使用開發人員工具介面
您會在開發人員工具的「Application」面板中看到「Periodic Background Sync」部分。
