使用JavaScript缓存API

2020年12月30日11:16:59 发表评论 38 次浏览

本文概述

介绍

缓存API提供了一种用于在运行时存储网络请求并检索其相应响应的机制。它可以在没有Internet连接(或不稳定的连接)的情况下使用, 这使其成为构建渐进式Web应用程序(完全优化的Web应用程序, 可以像本机应用程序一样脱机工作)的组成部分。

由于无法在开发时预先确定用户群, 因此构建Web服务非常重要, 因为这些Web服务可以由可能没有最佳硬件或Internet连接速度较慢的众多用户访问。

创建了渐进式Web应用程序以确保Web服务可在所有设备上正常工作。在移动设备上, 它们旨在提供接近于本机应用程序的用户体验。引擎盖下使用PWA服务人员为了实现理想的行为, 他们利用Cache API对网络资源进行额外控制。

Google Web基础知识页描述服务工作者是这样的:

服务工作者是一个脚本, 你的浏览器在后台运行, 与网页分开, 为不需要网页或用户交互的功能打开了大门。今天, 它们已经包含了诸如推送通知和后台同步之类的功能。将来, 服务人员可能会支持其他功能, 例如定期同步或地理围栏。服务工作者的一项核心功能是能够拦截和处理网络请求, 包括以编程方式管理响应缓存。

我们可以看到缓存可以在服务工作者的工作流程中发挥重要作用。本文介绍了如何在服务工作者中使用Cache API, 以及如何将其用作资源存储的一般机制。

本教程中的所有代码都可以在此找到资料库, 请随意分叉或发送PR。

检测缓存API

在现代浏览器中, 每个来源都有一个缓存存储, 我们可以通过打开浏览器开发人员工具进行检查:

  • 在Chrome上:应用>快取>缓存存储
  • 在Firefox上:存储>快取

专业提示:在Chrome浏览器中, 你可以访问chrome:// inspect /#service-workers并单击"检查"选项(直接在任何已打开的标签的原点下方)以查看有关服务工作者行为的日志记录语句.js脚本。

Cache API在所有现代浏览器中均可用:

  • 边> = 17
  • 歌剧> = 27
  • Safari> = 11.1
  • Firefox> = 39
  • 铬> = 40
  • iOS Safari = 11.4>
  • UC浏览器11.8> =
  • 适用于Android的Chrome> = 67

由于较旧的浏览器可能不支持该API, 因此最好在尝试引用该API之前先检查其可用性。的快取该属性在窗口对象, 我们可以使用以下代码段检查它是否已在浏览器中实现:

if ('caches' in window){
    // you can safely insert your snippet here
}

用法

缓存API是缓存URL可寻址资源的绝佳选择, 也就是说, 当你使用加载应用程序所需的网络资源时, 应使用缓存API。如果你的应用程序处理大量数据, 则可以缓存用户最有可能在页面加载时需要的数据。这些资源可能包括基于文件的内容, 资产, API响应和网页。

为了存储大量结构化数据(包括文件/ blob), 理想情况下, 应使用索引数据库API。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用JavaScript缓存API1

缓存API附带了几种方法来执行以下(CRUD)操作:

  1. 创建一个新的缓存
  2. 将项目添加(更新)到缓存
  3. 从缓存中检索项目
  4. 从缓存中删除项目

让我们探讨一些在代码中使用这些方法的方法。

创建一个新的缓存

在我们开始存储之前请求-响应配对到我们的缓存存储中, 我们需要创建一个缓存实例。每个起点在其缓存存储中可以具有多个缓存对象。我们可以使用创建一个新的缓存对象caches.open()方法:

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

上面的代码段将缓存的名称作为单个参数接收, 然后继续使用该名称创建缓存。的caches.open()方法首先检查具有该名称的缓存是否已经存在。如果不是, 它将创建它并返回一个诺言可以解决快取目的。

代码段执行后, 我们现在将拥有一个新的缓存对象, 该对象可以使用以下名称进行引用新缓存.

将项目添加到缓存

有三种主要方法可以将项目添加到缓存中:

  1. 加入所有

所有这些方法都返回一个诺言, 现在让我们逐一介绍一下它们, 看看它们之间有何不同。

Cache.add()

