首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果我将URL添加到waitUntil()流之外的服务工作缓存中,会发生什么情况?

如果将URL添加到waitUntil()流之外的服务工作缓存中,会导致以下情况发生:

  1. 缓存失效:服务工作缓存是用于存储离线应用程序的资源的一种机制。如果将URL添加到waitUntil()流之外的缓存中,当浏览器检查缓存时,它将不会找到该URL的缓存副本,因此缓存将失效。
  2. 网络请求:当缓存失效时,浏览器将发起网络请求以获取该URL的资源。这将导致额外的网络开销和延迟,因为浏览器需要从服务器下载资源。
  3. 性能下降:由于需要进行网络请求,将URL添加到waitUntil()流之外的缓存中可能会导致应用程序的性能下降。网络请求的延迟和带宽限制可能会影响应用程序的加载速度和响应时间。
  4. 缓存不一致:如果将URL添加到waitUntil()流之外的缓存中,当URL的资源发生变化时,缓存将不会自动更新。这可能导致应用程序展示过期或不一致的内容。

综上所述,将URL添加到waitUntil()流之外的服务工作缓存中会导致缓存失效、额外的网络请求、性能下降和缓存不一致等问题。为了避免这些问题,建议将URL添加到waitUntil()流中,以确保资源的正确缓存和更新。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PWA 入门

