Background Synchronization API

概念與用法

後臺同步 API 允許 Web 應用程式將伺服器同步工作延遲到其 Service Worker，以便在裝置離線時稍後處理。用途可能包括在應用程式使用期間無法傳送的請求，在後臺傳送。

例如，電子郵件客戶端應用程式可以允許使用者隨時撰寫和傳送訊息，即使裝置沒有網路連線。應用程式前端只需註冊一個同步請求，當網路再次可用時，Service Worker 就會收到通知並處理同步。

透過 ServiceWorkerRegistration.sync 可以訪問 SyncManager 介面。設定唯一的標籤識別符號來“命名”同步事件，然後可以在 ServiceWorker 指令碼中監聽該事件。收到事件後，就可以執行任何可用功能，例如向伺服器傳送請求。

由於此 API 依賴於 Service Worker，因此此 API 提供的功能僅在安全上下文中可用。

介面

SyncManager 實驗性

在有網路連線的 Service Worker 中註冊要在稍後時間執行的任務。這些任務被稱為後臺同步請求。

SyncEvent 實驗性

表示一個同步事件，該事件被髮送到 ServiceWorker 的 全域性作用域。它提供了一種在裝置具有網路連線時在 Service Worker 中執行任務的方法。

其他介面的擴充套件

對 Service Worker API 的以下補充提供了設定後臺同步的入口點。

ServiceWorkerRegistration.sync 只讀

返回對 SyncManager 介面的引用，用於註冊將在裝置具有網路連線時執行的任務。

sync 事件

每當發生 sync 事件時觸發的事件處理程式。這會在網路可用時立即發生。

示例

以下示例展示瞭如何使用該介面。

請求後臺同步

以下非同步函式從瀏覽上下文中註冊後臺同步。

async function syncMessagesLater() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.sync.register("sync-messages");
  } catch {
    console.log("Background Sync could not be registered!");
  }
}

透過標籤驗證後臺同步

此程式碼檢查是否已註冊帶有給定標籤的後臺同步任務。

navigator.serviceWorker.ready.then((registration) => {
  registration.sync.getTags().then((tags) => {
    if (tags.includes("sync-messages")) {
      console.log("Messages sync already requested");
    }
  });
});

在 Service Worker 中監聽後臺同步

以下示例顯示瞭如何在 Service Worker 中響應後臺同步事件。

self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});

規範

瀏覽器相容性

api.SyncManager

api.ServiceWorkerGlobalScope.sync_event

另見

• 介紹後臺同步