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

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

在背景同步處理網頁應用程式的資料，提供更類似應用程式的體驗

Jeff Posnick

Joe Medley

你是否遇過下列任一情況？

搭火車或地鐵，在網路不穩或無法連線的情況下搭乘
因觀看過多影片而受到電信業者限制
居住在頻寬不足的國家/地區，無法滿足需求

如果是的話我想知道為何特定平台專用應用程式能帶來更好的成效滿足這些需求特定平台的應用程式可以擷取最新內容，例如新聞報導或天氣資訊即使捷運沒有網路，您還是能讀取新聞。

定期背景同步功能可讓網頁應用程式定期同步處理資料，使得網頁應用程式更接近特定平台的行為應用程式。

立即試用

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

你使用的是 Chrome 80 以上版本。
個人中心安裝再啟用定期背景同步功能。

概念和用法

定期在背景同步處理功能，可讓漸進式網頁應用程式顯示最新內容或由 Service Worker 支援的頁面啟動。方法是從螢幕或頁面處於閒置狀態。這樣可以防止應用程式的內容。更棒的是，防止應用程式在重新整理前顯示內容旋轉圖示。

如果沒有定期在背景同步處理，網頁應用程式必須採用下載資料。常見的例子是使用推播通知喚醒服務工作站使用者遭到「有新的資料」等訊息中斷。資料更新基本上是副作用。您還是可以選擇透過推播通知取得真正重要的更新即時新聞

定期在背景同步處理容易與背景同步處理功能混為一談。雖然他們名稱相似，用途不同。除了其他功能背景同步處理通常用於在系統執行工作階段時，用於將資料重新傳送到伺服器，先前的要求失敗

正確吸引使用者互動

如未正確完成，定期背景同步處理可能會浪費使用者再複習一下，機構節點是所有 Google Cloud Platform 資源的根節點在發布之前，Chrome 會先試想一下輸入的內容正確無誤本節說明 Chrome 的設計決策：盡可能提高這項功能的實用性

Chrome 的第一項設計決策是網頁應用程式只能在而且在背景同步處理的情況下以另一個應用程式的形式啟動這個容器無法定期在背景同步處理使用 Chrome 的一般分頁

此外，Chrome 不要在無意間或故意使用網頁應用程式耗電量或數據用量，Chrome 設計定期在背景同步處理，以便就必須為使用者提供價值來賺取收益。具體來說 Chrome 目前採用網站參與度分數 (about://site-engagement/) 用於判斷是否會定期進行背景同步作業，以及多久進行一次背景同步作業特定網頁應用程式的值區也就是說，除非有互動，否則系統完全不會觸發 periodicsync 事件分數大於零， periodicsync 事件。這可確保只有應用程式會在就是你經常使用的背景

定期在背景同步處理與現有 API 的部分相似之處，幾個最佳做法例如一次性背景同步處理推播通知可讓網頁應用程式的邏輯更長的時間 (透過 Service Worker)。在大多數平台上一般使用者會安裝的應用程式，在需要時為重要更新提供更優質的使用者體驗預先擷取內容、同步處理資料等同樣地，定期在背景同步處理延長網頁應用程式邏輯的生命週期，但可能會有幾分鐘

如果瀏覽器經常允許這麼做，且不受限制，可能會導致某些隱私權疑慮Chrome 採取的策略定期背景同步處理的風險：

背景同步處理活動只會在裝置搭載的網路上執行與先前連線過的網路通訊Chrome 建議只連線至值得信賴的一方
如同所有網際網路通訊，在背景執行定期同步作業通訊端的用戶端位址、通訊所在的伺服器，以及伺服器為盡可能降低曝光量，可大致減少只有應用程式的情況若是在前景執行同步處理，瀏覽器會限制使用者系統就會根據使用者使用該應用程式的頻率，在背景同步處理應用程式。如果使用者停止經常與應用程式互動，定期背景同步處理就會停止觸發與各平台現狀相比，這是淨化的淨利應用程式。

何時可以使用？

使用規則因瀏覽器而異。總結來說，Chrome 在定期背景同步處理的要求如下：

特定使用者參與度分數。
存在先前使用的網路。

同步處理時間不受開發人員控制。同步處理頻率應與應用程式的使用頻率一致。(請注意，目前並不會針對個別平台的應用程式提供這項機制)。它會佔用裝置的電源存取狀態

使用時機

當 Service Worker 喚醒以處理 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 事件 Service Worker 的處理常式。傳遞給該物件的 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());
  }
});