文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Service Worker和HTTP缓存

很多人，包括我自己，初看Service Worker多一个Cache Storage的时候，就感觉跟HTTP长缓存没什么区别。...例如大家讲的最多的Service Worker能让网页离线使用，但熟悉HTTP缓存的朋友，会发现，把整站所有资源设置为长缓存（不带校验），也可以实现离线使用。...那么，Service Worker在缓存方面和HTTP缓存比较，有什么好处呢？...Service worker除了针对PWA（推送和消息）以外，对普通web来说，在缓存方面，能比http缓存带来一些额外的好处。 可以理解为，SW就是浏览器把缓存管理开放一层接口给开发者。...例如缓存比例统计、图片404统计。 4、额外缓存。 HTTP缓存空间有限，容易被冲掉。虽然部分浏览器实现SW的存储也有淘汰机制，但多一层缓存，命中的概率就要更高了。 5、离线处理。

1.7K50

Service Worker离线缓存实战

背景介绍 最近实战了 Service Worker（以下简称“sw”）来进行网站缓存，以实现离线状态下，网站仍然可以正常使用。...尤其对于个人博客这种以内容为主体的静态网站，离线访问和缓存优化尤其重要；并且 Ajax 交互较少，离线访问和缓存优化的实现壁垒因此较低。...> body> html> 注册 Service Worker 我们通过script.js来判断浏览器是否支持 serviceWorker，并且加载对应的代码。...Service Worker 最佳实践 笔者爬了很久的坑，中途看了很多人的博客，包括张鑫旭老师的文章。但是实践的时候都出现了问题，直到读到了百度团队的文章才豁然开朗。.../image.png"]); }) ); }); 更新 Service Worker 代码 对于缓存的更新，可以通过定义版本号的方式来标识，例如上方代码中的 VERSION 变量

