禁用HTTP缓存是否会影响Service Worker缓存？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Service Worker和HTTP缓存

很多人，包括我自己，初看Service Worker多一个Cache Storage的时候，就感觉跟HTTP长缓存没什么区别。...例如大家讲的最多的Service Worker能让网页离线使用，但熟悉HTTP缓存的朋友，会发现，把整站所有资源设置为长缓存（不带校验），也可以实现离线使用。...那么，Service Worker在缓存方面和HTTP缓存比较，有什么好处呢？...Service worker除了针对PWA（推送和消息）以外，对普通web来说，在缓存方面，能比http缓存带来一些额外的好处。可以理解为，SW就是浏览器把缓存管理开放一层接口给开发者。...例如校验html/JS是否被运营商劫持？js文件到了UI进程执行后，就无法删除恶意代码，而在SW中，我们可以当作文本一样，轻松解决。当然，在HTTPS环境下出现劫持的概率是极低的。

1.8K5 0

Service Worker离线缓存实战

背景介绍最近实战了 Service Worker（以下简称“sw”）来进行网站缓存，以实现离线状态下，网站仍然可以正常使用。...：span>li> service worker是否注册成功：span>li>...ul> script> body> html> 注册 Service Worker 我们通过script.js来判断浏览器是否支持...因为 serviceWorker 也会浪费资源和网络 IO，不能因为它而影响正常情况下（网络信号 ok 的情况）的使用体验。.../image.png"]); }) ); }); 更新 Service Worker 代码对于缓存的更新，可以通过定义版本号的方式来标识，例如上方代码中的 VERSION 变量

2.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Service Worker 缓存文件处理

交代背景前段时间升级了一波Google Chrome，发现我的JulyNovel站点Ctrl+F5也刷新不了，后来发现是新的Chrome已经支持Service Worker，而我的JulyNovel也满足...之前加载过的css和js都被缓存了。所以这里是有点小问题的，毕竟我服务器更新了，你service worker 没给我更新缓存，就说不过去了。...Service Worker生命周期的意义 1.实现离线优先（这个不谈，没网也能搞事？这妥妥的Native的能力啊） 2.允许新服务工作线程自行做好运行准备，无需中断当前的服务工作线程。...更新service worker 这里就是解决问题的关键了。...首先，会触发更新的情况如下 1.导航到一个作用域内的页面。 2.更新 push 和 sync 等功能事件，除非在前 24 小时内进行了更新检查。

1.9K3 0

Hive语法内关于With as 的数据是否会缓存到内存分析

在关系型数据库中，对于UNION ALL，使用WITH AS定义了一个UNION ALL语句，当该片断被调用2次以上，优化器会自动将该WITH AS短语所获取的数据放入一个Temp表中。 ...Hive在后面的版本也引入了WITH AS 这个公用表表达式（CTE）语法糖，但是对于后面语句的多次引用是否会继续将该WITH AS短语所获取的数据放入一个Temp表中呢？...STAGE DEPENDENCIES得知而且在Stage-2依赖于Stage-1和Stage-3，且Stage-2中UNOIN操作对表的扫描操作（TableScan）并未进行数据过滤，Stage1-3影响的数据行数均为

1.9K1 0

《前端缓存系统构建：浏览器与Service Worker的自动清理与命中率优化策略》

基于浏览器原生缓存机制（如HTTP缓存、Cache Storage）与Service Worker构建的前端缓存体系，面临的核心挑战在于如何在“缓存有效性”与“资源新鲜度”之间找到动态平衡——既要避免缓存冗余导致的存储空间浪费...浏览器提供的缓存机制各有特性：HTTP缓存依赖响应头字段（如Cache-Control、Expires）自动生效，适合静态资源却难以主动干预；Cache Storage由Service Worker直接操控...更精细的做法是结合用户行为规律，在夜间或用户离线时执行深度清理，例如新闻应用可在凌晨自动清理前一天的文章详情页缓存，仅保留头条新闻与用户收藏内容，既释放存储空间，又不影响核心体验。...“主动通知+协商验证”处理，网站发布新版本时，Service Worker发送消息通知客户端清理旧缓存，或请求时携带ETag与服务器确认资源是否更新，避免旧内容干扰用户。...浏览器缓存机制与Service Worker提供了工具支撑，但真正决定系统效能的，是如何在“离线可用”与“内容新鲜”“存储空间”与“加载速度”之间找到动态平衡。

