BackgroundFetchManager：fetch() 方法

語法

fetch(id, requests)
fetch(id, requests, options)

引數

id

一個開發者定義的識別符號，可以傳遞給其他方法以檢索此操作的 BackgroundFetchRegistration。

requests

一個 RequestInfo 物件或一個 RequestInfo 物件陣列。

每個 RequestInfo 物件都是一個 Request 物件或一個字串，它將作為 input 引數傳遞給 Request() 建構函式。

options 可選

一個用於自定義瀏覽器向用戶顯示的獲取進度對話方塊的物件。它具有以下屬性：

title 可選

一個將用作進度對話方塊標題的字串。

icons 可選

一個物件陣列，每個物件代表瀏覽器可能用於進度對話方塊的圖示。每個物件都具有以下屬性：

src

一個代表圖示檔案 URL 的字串。

sizes 可選

一個表示影像尺寸的字串，使用與 <link> 元素 sizes 屬性相同的語法。

type 可選

一個代表圖示 MIME 型別的字串。

label 可選

一個代表圖示可訪問名稱的字串。

downloadTotal 可選

一個表示獲取操作估計總下載大小（以位元組為單位）的數字。這用於向用戶顯示下載的大小以及下載進度。

一旦總下載大小超過 downloadTotal，獲取就會被中止。

返回值

一個 Promise，它將解析為一個 BackgroundFetchRegistration 物件。

異常

TypeError

如果在沒有提供請求、請求的模式是 no-cors、沒有存在 service worker、已存在具有請求的 id 的請求，或請求失敗時丟擲。

AbortError DOMException

指示獲取已被中止。

NotAllowedError DOMException

指示使用者尚未獲得進行後臺獲取的許可權。

QuotaExceededError

如果因超出瀏覽器 儲存配額 而導致儲存請求失敗時丟擲。

示例

以下示例展示瞭如何使用 fetch() 來啟動後臺獲取操作。在使用活動的 service worker 時，使用 ServiceWorkerRegistration.backgroundFetch 屬性來訪問 BackgroundFetchManager 物件並呼叫其 fetch() 方法。

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",
          label: "Downloading a show",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

規範

瀏覽器相容性