1.9K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Service Worker 缓存文件处理

    之前加载过的css和js都被缓存了。 所以这里是有点小问题的，毕竟我服务器更新了，你service worker 没给我更新缓存，就说不过去了。...生命周期 特地跑到Google Develop去看了下究竟是怎么运转的。 Service Worker生命周期的意义 1.实现离线优先（这个不谈，没网也能搞事？...（准备替换旧的service woker） 3.确保整个过程中作用域页面由同一个服务工作线程（或者没有服务工作线程）控制。 4.确保每次只运行网站的一个版本。...install 根据我的理解，这个环节只在第一次打开网站时加载，一系列操作保证其原子性（要么可用，要么废弃） Activate service worker被激活，某些请求就会变成 from ServiceWorker...更新service worker 这里就是解决问题的关键了。

    1.7K30

    Service Worker的应用

    描述 Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是Cache，也是通过worker的方式来进一步优化，其基于h5的web worker，所以不会阻碍当前js线程的执行，其最主要的工作原理...后台同步，启动一个service worker即使没有用户访问特定站点，也可以更新缓存。 响应推送，启动一个service worker向用户发送一条信息通知新的内容可用。 对时间或日期作出响应。...如果要清理缓存的话，可以在浏览器控制台的Application项目中Storage点击Clear site data就能清理在网站中的所有缓存了。...如果使用express或者koa等服务器环境，还可以尝试使用Service Worker来缓存数据请求，同样提供数据请求的path即可。...clone下来运行一个静态文件服务器就可以直接使用了。

    86110

    谨慎处理 Service Worker 的更新

    因为它具有拦截并处理网络请求的能力，因此必须做到网页(主要是发出去的请求)和 Service Worker 版本一致才行，否则就会导致新版本的 Service Worker 处理旧版本的网页，或者一个网页先后由两个版本的...在将 SW 应用到自己的站点时，我们要避开这两种方法，他们是： 不要给 service-worker.js 设置不同的名字 一般针对静态文件，时下流行的做法是在每次构建时根据内容（或者当时的时间等随机因素...为了提升速度或者离线可用，这个 service-worker.v1.js 会把 index.html 缓存起来。...但我们发现，用户访问站点时由于旧版 service-worker.v1.js 的作用，从缓存中取出的 index.html 引用的依然是 v1，并不是我们升级后引用 v2。...不要给 service-worker.js 设置缓存 理由和第一点类似，也是为了防止在浏览器需要请求新版本的 SW 时，因为缓存的干扰而无法实现。毕竟我们不能要求用户去清除缓存。

    2K20

    腾讯云 EdgeOne Worker 无服务器部署静态网站

    修改示例代码中的 BACKEND_PREFIX 常量，即可实现无服务器部署托管在 github/gitee 上的静态网站。 示例项目 摸鱼日报提供城市天气、热门榜单、农历等信息。...接入 EdgeOne，参见 从零开始快速接入 EdgeOne 创建 Worker，并绑定一个可用的子域名，参见 边缘函数（EdgeOne Functions）快速指引 编辑 Worker 代码，并将以下...边缘函数代码 复制到 代码编辑器 中，完成部署 边缘函数代码 /** * 静态仓库托管 for daily-paper * @url https://github.com/rehiy/daily-paper...addEventListener('fetch', e => { const resp = github_proxy(e.request); e.respondWith(resp); }); 函数代码分析 这段代码的作用是将用户请求的静态文件代理到...设置响应的头部信息，包括后端 URL、文件类型和缓存控制。 最后，返回一个新的 Response 对象，包含原始响应的主体、状态码和头部信息。

    1.9K61

    Netlify提供的静态网站渲染和缓存技术

    ## 静态渲染在Web的早期，所有网站都是静态站点——手写HTML文件的集合存储在服务器上，最可能是通过FTP客户端上传的，并直接提供给用户在他们的Web浏览器中使用。...随之而来的是，您可以从内容交付网络（CDN）（如Netlify的CDN）提供网站，该CDN从最接近请求的服务器节点位置提供静态文件和资产，使您的网站非常非常快速。...## 增量静态再生（ISR）增量静态再生（ISR）是Next.js对缓存模式称为“过时但可重用”（SWR）的专有实现。这允许重新生成已修改的单个静态呈现页面，而不是从头开始重新构建整个站点。...请记住，使用 SWR/ISR 时，一些访问您网站的访客可能会看到过时的内容，因为更新的页面会在服务器上重建并缓存。您不会希望在显示准确且最新的数据（例如定价数据）的页面上使用 SWR。...您可以选择仅静态预生成最受欢迎和/或关键的页面，并使用 DPR 增强您的渲染策略，而不是预先构建整个站点。DPR 允许您在第一次请求时按需静态生成和缓存页面。

    1.6K30

    Service Worker实现离线应用PWA的简单介绍

    什么是Service Worker Service workers essentially act as proxy servers that sit between web applications,...service worker运行在非主线程的其他线程上，所以不会阻塞主线。，有自己独立的上下文，不能访问DOM。只能使用异步api。并且为了安全，service worker只能运行在https之上。...部分浏览器的隐私模式也无法使用。 由于service workers是由chrome提出推广的技术，所以chrome支持最好。其他浏览器的支持情况就参考Can I Use了: ?...Cache.match(request, options) 返回一个Promise对象，resolve的结果是跟Cache对象匹配的第一个已经缓存的请求。...代码 以下是一个实现离线应用的demo – ServiceWorkerDemo 这个demo是一个简陋的离线应用，会缓存所有静态资源请求，即使你修改了index.js和index.css文件，刷新页面还是没有变化

    1.1K20

    基于Service Worker 的XSS攻击面拓展

    在前段时间参加的CTF中，有一个词语又被提出来，Service Worker，这是一种随新时代发展应运而生的用来做离线缓存的技术，最早在2015年被提出来用作攻击向，通过配合xss点，我们可以持久化的xss...伴随着H5的诞生，Web app越来越需要应用化，与之相关，各种离线的需求也接踵而至，Appcache就是用来做网站的离线缓存的，可以通过manifest文件指定浏览器缓存哪些文件以供离线访问。...但Appcache有相当多的缺陷，对于整站中的多页缓存来说支持比较差，所以Service Worker诞生了，值得注意的是： 1、这是一种基于JS的Web Worker驱动，通过新开一个线程来处理任务，...Service Worker有什么用？ Service Worker有什么用呢？ 1、我们对页面更持久的控制（比如存储型XSS)。就算用来注册的XSS失效，我们也依然可以使用SW对页面进行后续控制。...写了这么多，但Service Worker的攻击利用向可以说是非常苛刻了，再加上w3c标准的不断改进，许多以前的利用方式都没办法再用了，但Service Worker本身需要的获取请求返回的权限却永远也去不掉

    71020

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

    基于浏览器原生缓存机制（如HTTP缓存、Cache Storage）与Service Worker构建的前端缓存体系，面临的核心挑战在于如何在“缓存有效性”与“资源新鲜度”之间找到动态平衡——既要避免缓存冗余导致的存储空间浪费...浏览器提供的缓存机制各有特性：HTTP缓存依赖响应头字段（如Cache-Control、Expires）自动生效，适合静态资源却难以主动干预；Cache Storage由Service Worker直接操控...“主动通知+协商验证”处理，网站发布新版本时，Service Worker发送消息通知客户端清理旧缓存，或请求时携带ETag与服务器确认资源是否更新，避免旧内容干扰用户。...Service Worker的 fetch 事件拦截能力为此提供灵活支撑，可根据资源类型选择策略：静态资源“缓存优先，网络兜底”，快速返回缓存内容，后台更新缓存；动态数据“网络优先，缓存兜底”，获取最新数据后更新缓存...浏览器缓存机制与Service Worker提供了工具支撑，但真正决定系统效能的，是如何在“离线可用”与“内容新鲜”“存储空间”与“加载速度”之间找到动态平衡。

    28510

    从一道CTF学习Service Worker的利用

    在“联系站长”处有：嘿~想给我报告BUG链接请解开下面的验证码，只能给我发我网站开头的链接给我哟~我收到邮件后会先点开链接然后登录我的网站！...Service Worker Service Worker简介 Appcache用来处理网站的离线缓存，可以通过manifest文件指定浏览器缓存哪些文件以供离线访问。...但Appcache有相当多的缺陷，对于整站中的多页缓存来说支持比较差，而Service Worker用来作为其替代。...Service Worker有效时间 在每个Service Worker授权24小时后（用PC时钟确定时间），原先的HTTP缓存将被清除。脚本需要被重新注册以正常使用，否则会被摧毁。...真实情况下的案例：百度漏洞报告：埋雷式攻击，悄无声息获取用户百度登录密码 Service Worker防御措施 当注册SW时，会发出包含 Service-Worker: script http头的请求，

    1.5K40

    《离线重生：Service Worker重塑前端应用的生存法则》

    这就需要一个精准的“调控中枢”，而Service Worker正是扮演这一角色的最佳人选。...在一些电商应用中，Service Worker会根据用户以往的购物习惯，提前缓存热门商品详情页与促销活动页面，即使断网也能让用户查看收藏商品与优惠信息。1....更巧妙的是，通过“版本控制”机制，Service Worker能在后台默默更新缓存，当新版本准备就绪时，再无缝切换，避免用户感知到任何异常。...在实际应用中，Service Worker的部署并非一帆风顺。不同浏览器的兼容性差异、缓存更新时的版本冲突、复杂业务场景下的策略冲突，都是开发者需要直面的难题。...而对于开发者来说，掌握Service Worker的核心原理与实践技巧，将成为在未来前端领域立足的必备技能。在这场离线优先的变革中，Service Worker既是技术工具，更是思维转型的催化剂。

    19500

    Service Worker：让你的 Web 应用牛逼起来

    应用缓存 应用缓存主要是通过manifest文件来注册被缓存的静态资源，已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。...这导致页面的更新只能通过manifest文件中的版本号来决定。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。...Service Worker Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是cache，也是通过worker的方式来进一步优化。...调试方法 一个网站是否启用Service Worker，可以通过开发者工具中的Application来查看： ?...被Service Worker缓存的文件，可以在Network中看到Size项为 from ServiceWorker： ?

    2.8K50

    使用ZBlog搭建网站 怎么选择HTML静态缓存插件

    纯静态插件和静态缓存插件的区别 纯静态插件 　　网页通过链接在网站的对应目录生成HTML静态文件。 　　...静态缓存插件 　　所有网页都在指定目录（例如插件的所在目录）生成HTML静态文件，而不会像纯静态插件在网站主目录生成HTML静态网页文件和创建不同的子目录。 什么网站可以使用静态插件？...1、虚拟主机和低配置小带宽的服务器（不分地区）。 2、大数据网站，例如上万文章的网站。 3、每5分钟的在线人数30人以上（以1核1G3M的服务器配置参考计算）。 4、追求速度…… 选择哪种静态插件？...如果网站首页也需要静态，网站的默认文件优先级，html放在第一个。 这个价位的纯静态插件只有这一款，暂时就推荐这一款，价格超过65元建议选择静态缓存插件，功能更多。...id=2311 　　目前ZBlog最便宜的静态缓存插件，从该插件的更新内容来看，支持登录用户访问动态网页，自动删除静态缓存文件（某网页长时间没人访问，自动删除该缓存文件，减少存储空间占用），发表文章、评论删除缓存文件

    2K20

    使用七牛云对象储存缓存 wordpress 静态文件加速网站

    最近博客的访问量越来越大，导致使用阿里云的限制流量的云服务器超出了流量备关停，分析了以后大部分是一些下载的资源和图片资源占用的流量比较大。...所以希望能把这些资源缓存起来，刚好最近经常用七牛云，发现有类似的功能。...空间名自己随便定义，然后选择你希望这些缓存的信息在哪个地区，这个其实个人觉得无所谓。博客本身访问量就不稳定，各个地区都有，所以你选择任何一个都可能会有一部分地区打开速度稍微慢一点。...这样配置以后，你重新访问自己的网站，然后查看一下图片的源地址，已经变成了七牛云提供的那个测试域名的地址了，如下图： ? 与此同时，我们在七牛云创建的储存空间中也可以看到被缓存的信息了： ?...其他设置 默认情况下，插件的设置只缓存 js|css|png|jpg|jpeg|gif|ico 文件，如果你要添加缓存其他后缀名的文件，比如 .zip .rar 等，可以自己进入七牛云插件设置中进行修改

    3.6K60

    为网站开启Nginx缓存加速，支持html伪静态页面

    在我测试期间发现，Nginx 的缓存也同样可以缓存伪静态的 html 页面，完全可以替代 WP-Super-Cache 这类缓存插件了。...二、本地模式 第一种代理模式，我们是利用本地转发变相实现反向代理下的 Nginx 缓存功能，并且可以缓存 html 伪静态页面。从整体的配置可以看出，已经非常接近百度云加速等 CDN 的缓存功能了！...测试中发现，这种模式貌似无法缓存 html 伪静态页面，稍有遗憾，有兴趣的童鞋可以深入研究看看，可能是我没测试到位。...三、惯例总结 好了，通过以上折腾，我们已经完美的解决了 Nginx 实时生成缩略图带来的 CPU 开销问题了！而且，从代理模式的缓存中，我们甚至可以缓存 html 伪静态页面，这意味着什么？...强迫症们有可以无情的丢弃一款 WordPress 缓存插件啦！不过，张戈博客暂时还是使用自己写的 php 代码来实现静态缓存，没有别的，主要是为了方便管理。

    4.7K90

    使用七牛云对象储存缓存 wordpress 静态文件加速网站

    最近博客的访问量越来越大，导致使用阿里云的限制流量的云服务器超出了流量备关停，分析了以后大部分是一些下载的资源和图片资源占用的流量比较大。...所以希望能把这些资源缓存起来，刚好最近经常用七牛云，发现有类似的功能。...空间名自己随便定义，然后选择你希望这些缓存的信息在哪个地区，这个其实个人觉得无所谓。博客本身访问量就不稳定，各个地区都有，所以你选择任何一个都可能会有一部分地区打开速度稍微慢一点。...这样配置以后，你重新访问自己的网站，然后查看一下图片的源地址，已经变成了七牛云提供的那个测试域名的地址了，如下图： ? 与此同时，我们在七牛云创建的储存空间中也可以看到被缓存的信息了： ?...其他设置 默认情况下，插件的设置只缓存 js|css|png|jpg|jpeg|gif|ico 文件，如果你要添加缓存其他后缀名的文件，比如 .zip .rar 等，可以自己进入七牛云插件设置中进行修改

    4.6K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券