5241 0

H5 加了 Service Worker 反而更新不出来：缓存策略与版本激活的正确顺序

给 H5 轻应用加离线能力、做资源缓存，本来是为了让二次打开更快、弱网下也能用，但很多团队第一次接入 Service Worker 都会遇到同一个反直觉问题：代码明明发布了，用户看到的却还是旧页面，甚至要手动清缓存...问题几乎都不在缓存本身，而在 Service Worker 的生命周期和版本激活顺序没处理对。...一、先理解：为什么会"卡在旧版本"Service Worker（以下简称 SW）有自己独立的生命周期，它和页面是分离的：浏览器发现 SW 文件变化，进入 install 阶段预缓存新资源；新 SW 安装完成后不会立刻接管页面...是否自动 reload 取决于业务：后台型、表单型页面不宜强制刷新（会丢掉用户正在填的内容），更适合弹一个"有新版本，点击刷新"的轻提示，由用户决定。...复盘清单SW 文件本身是否设置为不缓存。HTML 入口是否用了网络优先而非缓存优先。缓存是否带版本号、activate 是否清理旧版本。

1341 0

「Google」AMP缓存显示发布商地址百度的MIP是否也会这样？

AMP缓存显示发布商地址时本文总计约 500 个字左右，需要花 2 分钟以上仔细阅读。...例如，Google不会显示http://google.com/amp网址，而会显示发布商的真实网址 - 在本例中为foodnetwork.com。...从编写本文时的Beta版频道开始，您可以在chrome://标志下启用实验性的“Signed HTTP Exchange”标记，以使用Web包装的签名交换。...如果有签名的交易所可用，Google链接不会链接到Google的AMP缓存中提供的AMP页面，而是链接到Google缓存中提供的已签名的AMP页面。...不知道百度MIP是否也会跟着Google的脚步，对MIP显示网址也进行优化。

9044 0

一次因浏览器缓存导致的生产环境事故：前端线上 bug 复盘

、Last-Modified 对比隐身模式、禁用缓存、正常模式三种行为，确认缓存参与检查 Service Worker 是否接管并返回旧版本 index.html 在不同网络与地区抓取响应头，确认 CDN...，边缘节点与源站内容不一致，扩大了影响范围开启 gzip 后 ETag 与 If-None-Match 不匹配，弱校验未生效叠加 Service Worker 未及时激活新版本，个别用户被旧 SW...开启监控：资源 404 比例、白屏率、JS 错误率实时告警验证方法使用隐身模式与禁用缓存分别访问，确认是否消除问题对比 curl -I 返回头部，验证是否已改为不缓存入口和长期缓存静态检查 Service...，避免静默长期旧版本自测清单打开正常模式、隐身模式、禁用缓存模式分别访问主页观察 index.html 是否返回 no-cache, no-store, must-revalidate 观察静态资源是否返回...Worker 是否拿到新 index.html 并正确激活教训总结入口文档与静态资源必须采用差异化缓存策略指纹与长期缓存是前提，入口不缓存是关键 CDN 刷新与验证需要成为发布必经步骤 Service

6211 0

【译】使用默认方式更新service worker

对于 Chrome 68 之前的版本，/service-worker.js的更新请求会受HTTP缓存的影响(包含大多数的fetch请求)。...译者注：service worker 存在一个更新机制，至少一天会更新一次。...这些值决定了对于检查 service worker 更新而发出HTTP请求，浏览器的HTTP缓存是否起作用以及如何发挥作用。...当值为imports时，HTTP缓存将不会影响/service-worker.js的更新，但会影响service worker中引入的脚本（在我们的例子中是指path/to/import.js）。...开发者可以利用这个时机来决定是否要从HTTP缓存中显式选择导入的脚本，如果合适的话可以在其service worker注册时添加updateViaCache：'none'。

2.7K1 0

一篇关于浏览器缓存知识的梳理

否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。...pragma 这个是HTTP1.0中禁用网页缓存的字段，其取值为no-cache，和Cache-Control的no-cache效果一样。 image.png 2....Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。...因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。...刷新对于强缓存和协商缓存的影响 1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。 2. 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。 3.

9112 1

一文读懂浏览器缓存

调用 Service Worker 的 fetch 事件获取资源；查看 memory cache；查看 disk cache；这里又细分：如果有强制缓存且未失效，则使用强制缓存，不请求服务器。...Service Worker 是一个注册在指定源和路径下的事件驱动 worker；特点是：运行在 worker 上下文，因此它不能访问 DOM；独立于主线程之外，不会造成阻塞；设计完全异步，所以同步...其实它有一个功能就是离线缓存：Service Worker Cache；区别于浏览器内部的 memory cache 和 disk cache，它允许我们自己去操控缓存，具体操作过程可以参看 Using_Service_Workers...；通过 Service Worker 设置的缓存会出现在浏览器开发者工具 Application 面板下的 Cache Storage 中。...disk cache 也叫 HTTP cache 是存在硬盘中的缓存，根据 HTTP 头部的各类字段进行判定资源的缓存规则，比如是否可以缓存，什么时候过期，过期之后需要重新发起请求吗？

8742 0

浏览器缓存的力量

否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。...pragma 这个是HTTP1.0中禁用网页缓存的字段，其取值为no-cache，和Cache-Control的no-cache效果一样。 2....Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。...因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。...刷新对于强缓存和协商缓存的影响 1. 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。 2. 当f5刷新网页时，跳过强缓存，但是会检查协商缓存。 3.

8162 0

WorkBox 之底层逻辑Service Worker

❞ 更多详情可以参考MDN-Cache[1] Cache API 与 HTTP 缓存的区别如果我们以前没有使用过Cache接口，可能会认为它与 HTTP 缓存相同，或者至少与 HTTP 缓存相关。...Cache接口是一个「完全独立于」HTTP 缓存的缓存机制用于影响HTTP缓存的任何Cache-Control配置对存储在Cache接口中的资源没有影响。 ❝可以将浏览器缓存看作是「分层的」。...❝ HTTP缓存是通过HTTP Header中指定的「缓存指令」来影响的 Cache API可以「通过 JavaScript 进行编程」 ❞ 这意味着可以根据网站的特有的逻辑来缓存网络请求的响应。...service worker的「顶级代码的任何更改」，这会影响浏览器生成的指纹。...从缓存中清除一个或多个项目，甚至删除整个缓存实例。这个图形用户界面使检查Service Worker缓存更容易，以查看项目是否已添加、更新或从Service Worker缓存中完全删除。

3.6K2 0

HTTP 缓存机制

缺点：使用本地时间判断是否过期，而本地时间是可修改的且并非一定准确的。...2.3 拓展知识（冷门考点） HTTP/1.0 Pragma 在 HTTP/1.0 时期用于禁用浏览器缓存 Pragma: no-cache。...缓存位置从 Service Worker 中读取缓存（只支持 HTTPS）。从内存读取缓存时 network 显示 memory cache。...优先级 Service Worker > memory cache > disk cache > Push Cache。...缺点不恰当的缓存设置可能会导致资源更新不及时，导致用户获取信息滞后。参考资料 HTTP Caching

1.5K2 0

web渐进式应用PWA

由于允许 Web 应用程序脱机工作的是 Service Worker，这意味着 Service Worker 是渐进式 Web 应用强制要求的部分。...，该浏览器直接请求这个绝对路径也会访问缓存中的资源。...站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问当 manifest 文件发生改变时，资源请求本身也会触发更新 3.创建一个 Service Worker Service...Service Worker 会响应三个事件：install，activate 和 fetch。...需要在开发者工具中的 Network 一栏中通过 Offline 选项禁用掉网络，再刷新页面能正常访问，并且网络请求的响应都来自 Service Workers，正常的效果如图：分享功能(Web

2.2K1 0

前端缓存：性能的无声杀手｜技术创作特训营第一期

用户设备的性能也可能影响缓存位置的选择。性能较低的设备可能会更多地依赖于磁盘缓存，而性能较高的设备则可能更多地使用内存缓存。用户在页面上的行为也可能影响缓存的选择。...4.3 Service Worker Service Worker 是一种在 Web 浏览器中运行的脚本，它可以作为浏览器和网络之间的代理，用于实现诸如离线访问、推送通知、后台数据同步等功能。...Service Worker 在其生命周期中会经历三个步骤：注册、安装、激活。注意：出于安全考虑，Service worker 只能在 https 及 localhost 下被使用。...Service Worker 是创建PWA的关键组成部分之一。...PWA通常以Service Worker为核心，因为Service Worker可以用于缓存资源、处理离线请求，以及向用户发送推送通知等。

2.1K38 4

Alluxio性能调优

检查 Alluxio 集群是否健康。您可以在 http://:19999 检查 web 用户界面，看看是否可以从浏览器访问 master。...如果该值设置为 0，则禁用缓存。...客户端调优被动缓存被动缓存会导致 Alluxio worker 缓存另一个已缓存在单独 worker 上的数据副本。...禁用被动缓存对于没有位置概念且数据集比单个 Alluxio worker 的容量大的工作负载很重要。...，必要时增加 alluxio.job.master.job.capacity 调整 alluxio.job.worker.threadpool.size 以增加并发性（这可能会影响 worker 性能）

2.6K4 0

【译】理解Service Worker

它摒弃了应用缓存声明式的设计，改用一种更加命令式或者说程序性的设计方案。 Service Worker是一种在浏览器环境当中于一个持久的背景进程当中执行代码的方法。...浏览器会找到 /sw.js 文件，然后保存在当前被访问的域名的名下。该文件包含各类事件的处理逻辑，整体定义你的Service Worker的行为。 ?...Install事件 Install事件是在你的Service Worker第一次注册以及SW文件（/sw.js）发生变化的时候触发的（浏览器会自动鉴别是否发生改变了）。...它可以用来查找一个匹配的缓存响应结果。 cache.match 会尝试为一个请求寻找匹配的缓存值。如果没能找到，这个 promise 会得到 undefined 结果。...如果你想我一样，想要在Chrome里体验这个功能，你需要真实地断开你的网络，禁用一下Wi-Fi或者关闭一下网络驱动器。

1.6K3 0

nginx性能优化

但是，需要注意，如果worker_processes设置的过多，可能会导致CPU资源的浪费。...避免使用if语句Nginx的if语句会影响性能，因此应尽可能避免使用if语句。可以通过以下方法来避免if语句：使用location指令来替代if语句。...可以在Nginx配置文件中使用以下指令来禁用它们：access_log off;error_log off;将access_log和error_log写入共享内存或者缓存中。...timeout invalid_header updating http_500 http_503;上述配置中，fastcgi_cache_path指定缓存路径和缓存配置。...fastcgi_cache_bypass和fastcgi_cache_revalidate可以指定响应头的值，以控制是否使用缓存。fastcgi_cache_min_uses指定最小缓存使用次数。

1.8K2 0

Service Worker初探

但是浏览器是不会允许Service Worker一直处于工作状态。因为随着用户打开越来越多的注册了Service Worker的页面，性能肯定会收到影响。...CacheStorage和http缓存的关系 ? 在发送http请求的时候，请求会先到达Service Worker。...在Service Worker中，使用CacheStorage来查询是否具有可用的缓存。如果没有，浏览器先会检测Cache-Control是否使用当前的浏览器缓存，这就是我们常说的强缓存。...如果浏览器缓存已过期，请求正式到达服务器。再去判断资源的ETag和Last-Modified有没有发生变化，决定是否使用服务器缓存。 CacheStorage不能取代过去的HTTP缓存。...当设备恢复网络的时候，服务器会马上收到请求。我们可以将返回值的errCode修改为1，尝试下Service Worker是否会发送多次请求。

1.9K2 0

点击加载更多

Service Worker和HTTP缓存

Service Worker离线缓存实战

Service Worker 缓存文件处理

Hive语法内关于With as 的数据是否会缓存到内存分析

《前端缓存系统构建：浏览器与Service Worker的自动清理与命中率优化策略》

H5 加了 Service Worker 反而更新不出来：缓存策略与版本激活的正确顺序

「Google」AMP缓存显示发布商地址百度的MIP是否也会这样？

一次因浏览器缓存导致的生产环境事故：前端线上 bug 复盘

【译】使用默认方式更新service worker

一篇关于浏览器缓存知识的梳理

一文读懂浏览器缓存

浏览器缓存的力量

WorkBox 之底层逻辑Service Worker

HTTP 缓存机制

web渐进式应用PWA

前端缓存：性能的无声杀手｜技术创作特训营第一期

Alluxio性能调优

【译】理解Service Worker

nginx性能优化

Service Worker初探

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