首页
学习
活动
专区
工具
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文件,刷新页面还是没有变化

    85620

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

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

    1.3K10

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

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

    31820

    Service Worker 全面进阶

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

    3.6K10

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

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

    79300

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

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

    1.6K20

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

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

    1K20

    PWA 方案相关技术分享

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

    77220

    浅谈web前端发展趋势

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

    1.8K10

    Service Worker应用

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

    55410

    浅尝 service worker

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

    54110

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

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

    2.2K130

    「持续集成实践系列 」Jenkins 2.x 构建CI自动化流水线常见技巧(二)

    在上一篇文章,我们介绍了Jenkins 2.x实现流水线两种语法,以及在实际工作该如何选择脚本式语法或声明式语法。...示例如下: timeout(time:60,unit:'SECONDS'){ //该代码块过程被设置为超时 } 默认时间单位是min。如果发生超时,该步骤就会抛出一个异常。...等待直到(waitUntil) 引入waitUntil步骤,导致整个过程一直等待某件事发生,通常这里“某件事”指的是可以返回true闭包。...如果代码过程永不返回true的话,这个步骤将会无期限地等待下去而不会结束。所以一般常见做法,结合timeout步骤来封装waitUntil步骤。...Git stash函数是为了暂存一个工作目录内容,缓存那些还没有提交到本地代码仓库代码。而Jenkins stash函数是为了暂存文件,以便在节点间共享。

    1.3K20

    web渐进式应用PWA

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

    1.2K10

    从【字节码缓存】再进一步看【HTTP 缓存】,面试官:“这么细吗?”

    Isolate 内存缓存: Isolate 缓存发生在同一进程(同一页面),它试图尽可能快而小地使用已经可用数据; 它劣势在于:a. 命中率偏低(80%);b....它还将文件存储在浏览器磁盘缓存。 ② 当第二次请求 JS 文件(即 warm run)时,Chrome 从浏览器缓存获取该文件,并再次将其提供给 V8 进行编译。...关联,修改 URL,会在浏览器缓存资源创建一个新资源入口,并伴随着一个冷缓存入口; 还有 1 个细节就是,我们做 A/B 测试时,也可能出现缓存不同资源,所以 保证运行的确定性,也是保证能走对应缓存前提...JS 脚本合并到一个大 bundle ,将其分成多个较小脚本往往更有利于除了字节码缓存之外其他原因(如:多个网络请求、编译、页面交互等)。...但 service worker 缓存主要用于 PWA,所以它与 Chrome “自动”缓存机制略微不同; service worker ,当 JS 资源被添加到缓存时候,它们立即创建字节码缓存

    38320
    领券