sw.js 的文件内容如果发生了变化,install 事件会重新触发。...(url) 抓取这个 URL, 检索并把返回的 response 对象添加到给定的 Cache 对象,这个功能等同于调用 fetch(), 然后使用 Cache.put() 将 response 添加到...如果断网了,远端的数据就会请求失败,这个时候我们可以将请求转发到本地缓存中,本地缓存如果能用请求匹配到响应内容,我们就返回响应数据,这样页面就不再是空白了。...如果缓存里没有,才向服务器发请求。 当然,也可以使用其他策略,比如在有网时就主动请求服务器的数据,如果断网了,则使用缓存中的数据。...offline 相比于第一种策略,我认为第二种策略更好一些。如果有一些文件内容发生了改变,在不变更 sw.js 的情况下,页面走的会是本地缓存,服务器更新的内容就不会获取到。

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

    它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。...Cache.add(request) 抓取这个URL, 检索并把返回的response对象添加到给定的Cache对象.这在功能上等同于调用 fetch(), 然后使用 Cache.put() 将response...添加到cache中....Cache.addAll(requests) 抓取一个URL数组,检索并把返回的response对象添加到给定的Cache对象。...代码 以下是一个实现离线应用的demo – ServiceWorkerDemo 这个demo是一个简陋的离线应用,会缓存所有静态资源请求,即使你修改了index.js和index.css文件,刷新页面还是没有变化

    87920

    JavaScript工作原理(八):Service Workers,生命周期和应用案例

    如果我们在/example/sw.js注册Service Worker文件,那么服务工作者将只能看到URL以/example/(即/example/page1/,/example/page2/)开头的页面的...一旦安装成功,您将知道静态资产位于缓存中。 如果注册需要在加载事件之后发生,这将回答您的问题。这不是必须的,但它是绝对推荐的。 为什么这样?让我们考虑用户第一次访问您的网络应用程序。...我们还检查响应类型是否basic,这表明它是来自我们origin的请求。在这种情况下,不会缓存对第三方资源的请求。 响应结果被添加到缓存中。 请求和响应必须被克隆,因为它们是流。...更新服务工作者 当用户访问您的Web应用程序时,浏览器会尝试重新下载包含Service Worker代码的.js文件。这发生在后台。...从缓存中删除数据 activate回调中最常见的步骤是缓存管理。你现在要这样做,因为如果你在安装步骤中删除了所有旧的缓存,旧的Service Workers将突然停止提供缓存中的文件。

    1.4K10

    HTTP 缓存最佳实践和 max-age 带来的陷阱

    模式二:可变内容,始终由服务器验证 Cache-Control: no-cache 适用以下情况: • 此 URL 上的内容可能会更改 • 未经服务器许可,任何本地缓存版本都不可信 注意:no-cache...• URL 内容更改 • 如果浏览器有不到 10 分钟的缓存版本,则使用该版本,无需询问服务器 • 否则,进行网络获取,如果可用,使用 If-Modified-Since 或 If-None-Match...这种模式意味着,如果我有幸写了一篇受欢迎的文章,我的 CDN(Cloudflare)可以为我的服务器分担热量,只要我可以忍受文章更新需要三分钟才能被用户看到,而我现在就是这样。...这种模式不能随便使用,如果我在一篇文章中添加了一个新的部分,并在另一篇文章中进行了链接,那么我就创建了一个可能会发生竞争的依赖关系。用户点击链接后,可能会进入一篇没有引用部分的文章。...如果我想避免这种情况,我会更新第一篇文章,使用 Cloudflare 的用户界面刷新 Cloudflare 的缓存副本,等待三分钟,然后在另一篇文章中添加链接。

    35820

    Service Worker 全面进阶

    今儿,我看了下兼容性,呵呵~ 人生苦短,及时享乐,前端真坑,不敢乱学。 前方高能,如果觉得生活没有趣味可以继续看下去,会让你的人生更没有趣味。...如果查到文件没有缓存,则会发送请求去获取,并且会带上 cache-bust 的 query string,来表示缓存的版本问题。当然,这只针对于第一次加载的情况。...另外,event.waitUntil 会监听所有的异步 promise,如果其中一个 promise 是 reject 状态,那么该次 event 是失败的。这就导致,我们的 SW 开启失败。...众所周知,一个流一般只能使用一次,可以理解为喝矿泉水,只能喝一次,不过,如果我知道了该水的配方,那么我就可以量产该水,这就是流的复制。...比如,我想直接将 site-v1的缓存文件,替换为 ajax-v1 和 page-v1。

    3.6K10

    开发一个渐进式Web应用程序(PWA)前都需要了解什么?

    如果浏览器检测到网站存在PWA清单文件,Chrome会自动出现“添加到主屏幕”按钮。如果用户点击同意,该图标将被添加到主屏幕,并且将安装PWA。 ?...清单文件创建后,将清单文件引用链接添加到index.html中。...在这个安装阶段,你可以将PWA使用的所有页面、脚本和样式文件下载并缓存起来,以下是完成这项工作的sw.js文件代码:   const CACHE_STATIC_NAME = 'static'; const...现在,Service Worker将拦截HTTP请求,并从缓存中即时加载相应的资源,而不是向服务器发出网络请求。 现在,如果我们在网络选项卡中设置离线模式,我们的应用也依然能正常访问。...如果有任何问题,欢迎通过评论区留言告诉我。

    1.7K20

    渐进式Web应用程序的深入概述

    它实际上在浏览器中的一个单独的线程上运行,因此服务工作线程上的执行不会中断主应用程序线程。这使开发人员可以灵活地通过并发性创建更好的用户体验。服务器可以处理网络请求/响应和缓存。...从主线程中删除此工作将应用程序逻辑与数据管理和网络相关的操作分开。 如您所见,这里的大多数渐进式应用都涉及服务器实现。但在实现之前,必须考虑应用程序的体系结构。...内容是可以在应用程序的整个生命周期中更改的数据。它被排除在应用程序shell之外,因为它是动态的,并且在加载应用程序时可能会过时。它通常通过API服务公开,易于查询。...以下是主要的服务器生命周期事件: 1.注册 当应用程序第一次加载到浏览器中时,将发生这一请求。 这不是真正的Service Worker事件,因为此时服务不存在于浏览器上下文中,但这是重要的一步。...4.抓取 只要调用来自主应用程序的网络请求,就会触发Fetch事件。 发生这种情况时,服务器将对该请求负责。 如果请求的信息已被缓存,则服务器可以返回该信息并完全绕过网络。

    1K20

    渐进式Web应用(PWA)入门教程(下)

    上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍。 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的。...虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。...在本示例中,我还添加了主页和logo。当有不同的URL指向同一个资源时,你也可以将这些URL分别写到这个数组中。offlineURL将会加入到这个数组中。...你可能不需要这个事件,但是在示例代码中,我们在该事件发生时将老的缓存全部清理掉了: // clear old caches function clearOldCaches() { return...但是我们需要考虑以下几点: URL隐藏 当您的应用就是一个单URL的应用程序时(比如游戏),我建议您隐藏地址栏。除此之外的情况我并不建议您隐藏地址栏。

    80300

    PWA 方案相关技术分享

    在开发过程中,发现 PWA 方案的主要核心技术在于 Service Worker,我下面将从 PWA 方案的简介、PWA 方案的相关技术等2个方向简单介绍一下我对于本次开发的收获。...Service Worker 是用 JavaScript 编写的 JS 文件,能够代理请求,并且能够操作浏览器缓存,通过将缓存的内容直接返回,让请求能够瞬间完成。...在成功完成安装并处于“activate 活动状态”之前,服务工作线程不会收到 fetch 和 push 等事件。 默认情况下,不会通过服务工作线程获取页面,除非页面请求本身需要执行服务工作线程。...因此,您需要刷新页面以查看服务工作线程的影响。 clients.claim() 可替换此默认值,并控制未控制的页面。...参考文献: 服务工作线程:简介 Web 技术文档 Web API 接口 ServiceWorker 借助Service Worker和cacheStorage缓存及离线开发 网站渐进式增强体验(PWA)

    77820

    Service Worker的应用

    另外写完相关代码后建议重启一下服务,之前我就遇到了无法缓存的问题,包括disk cache和memory cache,要重启服务才解决。...之后便是从caches取出这个CACHE_NAME的key标识的cache,之后使用cache.addAll将数组中的path告诉cache,在第一次打开的时候,Service worker会自动去请求相关的数据并且缓存起来...sw,在安装后,会直接进入activated阶段,而如果sw进行更新,情况就会显得复杂一些,流程如下:首先老的sw为A,新的sw版本为B, B进入install阶段,而A还处于工作状态,所以B进入waiting...然后对于请求如果匹配到了缓存,那么就直接从缓存中取得数据,否则就使用fetch去请求新的。另外如果有需要的话我们不需要在事件响应时进行匹配 可以直接将所有发起过的请求缓存。...有缓存,从缓存中取 注册成功 cache.js loaded 至此我们就完成了一个简单的示例,在第二次打开页面的时候,我们可以将浏览器的网络连接断开,例如关闭文件服务器或者在控制台的Network中选择

    57210

    浅谈web前端的发展趋势

    在创建清单且将清单添加到您的网站之后,将 link 标记添加到包含网络应用的所有页面上 一些可选项 添加启动画面 splash screen ? 设置启动样式 ?...它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。...在 waitUntil()内,我们使用了 caches.open() 方法来创建了一个叫做 v1 的新的缓存,将会是我们的站点资源缓存的第一个版本。...它返回了一个创建缓存的 promise,当它 resolved的时候,我们接着会调用在创建的缓存示例上的一个方法 addAll(),这个方法的参数是一个由一组相对于 origin 的 URL 组成的数组...,这些 URL 就是你想缓存的资源的列表。

    1.8K10

    浅尝 service worker

    最早听说service worker的时候是团队的分享会上,之后就听说了饿了么pwa改造,技术学习的脚步始终不能停。 对于一个新技术,它能做什么?它能给我带来什么?这一直是我在学习之前会反问的问题。...它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。.../AMD等模块编译和依赖管理(用于开发目的) 后台服务钩子 自定义模板用于特定URL模式 性能增强,比如预取用户可能需要的资源,比如相册中的后面数张图片 第四点在 React的开发配置项里就有体现,利用官方的...); }); 由于生产环境需要考虑缓存没命中的情况下,需要向服务器获取资源。...promise reject了, catch() 函数会执行默认的网络请求,意味着在网络可用的时候可以直接像服务器请求资源。

    55710

    PWA介绍及快速上手搭建一个PWA应用

    Installing ( 正在安装 ):SW 脚本解析完成之后,浏览器会尝试进行安装,installing 中 install 事件被执行,如果其中有 event.waitUntil ( ) 方法,则...installing 事件会一直等到该方法中的 Promise 完成之后才会成功,如果 Promise 被拒绝,则安装失败,SW会进入 Redundant( 废弃 )状态。...Push 和 Notification 的关系,Push:服务器端将更新的信息传递给 SW ,Notification: SW 将更新的信息推送给用户。...和ngrok去调试,在这里为了照顾新手我是直接引用的sw 处理静态缓存,首先定义需要缓存的路径,以及需要缓存的静态文件的列表。...更新静态资源,缓存的资源会跟随着版本的更新会过期的,所以会根据缓存的字符串名称清除旧缓存。

    2.3K130

    web渐进式应用PWA

    ,该浏览器直接请求这个绝对路径也会访问缓存中的资源。...站点中的其他页面即使没有设置 manifest 属性,请求的资源如果在缓存中也从缓存中访问 当 manifest 文件发生改变时,资源请求本身也会触发更新 3.创建一个 Service Worker Service...在本示例中,我还添加了主页和 logo。当有不同的 URL 指向同一个资源时,你也可以将这些 URL 分别写到这个数组中。offlineURL 将会加入到这个数组中。...你可能不需要这个事件,但是在示例代码中,我们在该事件发生时将老的缓存全部清理掉了: // 清理旧的缓存 function clearOldCaches() { return caches.keys(...获取到的资源将会加入到缓存中。 如果第一步和第二步均失败,将会从缓存中返回正确的资源文件。

    1.2K10

    在项目中使用Service Worker 与 PWA

    Service Worker(服务工作线程)是一种在浏览器背后运行的脚本,用于提供强大的离线和缓存功能,以改善 Web 应用程序的性能和可靠性。...更快的加载速度 通过将资源缓存在本地,Service Worker 可以显著提高 Web 页面的加载速度。它可以从缓存中获取资源,而无需每次都从服务器重新下载。 3....event.waitUntil() 方法接受一个promise,并使用它来知道安装需要多长时间,以及它是否成功。 如果成功缓存了所有文件,那么将安装 Service Worker。...如果其中的一个文件下载失败,那么安装步骤将失败。如果缓存文件列表过长,将会增大失败的几率。...缓存优先策略的工作流程:首先,它会监听浏览器的 fetch 事件,拦截原始的请求。接着,它会检查缓存中是否存在即将请求的资源,如果存在,则直接返回缓存中的资源。

    53010

    Service Worker初探

    为了方便我们的开发和调试,在开发的过程中,可以使用localhost来使用Service Worker。一旦把应用部署到服务器之后,必须使用https保证Service Worker的正常工作。...在install事件中,我们将一个离线页面缓存进来。在fetch事件中,如果资源请求失败的话,使用刚才缓存的离线页面。这样,我们的web应用就会在离线状态下,加载这个离线页面了。...cache.put(url) 如果我们要添加单个缓存可以使用cache.put方法 cache.add(key, value) 在缓存一个请求数据的时候,我们希望将缓存和当前的请求想匹配的话。...如果浏览器缓存已过期,请求正式到达服务器。再去判断资源的ETag和Last-Modified有没有发生变化,决定是否使用服务器缓存。 CacheStorage不能取代过去的HTTP缓存。...`)) 在断网的时候,点击按钮,服务器不会收到请求。当设备恢复网络的时候,服务器会马上收到请求。我们可以将返回值的errCode修改为1,尝试下Service Worker是否会发送多次请求。

    1.3K20
    领券