开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ServiceWorker无法缓存持久性资产

Service Worker是一种浏览器技术，它允许开发者在浏览器后台运行脚本，用于拦截和处理网络请求，实现离线缓存和推送通知等功能。然而，由于浏览器安全机制的限制，Service Worker无法缓存持久性资产。

持久性资产通常包括图片、视频、音频等文件，它们的大小较大，且需要较长时间才能下载完毕。Service Worker的缓存机制默认只对静态资源进行缓存，而对于动态生成的或者经常更新的持久性资产，如用户上传的图片或视频，不适合用Service Worker进行缓存。

对于需要缓存的持久性资产，可以考虑使用其他技术来实现。例如，可以将这些文件上传到云存储服务，如腾讯云对象存储 COS（https://cloud.tencent.com/product/cos）或腾讯云文件存储 CFS（https://cloud.tencent.com/product/cfs），然后通过在前端代码中使用合适的接口来获取和展示这些文件。

另外，Service Worker仍然适用于缓存应用程序的静态资源，如HTML、CSS和JavaScript文件等。这些静态资源可以提供较快的加载速度，提升用户体验。同时，Service Worker还可以实现离线浏览和离线应用功能，使得用户在无网络连接的情况下仍然可以访问应用程序。

总结起来，Service Worker无法缓存持久性资产，但可以用于缓存应用程序的静态资源和实现离线功能。对于持久性资产的缓存，可以考虑使用云存储服务来实现。

相关搜索:ServiceWorker缓存不稳定安装时的ServiceWorker缓存 ServiceWorker /缓存API中的通配符强制资产重新缓存当现有的“坏”serviceWorker处于活动状态并首先缓存时，强制serviceWorker更新 HDBSCAN集群缓存和持久性多资产包下载缓存问题 Service Worker获取缓存资产失败无法为作用域angular注册ServiceWorker ActionScript - 位图缓存与图像资产性能 IE 11不断请求缓存的资产 FlutterError:无法加载资产无法加载资产图像在多个缓存文件中存储相同代码的ReactJS ServiceWorker nHibernate:无法找到持久性如何更新serviceworker脚本以在发生更改时更新缓存页面？无法加载资产文件codeigniter 无法从资产打开文件无法加载资产。资产在pubspec.yaml中指定找不到模块，无法解析'React‘中的serviceWorker

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

不只是离线缓存！ - 论如何善用ServiceWorker

总之，不管怎样，JSDelivr在决定将节点设置为NearChina，可以肯定的是，在最近很长一段时间内，我们都无法享受国内外双料同时加速的快感，换句话说，jsd在中国就被永久地打入了冷宫。...是的，接下来的两张图你应该能显著的看到这一差距： [没有ServiceWorker中继，平淡无奇] [ServiceWorker中继，刺激拉满] 在第一张图中，用户和服务器的关系直的就像电线杆，用户想要什么...由于sw不可访问window，在sw中是无法使用ajax或XMLHTTPRequest。同时，fetch是一个异步函数，直接调用它会返回一个Promise。...此脚本适用于卸载ServiceWorker的替换脚本。因为sw在无法拉取新版本时不会主动卸载，依旧保持运行，填入一个透明代理sw即可。...如果有任何一个url长时间无法联通，将会导致极长的检测时间浪费。

3.5K2 1

ServiceWorker工作机制与生命周期：资源缓存与协作通信处理

前端缓存分析前端缓存大致可以分为 http缓存与浏览器缓存 http缓存推荐阅读《浏览器http缓存机制剖析：存储策略与过期策略的机理分析》，我们来分析下浏览器缓存 storage cookie...—因为service worker中涉及到请求拦截，出于对安全问题的考虑，所以必须使用HTTPS协议来保障安全被缓存的文件可在Network中看到Size项为 from ServiceWorker，在...navigator.serviceWorker.register('....is from sw.js, to page'); }) 如果在注册 Service Worker 的时候，把 scope 设置为非 origin 目录，那么在 service worker 文件中，我无法获取到...// index.js navigator.serviceWorker.register('.