第一种方法cache.add(), 采用单个参数, 该参数可以是URL字符串文字或请求目的。致电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))

注意:如果提取失败, 并且返回错误响应, 则缓存中将不存储任何内容, 并且Promise会拒绝。

Cache.addAll()

此方法与cache.add()方法, 除了它采用请求URL字符串文字数组或请求缓存所有资源后, 对象将返回一个promise:

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

注意:如果未缓存请求数组中的一项或多项, 则Promise会拒绝。同样, 在缓存阵列中的项目时, 新条目将覆盖任何匹配的现有条目。

Cache.put()

的缓存输出该方法的工作原理与其他方法大不相同, 因为它允许额外的控制层。的放()方法有两个参数, 第一个可以是URL字符串文字或请求对象, 第二个是响应通过网络或在代码中生成的:

// Retrieve cats.json and cache the response
newCache.put('./cats.json')

// Create a new entry for cats.json and store the generated response
newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}'))

// Fetch a response from an external address and create a new entry for cats.json
newCache.put('https://pets/cats.json');

的放方法允许你进行额外的控制, 因为它可以存储不依赖于CORS的响应或依赖于服务器响应状态代码的其他响应。

专家提示:前两个方法add()和addAll()取决于从中请求数据的服务器上CORS的状态。如果CORS检查失败, 则不会缓存任何内容, 并且Promise会拒绝。另一方面, 使用put()可以设置内部响应, 因此可以给你额外的信心。

从缓存中检索项目

在将某些项目添加到缓存后, 我们需要能够在运行时检索它们。我们可以使用比赛()检索我们缓存的响应的方法:

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

在上面的代码中, 我们传入了请求变量比赛方法, 如果请求变数是网址字串, 会转换成请求对象并用作参数。的比赛方法将返回一个诺言解析为响应找到匹配条目的对象。

浏览器使用不同的因素来确定是否两个或多个要求比赛。一种请求可能具有与另一个URL相同的URL, 但使用不同的HTTP方法。浏览器认为两个这样的请求是不同的。

使用时比赛方法, 我们还可以将options对象作为第二个参数传递。该对象的键值对告诉比赛匹配请求时忽略特定因素:

// create an options object
const options = {
        ignoreVary: true, // ignore differences in Headers
        ignoreMethod: true, // ignore differences in HTTP methods
        ignoreSearch: true // ignore differences in query strings
    }

// then we pass it in here
const response = await newCache.match(request, options);

如果一个以上的缓存项匹配, 则返回最旧的一项。如果我们打算检索所有匹配的响应, 则可以使用matchAll()方法。

从缓存中删除项目

我们可能不再需要缓存条目并希望将其删除。我们可以使用删除()方法:

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

在上面的代码中, 我们在请求变量中保存了一个URL字符串, 但我们也可以传入一个请求反对删除方法。如果我们有多个匹配条目, 我们可以传递类似的选项Object就像我们对比赛方法。

删除缓存

最后, 我们可以通过调用删除()方法的caches属性窗口目的。让我们在下面的代码段中删除缓存:

// delete an existing cache
caches.delete('new-cache');

注意:删除缓存后, 如果实际上已删除缓存, 则delete()方法将返回Promise, 如果出现问题或缓存不存在, 则返回false。

总结

在本文中, 我们浏览了Cache API, 并讨论了其对渐进式Web应用程序开发的有用性。我们还探索了其CRUD方法, 并了解了如何轻松检索响应和存储请求。

注意:出于安全原因, 缓存绑定到当前来源, 其他来源无法访问为其他来源设置的缓存。

本教程中的所有代码都可以在此找到资料库, 请随意分叉或发送PR。

日志火箭:通过了解上下文更容易调试JavaScript错误

调试代码始终是一项繁琐的任务。但是, 你越了解错误, 就越容易修复它们。

日志火箭使你能够以新颖独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与你的JavaScript前端的互动, 从而使你能够准确找出导致错误的用户行为。

LogRocket仪表板免费试用横幅

notlogy记录控制台日志, 页面加载时间, 堆栈跟踪, 缓慢的网络请求/响应(带有标题+正文), 浏览器元数据和自定义日志。了解你的JavaScript代码的影响再简单不过了!

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: