在 Service Worker 中caches.put() 和 caches.add()/caches.addAll() 方法他们之间的区别

在 Service Worker 中,caches.put(request, response) 和 caches.add(request)/caches.addAll(requests) 方法都用于将资源添加到缓存中,但它们的使用场景和目的略有不同。

caches.put(request, response),一用在fetch事件当中,由网络请求成功后将资源添加到缓存当中

用途:caches.put 方法用于将一个请求(request)和对应的响应(response)作为一个键值对添加到缓存中。这个方法通常在 fetch 事件中使用,用于在网络请求成功后将资源添加到缓存。

手动添加:是的,caches.put 是手动添加资源到缓存的一种方式。它允许你在捕获到网络请求并从网络获取资源后,将这些资源存储到缓存中,以便后续的请求可以直接从缓存中获取。

// 这里便是网络请求,或当网络请求优先时,便用cache.put()手动将网络获取资源添加到缓存中

// 监听 fetch 事件
self.addEventListener('fetch', (event) => {// 使用 event.respondWith() 来拦截请求并提供响应event.respondWith(// 使用 fetch() 从网络获取资源fetch(event.request).then((response) => {// 检查响应是否成功if (response.status === 200) {// 打开缓存return caches.open('my-cache').then((cache) => {// 将请求和响应克隆一份,因为 response 流只能被消费一次const responseToCache = response.clone();// 将请求和响应添加到缓存中cache.put(event.request, responseToCache);// 返回原始响应return response;});} else {// 如果响应不是200,则直接返回响应return response;}}).catch((error) => {// 如果 fetch 失败,则尝试从缓存中获取资源return caches.match(event.request).then((cachedResponse) => {if (cachedResponse) {return cachedResponse;} else {// 如果缓存中没有资源,抛出错误throw error;}});}));
});

这段代码的工作流程如下:

1、监听 fetch 事件:当页面发起网络请求时,Service Worker 会捕获这个请求。
2、从网络获取资源:使用 fetch() 尝试从网络获取资源。
3、检查响应状态:如果响应状态码为 200(即请求成功),则继续处理。
4、打开缓存:使用 caches.open() 打开一个名为 ‘my-cache’ 的缓存。
5、克隆响应:由于 Response 对象的流只能被消费一次,所以需要克隆一份响应,以便同时将其添加到缓存和返回给页面。
6、将资源添加到缓存:使用 cache.put() 将请求和克隆的响应添加到缓存中。
7、返回响应:返回原始的响应给页面。
8、错误处理:如果 fetch() 失败,尝试从缓存中获取资源。如果缓存中没有相应的资源,则抛出错误。

这样,你就可以在 Service Worker 中从后台请求资源,并将其添加到缓存中,以便在离线或网络不佳的情况下使用。

caches.add(request) / caches.addAll(requests),一般使用在install事件当中预先缓存资源

用途:caches.add 和 caches.addAll 方法用于将一个或多个资源添加到缓存中。caches.add 用于添加单个资源,而 caches.addAll 用于批量添加资源。这些方法通常在 install 事件中使用,用于在 Service Worker 安装时预先缓存资源。

预先缓存:这些方法用于在 Service Worker 安装时预先缓存资源,这样在页面加载时可以直接从缓存中获取这些资源,而不需要等待网络请求。

