放送中

漸進式網路應用程式的重要特點是可靠性，即使網路連線品質不佳，也能快速載入資產，讓使用者保持參與度並立即獲得回饋。這怎麼可能？這要歸功於 Service Worker fetch 事件。

擷取事件

透過 fetch 事件，我們可以攔截 PWA 在 Service Worker 範圍內發出的每個網路要求，包括同源和跨來源要求。除了導覽和資產要求，從已安裝的 Service Worker 擷取資料，也能讓網站在首次載入後，無須發出網路呼叫即可算繪網頁瀏覽。

fetch 處理常式會接收應用程式的所有要求，包括網址和 HTTP 標頭，並讓應用程式開發人員決定如何處理這些要求。

Service Worker 可以將要求轉送至網路、使用先前快取的回應來回應，或建立新的回應。一切由你決定。 簡單範例如下：

self.addEventListener("fetch", event => {
    console.log(`URL requested: ${event.request.url}`);
});

回覆要求

當服務工作人員收到要求時，您可以選擇忽略要求 (讓要求傳送至網路)，也可以選擇回應要求。在 Service Worker 中回應要求，即可選擇要將哪些內容傳回 PWA，以及傳回方式，即使使用者處於離線狀態也沒問題。

如要回應傳入的要求，請在 fetch 事件處理常式中呼叫 event.respondWith()，如下所示：

// fetch event handler in your service worker file
self.addEventListener("fetch", event => {
    const response = .... // a response or a Promise of response
    event.respondWith(response);
});

您必須同步呼叫 respondWith()，並傳回 Response 物件。不過，您無法在擷取事件處理常式完成後呼叫 respondWith()，例如在非同步呼叫中。如需等待完整的回應，可以將 Promise 傳遞至 respondWith()，並以 Response 解析。

建立回覆

有了 Fetch API，您可以在 JavaScript 程式碼中建立 HTTP 回應，這些回覆可使用 Cache Storage API 進行快取，並以來自網頁伺服器的形式傳回。

如要建立回應，請建立新的 Response 物件，並設定其內文和選項，例如狀態和標頭：

const simpleResponse = new Response("Body of the HTTP response");

const options = {
   status: 200,
   headers: {
    'Content-type': 'text/html'
   }
};
const htmlResponse = new Response("<b>HTML</b> content", options)

從快取回應

您已瞭解如何從 Service Worker 提供 HTTP 回應，現在可以使用 Caching Storage 介面，將資產儲存在裝置上。

您可以使用快取儲存空間 API 檢查快取中是否有 PWA 傳送的要求，如果有的話，就以該要求回應 respondWith()。 如要這麼做，請先在快取中搜尋。頂層 caches 介面提供的 match() 函式會搜尋來源中的所有商店，或搜尋單一開啟的快取物件。

match() 函式會接收 HTTP 要求或網址做為引數，並傳回 Promise，該 Promise 會以與對應鍵相關聯的 Response 解決。

// Global search on all caches in the current origin
caches.match(urlOrRequest).then(response => {
   console.log(response ? response : "It's not in the cache"