? PWA 系列（一）——Cache API

PWA（Progressive web apps，漸進式 Web 應用）運用現代的 Web API 以及傳統的漸進式增強策略來建立跨平臺 Web 應用程式。

PWA 主要用到了瀏覽器儲存技術、Service Workers 技術、App Shell、Web Push API、以及一系列其他基礎技術。本系列文章將逐一介紹所使用到的這些技術 ☀️

在 PWA 應用中，Cache 快取 API 是關鍵技術之一，主要作用就是快取相應和請求。只有在線上的情況下做好快取，才能夠在離線的情況下直接呼叫快取而不必重新聯網獲取資料。雖然 Cache 是被定義在 SW 標準中的，但並非一定要與 SW 配合使用。 ?

使用 Cache 快取的第一個步驟就是使用 CacheStorage.open(cacheName) 方法開啟一個 Cache 物件，然後再是對具體的快取內容執行 match, add, put, delete, keys 等操作。

API 概述

操作 Cache 又如下幾個方法(見 MDN)：

• cache.match(request, options) 跟 Cache 物件匹配的第一個已經快取的請求。
• cache.matchall(request, options) 跟Cache物件匹配的所有請求組成的陣列。
• cache.add(request) 抓取這個URL, 檢索並把返回的response物件新增到給定的Cache物件.這在功能上等同於呼叫 fetch(), 然後使用 cache.put() 將response新增到cache中.
• cache.addall(requests) 抓取一個URL陣列，檢索並把返回的response物件新增到給定的Cache物件。
• cache.put(request, response) 同時抓取一個請求及其響應，並將其新增到給定的cache。
• cache.delete(request, options) 搜尋key值為request的Cache 條目。如果找到，則刪除該Cache 條目，並且返回一個resolve為true的Promise物件；如果未找到，則返回一個resolve為false的Promise物件。
• cache.keys(request, options) 返回一個Promise物件，resolve的結果是Cache物件key值組成的陣列。

如何使用

看個例子 ?

⚠️ 下面的例子全部在 chrome 除錯工具的 console 皮膚書寫，chrome 自帶 async 因此可直接書寫 await 非同步程式碼

我們先拋開 SW 不談，單單看下 Cache 的幾個 API：

先定義 cacheName，相當於名稱空間，你的快取儲存的地方 ?

const CACHE_VERSION = 1
const CACHE_NAME = 'DEMO' + CACHE_VERSION
複製程式碼

然後呼叫 open 方法開啟一個 Cache 物件：

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
+   cache = await caches.open(CACHE_NAME)
複製程式碼

然後我們通過 Request 建構函式建立一個請求物件：

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
    cache = await caches.open(CACHE_NAME)
+   let r = new Request('https://httpbin.org/image/png')
複製程式碼

首先呼叫 match 方法，因為並沒有快取過這個請求因此返回 undefined:

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
    cache = await caches.open(CACHE_NAME)
    let r = new Request('https://httpbin.org/image/png')
+   await cache.match(r) // undefined
複製程式碼

但一旦我們呼叫 fetch 方法和 put 方法或 add 方法，那麼這個請求和響應資料都會被快取了：

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
    cache = await caches.open(CACHE_NAME)
    let r = new Request('https://httpbin.org/image/png')
-   await cache.match(r)
+   await cache.add(r)
複製程式碼

那麼我們嘗試再次 match，就可以獲得對應的 Response 物件了：

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
    cache = await caches.open(CACHE_NAME)
    let r = new Request('https://httpbin.org/image/png')
    await cache.add(r)
+   const c = await cache.match(r)
+   console.log(c)
複製程式碼

最後我們再看看 Application 中的 Cache Storage，中間就有這麼一條快取資料了：

嘗試呼叫 keys 方法，輸出我們 open 的 Caches 物件：

    const CACHE_VERSION = 1
    const CACHE_NAME = 'DEMO' + CACHE_VERSION
-   cache = await caches.open(CACHE_NAME)
-   let r = new Request('https://httpbin.org/image/png')
-   await cache.add(r)
-   const c = await cache.match(r)
-   console.log(c)
+   await caches.keys()
複製程式碼

如果我們想要刪掉這個 caches 物件，只需呼叫 delete 方法，並傳入 cacheName 即可，返回 true 即表示刪除成功：

-   await caches.keys()
+   await caches.delete(CACHE_NAME)
複製程式碼

Cache API 的主要操作基本是這樣，下篇文章將繼續介紹 PWA 的系列技術——Fetch

參考：

• developer.mozilla.org/zh-CN/docs/…