self.addEventListener('install', (event) => {event.waitUntil(caches.open('my-cache').then((cache) => {return cache.addAll(['/images/image1.jpg','/images/image2.jpg',// 其他资源...]);}));
});

总结:

caches.put(request, response) 通常在 fetch 事件中使用,用于在网络请求成功后将资源添加到缓存。
caches.add(request) 和 caches.addAll(requests) 通常在 install 事件中使用,用于在 Service Worker 安装时预先缓存资源。
这两种方法都是将资源添加到缓存的有效方式,选择哪种方法取决于你的具体需求和缓存策略。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/60530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux学习,man 命令

Linux man 命令是 "manual" 单词的缩写,用于查看各种命令、函数和配置文件的手册页面。Linux man 命令是 Linux 和 Unix 类操作系统中的一个非常有用的工具,用于显示手册页(man pages)。手册页提供了关于系统命令、编程…

python高级之面向对象编程

一、面向过程与面向对象 面向过程和面向对象都是一种编程方式,只不过再设计上有区别。 1、面向过程pop: 举例:孩子上学 1. 妈妈起床 2. 妈妈洗漱 3. 妈妈做饭 4. 妈妈把孩子叫起来 5. 孩子起床 6. 孩子洗漱 7. 孩子吃饭 8. 妈妈给孩子送学校…

TypeORM在Node.js中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 TypeORM在Node.js中的应用 TypeORM在Node.js中的应用 TypeORM在Node.js中的应用 引言 TypeORM 概述 定义与原理 发展历程 TypeO…

shell脚本(1)

免责声明 学习视频来自B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 Shell脚本 建立一个sh脚本…

《DiffusionDet: Diffusion Model for Object Detection》ICCV2023

摘要 本文提出了一种新的框架DiffusionDet,它将目标检测任务表述为从带噪声的边界框到目标边界框的去噪扩散过程(如图一所示)。在训练阶段,目标边界框逐渐扩散到随机分布,模型学习逆转这一加噪过程。在推理阶段&#…

ISAAC SIM踩坑记录--ROS2相机影像发布

其实这个例子官方和大佬NVIDIA Omniverse和Isaac Sim笔记5:Isaac Sim的ROS接口与相机影像、位姿真值发布/保存都已经有详细介绍了,但是都是基于ROS的,现在最新的已经是ROS2,这里把不同的地方简单记录一下。 搭建一个简单的场景&a…

Leetcode 905 Sort Array By Parity

题意:一个数组,把偶数放在前面,奇数放在后面, 并且顺序不影响答案,返回一个满足条件的解就可以 https://leetcode.com/problems/sort-array-by-parity/description/ 题解:对撞双指针,前面的指针遇到奇数停…

outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务

微软邮箱反垃圾已经很强大了非常敏感,自家的域名的邮件都能给扔到垃圾邮箱里,但还是在本地增加了一层垃圾邮箱功能,然后垃圾邮箱并没有提示,导致错过很多通知,本身并没有提供关闭的功能,但微软有个Microsof…

「Py」Python基础篇 之 Python都可以做哪些自动化?

✨博客主页何曾参静谧的博客📌文章专栏「Py」Python程序设计📚全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定…

candence: 原理图生成网表时报错:Duplicate Pin name “xxx“

原理图生成网表时报错:Duplicate Pin name “xxx” 这个错误的意思是,原理图中管脚命名重复 解决这个问题的方法: 1、绘制元件的时候不要用相同的管脚名,比如GND等的,就稍加个后缀做区分2、就是将管脚属性修改为 &qu…

Diffusion Policy——斯坦福机器人UMI所用的扩散策略:从原理到其编码实现(含Diff-Control、ControlNet详解)

前言 本文一开始是属于此文《UMI——斯坦福刷盘机器人:从手持夹持器到动作预测Diffusion Policy(含代码解读)》的第三部分,考虑后Diffusion Policy的重要性很高,加之后续还有一系列基于其的改进工作 故独立成本文,且写的过程中 …

计算机网络学习笔记-3.2介质访问控制

文章目录 介质访问控制静态划分信道 动态分配信道轮询访问介质访问控制随机访问介质访问控制ALOHA协议简介ALOHA协议的工作原理 介质访问控制 介质访问控制(MAC,Medium Access Control),质访问控制的目的是确保多个设备能够高效、…

GitCode光引计划有奖征文大赛

一、活动介绍 GitCode平台汇聚了众多杰出的G-Star项目,它们犹如璀璨星辰,用各自的故事和成就,为后来者照亮前行的道路。我们诚邀广大开发者、项目维护者及爱好者,共同撰写并分享项目在GitCode平台上托管的体验,挖掘平…

深入理解接口测试:实用指南与最佳实践5.0(三)

✨博客主页: https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》:.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏: https://blog.csdn.net/m0_63815035/cat…

Python实现云原生应用的后端开发

目录 1. 云原生后端开发基础2. 云原生架构与核心概念3. Python实现云原生后端应用1. 基本的微服务实现2. 容器化应用:Docker化微服务3. 使用Kubernetes进行部署 4. 云原生后端开发案例与代码实现案例 1:用户认证服务(使用策略模式&#xff09…

使用electron-egg把vue项目在linux Ubuntu环境下打包并安装运行

electron-egg一个入门简单、跨平台、企业级桌面软件开发框架https://www.kaka996.com/electron-egg 跳转地址 1,使用 git下载代码到本地,如果没有git需要进行安装 # gitee git clone https://gitee.com/dromara/electron-egg.git # github git clone https://github.com/dro…

linux中报文从网卡到用户态recv的架子

分享一篇后台服务器性能优化之网络性能优化,希望大家对Linux网络有更深的理解。 曾几何时,一切都是那么简单。网卡很慢,只有一个队列。当数据包到达时,网卡通过DMA复制数据包并发送中断,Linux内核收集这些数据包并完成…

2019年下半年试题二:论软件系统架构评估及其应用

论文库链接:系统架构设计师论文 论文题目 对于软件系统,尤其是大规模复杂软件系统而言,软件系统架构对于确保最终系统的质量具有十分重要的意义。在系统架构设计结束后,为保证架构设计的合理性、完整性和针对性,保证系…

网络安全-蓝队基础

声明 学习视频来自 B 站UP主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 ✍🏻作者简介:致…

集群策略选择vs生产需求点(负载/可用性、灾备/安全性)

• 集群策略分类 负载均衡靠: -主从。读写分离。 灾备靠: -同步( 主备,一定带同步功能。主从,一定带同步功能。主主,一定带同步功能。由于主备、主主不常用,同步基本等价于主从。)…