使用JavaScript Cache API的实践 - LogRocket博客

简介

在现代 Web 开发中，由于无法预先确定用户的硬件配置和网络环境，构建能够适应低性能设备或较慢网络连接的 Web 服务显得尤为重要。在服务工作者的工作流程中，缓存机制扮演了重要角色。本文将介绍如何在服务工作者中使用 JavaScript 的 Cache API，以及它作为资源存储的一般机制。

检测 Cache API 的可用性

在现代浏览器中，每个源都拥有一个缓存存储。我们可以通过浏览器的开发者工具检查缓存的存在情况。Cache API 已在所有现代浏览器中实现，但对于较旧的浏览器，可能并不支持。因此，在引用 Cache API 之前，建议先检查其可用性。

以下代码片段可以检测浏览器是否支持 Cache API：

if ('caches' in window) {
    // 在此处安全地插入代码
}

Cache API 的使用方法

Cache API 是一个非常适合缓存 URL 可寻址资源的工具。通过它，我们可以缓存加载应用程序所需的网络资源，例如文件内容、静态资源、API 响应以及网页等。如果应用程序需要处理大量数据，可以优先缓存用户在页面加载时最可能需要的资源。

Cache API 提供了以下几种常见的 CRUD 操作：

1. 创建新缓存
2. 向缓存中添加（或更新）项目
3. 从缓存中检索项目
4. 从缓存中删除项目

接下来，我们将通过代码示例逐一探讨这些操作。

创建新缓存

在将请求-响应对存储到缓存存储中之前，需要先创建一个缓存实例。每个源可以在其缓存存储中创建多个缓存对象。以下代码展示了如何使用 caches.open() 方法创建一个新的缓存对象：

const newCache = await caches.open('new-cache');

上述代码接收缓存名称作为参数。如果具有该名称的缓存已存在，则直接返回该缓存；否则，将创建一个新缓存并返回一个解析为 Cache 对象的 Promise。

向缓存中添加项目

向缓存中添加项目有三种主要方法，每种方法都会返回一个 Promise。以下是它们的具体用法：

1. cache.add()

使用 cache.add() 方法可以简单地将资源添加到缓存中：

newCache.add('/cats.json');

如果需要更多控制，可以使用 Request 对象：

const options = {
    method: "GET",
    headers: new Headers({
        'Content-Type': 'text/html'
    }),
};
newCache.add(new Request('/cats.json', options));

2. cache.addAll()

cache.addAll() 方法与 cache.add() 类似，但它可以同时接受多个请求 URL 或 Request 对象的数组：

const urls = ['pets/cats.json', 'pets/dogs.json'];
newCache.addAll(urls);

3. cache.put()

cache.put() 方法提供了更高的控制灵活性。它接受两个参数：一个是 URL 字符串或 Request 对象，另一个是 Response 对象：

// 缓存从网络获取的响应
newCache.put('./cats.json');

// 创建新的响应并存储
newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}'));

// 从外部地址获取响应并缓存
newCache.put('https://pets/cats.json');

cache.put() 方法允许存储不依赖于 CORS 或特定服务器响应状态的资源。

从缓存中检索项目

在缓存中添加项目后，可以使用 match() 方法检索缓存的响应：

const request = '/cats.json';
const response = await newCache.match(request);

如果 request 是 URL 字符串，它会被转换为 Request 对象。如果找到匹配的条目，match() 方法将返回解析为 Response 对象的 Promise。

此外，可以通过传递一个 options 对象来忽略某些匹配因素，例如：

const options = {
    ignoreVary: true, // 忽略 Headers 的差异
    ignoreMethod: true, // 忽略 HTTP 方法的差异
    ignoreSearch: true // 忽略查询字符串的差异
};

const response = await newCache.match(request, options);

如果需要检索所有匹配的响应，可以使用 matchAll() 方法。

从缓存中删除项目

当某些缓存条目不再需要时，可以使用 delete() 方法将其删除：

const request = '/cats.json';
newCache.delete(request);

同样，可以传递一个 options 对象来指定删除条件。

删除整个缓存

如果需要删除整个缓存，可以通过 caches.delete() 方法实现：

caches.delete('new-cache');

结论

本文详细介绍了 JavaScript Cache API 的使用方法，包括如何创建缓存、添加项目、检索项目以及删除缓存。通过合理使用 Cache API，可以显著提升 Web 应用的性能和用户体验，特别是在开发渐进式 Web 应用程序时。希望本文的内容能为您在实际开发中提供帮助。

原文链接: https://blog.logrocket.com/javascript-cache-api/