1.5K2 0

浏览器缓存图解

缓存方式详解使用情况 http缓存分为强缓存（200）和协商缓存（304），详细流程参考下图强烈推荐 localstorge 本地缓存单个域名下有大小限制（最大5M）同一域名多个页面共享推荐...）和持久性cookie（定义有效期）httponly设置为true时，JS无法获取cookie值常用于身份验证（逐渐被token替代）可以用用 webSQL 非HTML5规范，是一种特定的浏览器特性集成在浏览器中的本地数据库类似...Cache 通过manifest配置文件在本地有选择性的存储JS/CSS/图片等静态资源存储大小：5M静态资源必须和HTML文件同源逐渐被Service Worker替代不推荐 Cache Storage ServiceWorker...规范中定义的离线方案设置window全局内置对象caches浏览器兼容性较差还需等等小贴士： serviceWorker：和webWorker一样是在浏览器后台作为独立线程运行的JavaScript...下图为http缓存流程图： ? 浏览器缓存.png 协商缓存并非是一种被强缓存“低级”的策略，对于一些特殊的应用场景或资源，协商缓存优于强缓存。

5651 0

新型XSS总结两则

ServiceWorkers可用于拦截web请求，并返回一个缓存版本，这样的话即使在离线的状态下，网站仍然处于可用状态。。...如果有的话，将这些内容返回，否则的话，建立相应的web请求，并将返回的内容缓存起来。 ?...也就是说，所有经过缓存层的内容都已经过了某种过滤。 3 JSONP终点当然，ServiceWorkers自身也有一定的局限性，即只能安装到与请求资源相同的域中。...这就意味着，要将一个serviceWorker安装到c0nrad.io的话，需要像下面这样来注册该serviceWorker： navigator.serviceWorker.register('https...4 完整的攻击流程创建最终的有效载荷（窃取电子邮件、监视网络账户等）使用JSONP启动有效载荷利用XSS将有效载荷注入受害者机器获取持久性访问权限具体案例攻击者通常利用这种手法维护持久性的访问权限

7406 0

WorkBox 之底层逻辑Service Worker

我们需要在脚本 (例如，在 ServiceWorker 中) 中处理缓存更新的方式。...此文件不应包含对DOM的任何引用，因为它将无法访问DOM。在我们的主JavaScript文件中，使用Worker构造函数创建一个新的Worker对象。...这是一种「确保内容新鲜度」的好策略，但其权衡是「当用户离线时将无法正常工作」。要确保请求直接通过到网络，只需「不对匹配的请求调用 event.respondWith」。...它「通过跳过 HTTP 缓存可能启动的任何与服务器的内容新鲜度检查，为不可变资产提供了速度提升」。更重要的是，「任何缓存的资产都将在离线时可用」。 4....检查缓存内容如果无法检查缓存，就很难确定缓存策略是否按预期工作。Chrome DevTools 的应用程序面板提供了一个子面板，用于检查缓存实例的内容。

4012 0

使用传统前端技术增强客户端缓存能力

浏览器客户端代码说到 PWA ，我们能直接想到的，无非是增强缓存和推送能力。而这两个能力，都是 ServiceWorker API 实现的。...，比如： try { ('serviceWorker' in navigator) && navigator.serviceWorker.register('/sw.js'); } catch (error...try { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.min.js').then(function...在分享代码之前，有做过 PWA 相关项目或者了解的同学，可能或多或少会在增强缓存这个地方被坑到，比如：缓存无法更新、缓存内容过多无法写入。...缓存无法更新有一个简单有效的解决方案：定时切换缓存使用的 Store。如果再引入当前时间这个因素，可以保障缓存使用的 Store 不存在资源争抢的问题。

7871 0

解决wp-super-cache无法(预)缓存问题

突然发现 WP-SUPER-CACHE 无法预缓存，点击【立即加载预缓存】后没有任何效果，并且垃圾回收定时器也失效了，缓存文件全是几天前的，感觉很奇怪！...闲下来的时候，突然想起前些天对博客做的一些优化，于是回头挨个去检查，最终发现导致预缓存和定时器失效的原因是因为我优化的时候禁用了 WP Cron 的功能！ ?...当我把添加的代码删除后，wp-super-cache 的预缓存功能立马就开始工作了。。。看来，这个功能不能随便禁用了！...发现 wp-super-cache 无法预缓存的朋友，也请检查下 wp-config.php 里面是不是存在禁用 WP_CRON 的语句。

1.6K5 0

前端浏览器存储初探

所以服务端无法记住当前的 HTTP 请求与之前的请求有什么联系，这样所造成的后果就是服务端无法对用户信息以及登录状态进行维护。而 cookie 的产生使得服务端可以区分当前是哪个客户端发起的请求。...：可靠性无网络情况下提供基本页面的访问快速针对页面渲染以及数据访问（转场动画）融入增加到手机桌面全屏、推送等特性 6. service workers JS ———— 单线程（在用户层面无法创建多线程...在将来，基于它可以实现消息推送，静默更新等服务，但是目前它首先要具备的功能是拦截和处理网络请求，包括可编程的响应缓存管理。.../serviceWorker.js"> // service worker 注册 if (navigator.serviceWorker) { navigator.serviceWorker.register.../serviceWorker.html']) }) ) }); // 读取缓存 self.addEventListener('fetch', function(e) { console.log

2642 0

Web Worker

所以在 Worker 中你无法使用 Window 变量。取而代之的是可以用 self 来表示全局对象。self 上有哪些方法和属性，感兴趣的小伙伴可以自行输出查看。...安装 ServiceWorker // serviceWorker.js const CACHE_NAME = 'cache-v1'; // 需要缓存的文件 const urlsToCache = [...调试方法在浏览器中查看和调试 ServiceWorker 的代码，需要输入 chrome://inspect/#service-workers 演示效果上面代码中，我缓存了 131.png。...常见使用场景缓存资源文件，加快渲染速度这个我们以语雀为例。我们在打开语雀网站的时候，可以看到它使用 ServiceWorker 缓存了很多 css、js 文件，从而达到优化的效果。...ServiceWorker 可以缓存资源，提供离线服务或者是网络优化，加快 Web 应用的开启速度，更多是优化体验方面的。

1K5 0

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

基本上，Service Worker是一种网络工作者，更具体地说，它就像一个Shared Worker： Service Worker在它自己的全局脚本上下文中运行它没有绑定到特定的网页它无法访问DOM...我们来看下面的代码： if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register...('/sw.js').then(function(registration) { // 注册成功 console.log('ServiceWorker registration...一旦安装成功，您将知道静态资产位于缓存中。如果注册需要在加载事件之后发生，这将回答您的问题。这不是必须的，但它是绝对推荐的。为什么这样？让我们考虑用户第一次访问您的网络应用程序。...目前还没有Service Worker，浏览器无法事先知道是否会有安装的Service Worker。

1.3K1 0

PWA技术及其用户体验设计

这样，下次有人从设备访问应用程序时，UI立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。一个App shell的代码结构如下： <!...() { navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' }) .then(...serviceWorker.js主要对有install跟fetch事件进行监听，对cache进行操作，达到缓存的目的。...除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。...通俗来讲，您需要告诉用户当他们无法连接上网络时会发生什么变化。比如：哪些功能无法使用；或者是页面上的数据是什么时间更新的；目前的网络连接情况；等等。

9072 0

pwa-之service worker 离线文件处理

本章包含以下知识点显示离线页面加载离线图片加载离线css 多个fetch处理事件调用简介网站图片由于不确定的原因，可能无法访问，这给用户一个错觉，就是你的网站出了问题其他诸如css,js文件都是网站必不可少的资源...' in navigator) { navigator.serviceWorker.register( 'service-worker.js', { scope...使用cache Api，预先缓存offline.html和offline.svg。当网络不通时，html请求走到cache方法里面去，然后响应的是缓存好的offline.html。...offline.html又请求已经缓存好的offline.svg。所以正常显示。加载离线图片创建index.html <!...这样子我们的页面缓存不会生效。加载离线css 创建index.html <!

6022 0

变种XSS：持久控制

而Service Worker，我们可以用它来进行本地缓存，相当于一个本地的proxy。说起缓存，我们会想起我们常用的一些缓存技术来缓存我们的静态资源，但是老的方式是不支持调试的，灵活性不高。...使用Service Worker来进行缓存，我们可以用javascript代码来拦截浏览器的http请求，并设置缓存的文件，直接返回，不经过web服务器，然后，做更多你想做的事情。...而 serviceWorker 需要 Promise 支撑，目前支持的浏览器如下： ? 支持 serviceWorker 的浏览器： ?...开始尝试攻击：首先在 https 站点中找到一个 Xss，利用 Xss 注册一个 serviceWorker.registration 实例： navigator.serviceWorker.register...比如：杀死该JSONP路径以及其子目录的全部接口，从而导致网站无法正常使用。 0x04 中止及防范攻击 1.

1.3K6 0

小案例：结果缓存无法使用，RESULT_CACHE_MAX_SIZE值无法更改的问题

最近遇到了一个 RESULT_CACHE_MAX_SIZE 参数值无法更改的问题。首先我们需要知道 RESULT_CACHE_MAX_SIZE 是什么。...RESULT_CACHE_MAX_SIZE 是结果缓存能够使用sga内存的最大大小的限制参数。当我们需要使用结果缓存的时候，这个值一定不能是0。并且以下的查询结果是 ENABLED ....dbms_result_cache.status from dual; STATUS ------------------------------------- BYPASS 并且这种状态下RESULT_CACHE_MAX_SIZE参数值无法被更改...保证结果缓存可以拿到内存空间。 Alter system set shared_pool_size=nnnM scope=spfile; 然后执行如下命令将结果缓存恢复到可用状态。...就可以解决无法使用结果缓存和无法修改RESULT_CACHE_MAX_SIZE参数值的问题了。

1.8K1 0

web渐进式应用PWA

ServiceWorker 是位于应用程序根目录的一个个的 JavaScript 文件。...您需要在页面对应的 JavaScript 文件中注册该 ServiceWorker： //main.js if ("serviceWorker" in navigator) { // 注册 service...4：创建可用的离线页面离线页面可以是静态的 HTML，一般用于提醒用户当前请求的页面暂时无法脱机使用。然而，我们可以提供一些可以阅读的页面链接。 Cache API 可以在 main.js 中使用。...使用 Cache Storage 还需要注意以下几点：它只能缓存 GET 请求；每个站点只能缓存属于自己域下的请求，同时也能缓存跨域的请求，比如 CDN，不过无法对跨域请求的请求头和内容进行修改缓存的更新需要自行实现...在切换到 Network -> all 就可以看到被缓存的文件的 Size 那栏 (from ServiceWorker 不同于 from disk cache) 为了验证网页在离线时能访问的能力，

1.2K1 0

Webpack实战-构建离线应用

它无法直接访问 DOM，但可以通过 postMessage 接口发送消息来和 UI 进程通信。...由于 Service Workers 无法通过注入 polyfill 去实现兼容，所以在你打算使用它前请先调查清楚你的网页的运行场景。...判断浏览器是否支持 Service Workers 的最简单的方法是通过以下代码： // 如果 navigator 对象上存在 serviceWorker 对象，就表示支持 if (navigator.serviceWorker...代码如下： if (navigator.serviceWorker) { window.addEventListener('DOMContentLoaded',function() { //...调用 serviceWorker.register 注册，参数 /sw.js 为脚本文件所在的 URL 路径 navigator.serviceWorker.register('/sw.js

7502 0

54. 精读《在浏览器运行 serverRender》

不需要后端缓存服务，对于千人千面的复杂页面，对后端 ssr 来说缓存规模庞大的无法计算。相比后端 ssr，在前端可以绕过复杂的权限系统，同时 http 请求的权限问题也无需关心。...相对的，缺点是：需要客户端支持 serviceWorker。第二次首屏才会生效。后端 ssr 可以做到访问前预缓存 ssr 结果。可能破坏前端页面状态，因为在同一个环境偷偷执行了一些页面逻辑。...当然第一次没有缓存，所以在没有命中缓存时，会同步的做两件事：发送请求，拿到后端返回的 response，扔给浏览器。这是最普通的请求逻辑。...附上代码片段： if (navigator.serviceWorker) { navigator.serviceWorker.addEventListener("message", event =>...) { navigator.serviceWorker.controller.postMessage({ type: "serverRenderContent

3884 0

基于Service Worker 的XSS攻击面拓展

在前段时间参加的CTF中，有一个词语又被提出来，Service Worker，这是一种随新时代发展应运而生的用来做离线缓存的技术，最早在2015年被提出来用作攻击向，通过配合xss点，我们可以持久化的xss...伴随着H5的诞生，Web app越来越需要应用化，与之相关，各种离线的需求也接踵而至，Appcache就是用来做网站的离线缓存的，可以通过manifest文件指定浏览器缓存哪些文件以供离线访问。...2、在这个线程中我们无法直接访问dom，这里通过postMessage来做交互。 3、在这个线程下，我们可以控制页面发送网络请求的处理方式。...那就可以通过这个头来设定scope，例如： HTTP/1.1 200 OK content-type: text/javascript service-worker-allowed: / 值得注意的是，这个域限制现在已经无法通过...SW的限制二：生命周期出于安全性的考虑，每个SW都有时间限制，在注册24小时后，原先的HTTP缓存就会实现，也就是一般意义上来说，这种持久化xss效果仍然有限。

4532 0

Web性能优化之Worker线程(下)

❝服务工作线程的一个主要能力是可以「通过编程方式实现真正的网络请求缓存机制」 ❞ 有如下特点：线程缓存「不自动缓存」任何请求「所有缓存都必须明确指定」线程缓存「没有到期失效的概念」除非明确删除...，否则缓存内容「一直有效」线程缓存必须「手动更新和删除」缓存「版本」必须「手动管理」每次线程更新，新服务工作线程负责提供新的缓存键以保存新缓存「唯一」的浏览器「强制逐出策略」基于线程缓存占用的空间...缓存超过浏览器限制时，浏览器会基于「最近最少使用」（LRU，Least RecentlyUsed）原则为新缓存腾出空间关于LRU我们在网络拾遗之Http缓存中有介绍 ❝本质上，服务工作线程缓存机制是一个...顶级服务脚本和通过 importScripts()在服务工作线程内部导入的文件「永远都不会被缓存」 navigator.serviceWorker .register('/serviceWorker.js...「缓存检查」 ❞ 对于任何肯定有缓存的资源（如在安装阶段缓存的资源），可以采用该策略。

2.5K2 0

pwa-之service worker 基本概念

通过service worker，我们可以预先缓存网站的某些资源。我们作为资源引用的是JavaScript文件，CSS文件，图像和一些字体。...install事件比较适合用来预加载数据和初始化缓存，activate事件适合用来清理旧版本的数据。...虽然这么说，但我们无法保证service worker任何时候都处于生效状态，所以在service worker中定义的全局状态可能不会被保留。...这就意味着service worker无法访问网页的dom等其他信息。因此我们也无法通过 DevTools里面同一个tab来调试service worker。...在service worker中，它大部分的工作是在监听的事件中来完成的，比如在install事件中完成资源缓存。同样我们可以在这里打断点。

1.1K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