本頁面由 Cloud Translation API 翻譯而成。

透過 Periodic Background Sync API 獲得更豐富的離線體驗

在背景同步處理網頁應用程式的資料，打造更貼近應用程式的使用體驗

Jeff Posnick

Joe Medley

你是否曾發生下列任一情況？

發生問題或無網路連線，乘坐火車或地鐵/地鐵或捷運
你在觀看過多影片後，受到電信業者的限制
居住在某個國家/地區，頻寬卻難以跟上需求

如果有可用的網路，您一定覺得很失望，也瞭解特定平台應用程式在這些情況下通常能發揮更佳成效的原因。平台專用的應用程式可預先擷取最新內容，例如新聞報導或天氣資訊。即使地鐵沒有網路，您仍可閱讀新聞。

定期背景同步處理可讓網頁應用程式在背景定期同步處理資料，使網頁應用程式更貼近平台專屬應用程式的行為。

立即試用

您可以嘗試透過即時示範應用程式定期同步處理背景。使用前，請先確認下列事項：

您使用的是 Chrome 80 以上版本。
您必須先安裝網頁應用程式，才能啟用定期背景同步處理作業。

概念和用法

定期背景同步處理可讓您在啟動漸進式網頁應用程式或 Service Worker 支援的頁面時顯示最新內容。方法是在應用程式或網頁未使用時，於背景下載資料。這樣可防止系統在使用者查看應用程式時，重新整理應用程式的內容。更棒的是，這會導致應用程式在重新整理前顯示內容旋轉圖示。

如未定期進行背景同步處理，網頁應用程式必須使用其他方法下載資料。常見的例子是使用推播通知喚醒服務工作站。使用者遭到「有新資料」等訊息中斷。更新資料基本上會造成副作用。不過，您還是可以選擇使用推播通知來提供真正的重要更新，例如重大即時新聞。

定期背景同步處理與背景同步處理很容易混為一談。雖然名稱相似，但用途不同。此外，背景同步處理最常用來在先前的要求失敗時，將資料重新傳送至伺服器。

確保使用者參與度正確無誤

操作有誤時，定期背景同步處理作業可能會對使用者資源浪費。發布前，Chrome 會經過試用期，確保作業正確無誤。本節說明 Chrome 為了讓這項功能盡可能提供協助的一些設計決策。

Chrome 的第一項設計決定，是網頁應用程式只有在使用者在裝置上安裝並啟動背景同步後，才能使用定期背景同步功能。Chrome 中一般分頁不支援定期背景同步處理。

此外，由於 Chrome 不希望閒置或很少使用網頁應用程式來大量消耗電池或資料，因此 Chrome 設計了定期的背景同步處理，讓開發人員必須為使用者提供價值，才能順利使用這類同步功能。具體來說，Chrome 會使用網站參與度分數 (about://site-engagement/)，判斷特定網頁應用程式是否可定期執行背景同步處理作業以及相關頻率。換句話說，除非參與度分數大於零，否則不會觸發 periodicsync 事件，且值會影響 periodicsync 事件的觸發頻率。這樣可以確保只有在背景同步處理的應用程式是您正在使用的應用程式。

在熱門平台上，定期背景同步處理和現有 API 和做法的相似之處。例如，一次性背景同步處理和推播通知可讓網頁應用程式的邏輯在使用者關閉頁面後延長一點時間 (透過其服務工作站)。在大部分的平台上，使用者安裝的應用程式通常會定期在背景存取網路，以便提供重大更新、預先擷取內容、同步處理資料等改善使用者體驗。同樣地，定期背景同步處理作業也會延長網頁應用程式的邏輯生命週期，一次可能只執行幾分鐘的時間。

如果瀏覽器允許在沒有限制的情況下經常發生此情況，可能會造成某些隱私權疑慮。以下說明 Chrome 如何因應定期背景同步處理而解決這個風險的問題：

背景同步處理活動只會發生在裝置先前已連線的網路上。Chrome 建議只連線至由可靠方經營的網路。
如同所有網際網路通訊，定期背景同步處理會顯示用戶端的 IP 位址、通訊對象的伺服器，以及伺服器名稱。為了降低這種暴露風險，避免應用程式只在前景執行時同步處理，瀏覽器會根據使用者使用該應用程式的頻率，限制應用程式的背景同步處理頻率。如果使用者停止與應用程式互動，系統就會停止觸發定期背景同步處理作業。這與平台專屬應用程式現況相較，

何時可以使用？

使用規則因瀏覽器而異。總而言之，Chrome 對定期背景同步處理作業設下以下要求：

特定使用者參與度分數。
出現先前使用過的網路。

同步處理的時間不受開發人員控制。同步處理頻率必須與應用程式的使用頻率一致。(請注意，平台特定應用程式目前不支援這項功能)。也會追蹤裝置的電源和連線狀態。

何時該使用？

當服務工作站喚醒處理 periodicsync 事件時，您有機會要求資料，但沒有義務。在處理事件時，您應將網路狀況和可用儲存空間納入考量，並在回應時下載不同數量的資料。您可以使用下列資源尋求協助：

權限

安裝 Service Worker 後，請使用權限 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()，在網頁應用程式的設定頁面顯示有效註冊的清單，讓使用者可以啟用或停用特定類型的更新。

回應定期的背景同步處理事件

如要回應定期的背景同步處理事件，請將 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 的參照。

範例

更新內容

下列範例使用定期背景同步功能，下載及快取新聞網站或網誌的最新文章。請注意標記名稱，表示同步處理方式為 '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());
  }
});