caching

Cache API是Service Worker规范的一部分，是一种更擅长资源缓存的强大方法。 介紹 檢測是否支持Cache API 初始化快取 將項目添加到快取 cache.add() cache.addAll() 手動抓取並添加 從快取中檢索項目 獲取所有快取中的項目 獲取所有可用的快取 從快取中刪除項目 刪除快取 介紹 Cache API是Service Worker规范的一部分，是一种更擅长资源缓存的强大方法。 它允许您缓存可通过URL访问的资源，这包括资产，网页和HTTP API响应。 它不适用于缓存单个数据块，这是IndexedDB API的任务。 目前在Chrome >= 40，Firefox >=39和Opera >= 27中可用。 Safari和Edge最近开始支持它。 Internet Explorer不支持该API。 在Android上的移动设备支持良好，在Android Webview和Chrome for Android上受支持，而在iOS上仅适用于Opera Mobile和Firefox Mobile用户。 檢測是否支持Cache API Cache API通过caches对象公开。要检测浏览器是否实现了该API，只需使用以下代码检查其是否存在： if ('caches' in window) { // ok } 初始化快取 使用caches.open API，它返回一个准备好使用的快取对象的Promise： caches.open('mycache').then(cache => { // 您可以开始使用快取 }) mycache是我用来标识要初始化的快取的名称。这类似于变量名称，您可以使用任何想要的名称。 如果快取尚不存在，caches.open会创建它。 将項目添加到快取 cache对象公开了两个方法来将项目添加到快取中：add和addAll。 cache.add() add接受一个URL，并在调用时获取该资源并将其缓存起来。 caches.open('mycache').then(cache => { cache.add('/api/todos') }) 为了在获取方面更具控制性，您可以传递一个请求对象而不是字符串，这是Fetch API规范的一部分：...

當資源需要傳輸時，快取是一種可以加快網絡連接速度的技術，因為傳輸的東西越少，效果就越好。 許多資源可能非常龐大，從時間和實際成本（例如在移動設備上）的角度來看都非常昂貴。 HTTP 提供了不同的快取策略，並由瀏覽器使用。 無快取 Expires 首部 條件式 GET 使用 If-Modified-Since 和 Last-Modified 使用 If-None-Match 和 ETag 無快取 首先，Cache-Control 首部可以告訴瀏覽器在檢查 ETag 值（稍後詳述）之前，永遠不要使用快取的資源，如下所示： Cache-Control: no-cache 更嚴格的 no-store 選項告訴瀏覽器（以及所有中介網路設備）不要將資源存儲在其快取中： Cache-Control: no-store 如果 Cache-Control 中含有 max-age 值，則此值用於確定該資源作為快取的有效時間（單位為秒）： Cache-Control: max-age=3600 Expires 首部 當發送 HTTP 請求時，瀏覽器會檢查其快取中是否有該頁面的副本，基於所請求的 URL。 如果有，則檢查該頁面的新鮮度。 如果HTTP 回應 Expires 首部（/http-response-headers/#expires）值小於當前日期和時間，則該頁面被認為是新鮮的。 Expires 首部的格式如下： Expires: Sat, 01 Dec 2018 16:00:00 GMT 條件式 GET 有不同的條件式 GET 方法。它們都基於使用 If-* 請求頭： 使用 If-Modified-Since 和 Last-Modified 使用 If-None-Match 和 ETag 使用 If-Modified-Since 和 Last-Modified 瀏覽器可以發送帶有 If-Modified-Since 首部的請求到服務器，該頭部基於當前快取頁面中獲取的 Last-Modified 首部值。...

了解什麼是CDN以及它的用途 CDN代表內容交付網絡。 它是一組分佈在全球各地並相互連接的伺服器。 在幫助加快網站速度的背景下，它們的工作是分發資源（例如圖像、JavaScript文件、CSS和HTML），以便這些資源可以物理上靠近每個可能想要訪問您網站的用戶，從而改善連接速度並減少延遲。 CDN是最終的快取網絡，也是以最便宜的方式在全球範圍內提供內容。 訪問者將永遠不會訪問存放您文件的實際網絡伺服器，而是會訪問這些CDN伺服器，從而減少負載。 CDN提供： 速度，靠近用戶網絡可以提高速度並減少延遲 冗餘性，如果CDN的某個節點失效，其他節點可以處理流量 與從集中位置提供所有流量相比，帶寬和伺服器功率消耗較低的成本 在CDN節點級別增加額外的保護層的安全性。並非所有CDN都這樣做，但大多數CDN都這樣做，並且還引入了DDoS攻擊保護措施。 CDN從源伺服器獲取原始資源，並且只要源資源沒有更改，它將繼續提供其資源的本地副本。 每個CDN伺服器位於不同的大陸，並且根據CDN的建立方式，在大陸的不同地區也有分佈。 每家大型公司都使用CDN來提供資源，您也可以透過利用像Cloudflare、Amazon CloudFront、Google Cloud CDN、Azure CDN等公司的服務來使用CDN。 CDN也可以直接由您的網站主機集成。例如，我使用的是Netlify，他們集成了自動CDN，使我的網站在世界各地的每個位置都運行快速。

在我使用 Next.js 架構的網站中，需要在構建時從 API 中獲取數據。 我嘗試了多種解決方案，但都沒有成功。經過大量的研究和試誤，我找到了解決方案。 這個解決方案同樣適用於本地開發（localhost）和 Vercel（生產環境）。 以下是情景描述：我有一個存儲“成員”電子郵件的位置，可以是遠程數據庫、Airtable 或其他任何地方。 我只想下載這些數據一次，然後在網站上一直保持可用，直到我觸發下一次構建。 這個成員列表非常靜態，最多一天可能會變化一次。如果這個列表發生變化，我只需要使用 Vercel 的 Deploy Hooks 以編程方式觸發重新部署。 以下是操作計劃。我們將在 .members 文件中創建數據的本地緩存。 在 lib/members.js 文件中的一個函數將負責在第一次調用時從緩存中將數據提取並存儲為 JSON，以後每次調用時從緩存中讀取數據： import fs from 'fs' import path from 'path' function fetchMembersData() { console.log('正在獲取成員數據...') return [{ email: '[[email protected]](/cdn-cgi/l/email-protection)' }, { email: '[[email protected]](/cdn-cgi/l/email-protection)' }] } const MEMBERS\_CACHE\_PATH = path.resolve('.members') export default async function getMembers() { let cachedData try { cachedData = JSON.parse( fs.readFileSync(path.join(\_\_dirname, MEMBERS\_CACHE\_PATH), 'utf8') ) } catch (error) { console....