後臺抓取 API

概念與用法

當 Web 應用程式要求使用者下載大檔案時，這通常會帶來一個問題，即使用者需要保持連線到該頁面才能完成下載。如果他們失去連線，關閉標籤頁或導航離開頁面，下載就會停止。

該 Background Synchronization API 提供了一種方法，使服務工作執行緒能夠延遲處理，直到使用者線上；但是，它不能用於下載大檔案等長時間執行的任務。Background Sync 要求服務工作執行緒保持活動狀態直到 fetch 完成，為了節省電池電量並防止在後臺執行不必要的任務，瀏覽器會在某個時候終止該任務。

Background Fetch API 解決了這個問題。它建立了一種讓 Web 開發者告訴瀏覽器在後臺執行某些 fetch 的方法，例如，當用戶單擊按鈕下載影片檔案時。然後，瀏覽器會以使用者可見的方式執行 fetch，向用戶顯示進度並提供取消下載的方法。下載完成後，瀏覽器將開啟服務工作執行緒，此時您的應用程式可以在需要時處理該響應。

如果使用者在離線狀態下啟動了程序，Background Fetch API 將允許 fetch 繼續進行。一旦他們聯網，它就會開始。如果使用者離線，該過程將暫停，直到使用者再次上線。

介面

BackgroundFetchManager 實驗性

一個對映，其中鍵是後臺 fetch ID，值是 BackgroundFetchRegistration 物件。

BackgroundFetchRegistration 實驗性

表示一個後臺 fetch。

BackgroundFetchRecord 實驗性

表示單個 fetch 請求和響應。

BackgroundFetchEvent 實驗性

用於 backgroundfetchabort 和 backgroundfetchclick 事件的事件型別。

BackgroundFetchUpdateUIEvent 實驗性

用於 backgroundfetchsuccess 和 backgroundfetchfail 事件的事件型別。

其他介面的擴充套件

ServiceWorkerRegistration.backgroundFetch 只讀 實驗性

返回對 BackgroundFetchManager 物件的引用，該物件管理後臺 fetch 操作。

backgroundfetchabort 事件 實驗性

當後臺 fetch 操作被使用者或應用程式取消時觸發。

backgroundfetchclick 事件 實驗性

當用戶單擊後臺 fetch 操作的 UI 時觸發。

backgroundfetchfail 事件 實驗性

當後臺 fetch 操作中的至少一個請求失敗時觸發。

backgroundfetchsuccess 事件 實驗性

當後臺 fetch 操作中的所有請求都成功時觸發。

示例

在使用 Background Fetch 之前，請檢查瀏覽器支援情況。

if (!("BackgroundFetchManager" in self)) {
  // Provide fallback downloading.
}

使用 Background Fetch 需要註冊服務工作執行緒。然後呼叫 backgroundFetch.fetch() 來執行 fetch。這將返回一個解析為 BackgroundFetchRegistration 的 Promise。

後臺 fetch 可能會 fetch 多個檔案。在我們的示例中，fetch 請求了一個 MP3 和一個 JPEG。這使得可以將使用者視為一個專案（例如播客和封面圖片）的檔案包一次性下載。

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

您可以在 Introducing Background Fetch 中找到更多程式碼示例和演示。

規範

瀏覽器相容性

api.BackgroundFetchManager

api.BackgroundFetchRegistration

api.BackgroundFetchRecord

另見

• Introducing Background Fetch
• Background Fetch - HTTP 203