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

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

这可以解决开发人员的共同难题,即在 service worker 脚本上设置无意的 Cache-Control 标头可能导致的更新延迟。...对于 Chrome 68 之前的版本,/service-worker.js的更新请求会受HTTP缓存的影响(包含大多数的fetch请求)。...Chrome 78的行为与几年前Firefox 56在Firefox中实现的行为相同。Safari也已经实现了此行为。...考虑到浏览器版本升级需要些时间,因此即使在较新的浏览器上可以忽略它们,但依然推荐在service worker脚本上设置Cache-Control: max-age=0HTTP头。...如果想避免这种额外的HTTP流量,可以在脚本的URL中包含semver或hash,并设置长效的Cache-Control头,并使用默认的updateViaCache: "imports"行为。

2.2K10

超文本传输协议 HTTP

数据被包含在请求本文中。这个请求可能会创建新的资源或修改现有资源,或二者皆有。 PUT:向指定资源位置上传其最新内容。 DELETE:请求服务器删除Request-URI所标识的资源。...--- http缓存 通过http获取网络数据的成本是非常高的,尤其是当需要大范围获取数据的时候,好在浏览器都有缓存策略 1.使用 ETag 验证缓存的响应: 服务器下发给客户端的时候在ETag头返回一个验证令牌...Cache-Control 头在 HTTP/1.1 规范中定义,取代了之前用来定义响应缓存策略的头(例如 Expires)。...注意:有些浏览器不允许从 HTTPS 的域跨域访问 HTTP,比如 Chrome 和 Firefox,这些浏览器在请求还未发出的时候就会拦截请求,这是一个特例。)...XDomainRequest (IE89专用) XDomainRequest是在IE8和IE9上的HTTP access control (CORS) 的实现,在IE10中被 包含CORS的XMLHttpRequest

83910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一文搞懂浏览器缓存策略

    需要注意的是,Chrome中在当前地址栏,不改变内容,直接回车,等同于刷新当前页,而在Firefox下与其他在地址栏回车一样。这一点比较特殊,需要适当区分下。...强缓存生效时的区别在于新标签打开为from disk cache,而当前页刷新派生资源是from memory cache。 而在Firefox下,当前页面刷新,所有资源都会如上图所示。...Chrome和Firefox浏览器下的刷新操作(Command+ R / F5)均是在请求头上添加了max-age=0指令,表示不使用强缓存,但允许协商缓存(在介绍了协商缓存的Last-Modified...(Firefox下相同,不单独验证,主要最开始提到的主资源和派生资源在两个浏览器中表现形式的不同)。 ? 此外,经验证,Chrome和Firefox均对max-age>0的情况支持不好。...在Chrome下,通过Modify Headers插件(Chrome和Firefox下均有类似插件)给请求添加max-age=7200。

    1.1K20

    你了解 Cache-Control 作为请求头是什么意思吗?

    Cache-Control 作为「响应头」,用以控制缓存策略,这也是前端 HTTP 缓存策略的基础。 但是你知道 Cache-Control 也可以作为「请求头」吗,以及它作为请求头有何作用?...Cache-Control: max-age=0 作为请求头,将会验证服务器资源的新鲜度,如果缓存未过期,则利用缓存,返回 304 状态码,否则重新获取资源返回 200 状态码。...缓存策略通过服务器进行配置,但是缓存资源在 HTTP 客户端进行实现,而 Apifox2 等进行 HTTP 管理的 HTTP 客户端未实现缓存,因此在浏览器中使用控制台的网络面板进行测试。...通过使用 fetch 发送请求,并通过 headers 控制请求头 cache-control,在控制台中进行测试,并在网络面板检测网络状况。...实际上的实现是每次发送请求携带 Cache-Control: no-cache 头部。 3. 实例 我在 Apifox2 中演示了知名网站关于重定向的实例。见文档3。 图片 4.

    3.1K50

    【前端词典】F5 同 Ctrl+F5 的区别你可了解

    资源本身大小数值 当 http 状态为 200 是实实在在从浏览器获取的资源,当 http 状态为 304 时该数字是与服务端通信报文的大小,并不是该资源本身的大小,该资源是从本地获取的。...F5 同 Ctrl+F5 的区别 为什么 F5 后请求的是缓存,而 Ctrl+F5 就重新请求资源呢?答案就是这两种方式发送的请求头不一样(不同的浏览器发送的请求头也有一些区别)。 F5 ?...该文件是从缓存中获取的并未进行通信,所以详细标头并不会显示。强缓存 fromdisk cache 或者 frommemory cache ,都不会正确的显示请求头。...可以看出 chrome 和 firefox 在按下 F5 后,其内部使用的缓存机制不同。 firefox 使用的是协商缓存,而 chrome 使用的是强缓存。...那么在 Firefox 中的表现是怎样的呢? ? 请求头中同样多了两个 Cache-Control:no-cache,Pragma:no-cache 参数。

    99530

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

    在这种模式下,可以在响应中添加 ETag(你选择的版本 ID)或 Last-Modified 日期标头。...通常情况下,当我们对 HTML 进行重大修改时,很可能也会修改 CSS 以反映新的结构,并更新 JS 以适应样式和内容的变化。这些资源是相互依存的,但缓存标头无法表达这一点。...max-age 是相对于响应时间而言的,因此如果上述所有资源都是作为同一导航的一部分被请求的,那么它们将被设置为在大致相同的时间过期,但仍然存在竞争的可能性。...,Chrome/Opera 尚不支持缓存选项,而 Firefox Nightly 最近才支持缓存选项,不过你也可以自己尝试一下: self.addEventListener('install', (event...Service Worker 的最佳工作方式是增强而不是变通,因此与其与缓存对抗,不如与它合作!

    35620

    Web前端性能优化(三)

    在未来这些特性将包括推送消息,背景后台同步,geofencing(地理围栏定位),但它将推出的第一个首要特性,就是拦截和处理网络请求的能力,包括以编程方式来管理被缓存的响应,查看当前浏览器上 运行的 Service...,no-cache 的作用是指跳过文档过期的验证而直接进行服务器再验证,而 no-store 是指资源禁止被缓存在浏览器缓存中,根据 Expires 和 Cache-Control 的值来验证文档(资源副本...都是用于记录页面最后修改时间的 HTTP 头信息,需要注意的是,Last-Modified 是由服务器往客户端发送的 HTTP 头,If-Modified-Since 是由客户端往服务器发送的头所以再次请求本地存在的...,如果不是最新的,则说明资源被修改过,则响应 HTTP 200,并且返回最新的资源;如果是最新的,则相应 HTTP 304 ,浏览器会继续使用原先保存的该资源的副本,这样在网络上传输的数据就会大大减少,...同时也减轻了服务器的负担Etag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识,与之对应的是 If-None-Match 字段,在服务器再验证过程中,浏览器发送的 HTTP 请求的请求头中会带上

    68530

    使用 curl 发送请求

    cURL 可以与 Chrome Devtool 工具配合使用,把浏览器发送的真实请求还原出来,附带认证信息,脱离浏览器执行,方便开发者重放请求、修改参数调试,编写脚本。...ChromeDevTools  Chrome DevTools(Chrome 开发者工具)是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。在测试的过程中,也常常用作一个简单的抓包工具。...操作步骤如下所示:  (1)选择右上角 Chrome 菜单,然后选择更多工具 -> 开发者工具  (2)右键,选择检查/审查元素在 Network 面板中可以查看通过网络来请求来的资源的详细信息cURL...2)将命令 copy 在 gitbash 或 bash 上并运行,则会看到返回信息。  ...(1)篡改请求头信息,将 User-Agent 改为 ‘testing-studio’。

    12310

    一篇文章带你搞懂强大的爬虫模块requests中的常用函数方法

    requests.post() 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体。 requests.put() 从客户端向服务器传送的数据取代指定的文档的内容。.../3 request方法/ 该方法用于构造一个请求,可以是get post put等任意一种 该方法的参数列举如下: url:请求 URL。...params:请求参数,字典类型,常用于发送 GET 请求时使用。 timeout:超时时间 ,整数类型。 headers:设置请求头。.../6 put方法/ 一般是从客户端向服务器传送的数据取代指定的文档的内容。 ? /7 patch方法/ 一般就是向URL提交局部更新请求。 ?...Firefox/47.0表示火狐浏览器 所以这一行字段表示信息为对应的用户代理信息是Mozilla5.0( Windows NT61;WOw64;rv:47.0) Gecko20100101Firefox

    82620

    技术分享 | 使用 cURL 发送请求

    cURL 可以与 Chrome Devtool 工具配合使用,把浏览器发送的真实请求还原出来,附带认证信息,脱离浏览器执行,方便开发者重放请求、修改参数调试,编写脚本。...ChromeDevTools Chrome DevTools(Chrome 开发者工具)是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。在测试的过程中,也常常用作一个简单的抓包工具。...如何操作 选择右上角 Chrome 菜单,然后选择更多工具 -> 开发者工具 或者右键,选择检查/审查元素 在 Network 面板中可以查看通过网络来请求来的资源的详细信息: cURL常见用法 从浏览器...2、将命令 copy 在 gitbash 或 bash 上并运行,则会看到返回信息。.../get" curl 命令常用参数 图片 cURL实战演练 通过几个小实战演练,了解一些常用参数的用法 1、篡改请求头信息,将 User-Agent 改为 ”testing-studio curl -H

    88010

    软件测试|使用 cURL 发送请求

    cURL 可以与 Chrome Devtool 工具配合使用,把浏览器发送的真实请求还原出来,附带认证信息,脱离浏览器执行,方便开发者重放请求、修改参数调试,编写脚本。...ChromeDevToolsChrome DevTools(Chrome 开发者工具)是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。在测试的过程中,也常常用作一个简单的抓包工具。...如何操作选择右上角 Chrome 菜单,然后选择更多工具 -> 开发者工具或者右键,选择检查/审查元素在 Network 面板中可以查看通过网络来请求来的资源的详细信息:外链图片转存失败,源站可能有防盗链机制...2、将命令 copy 在 gitbash 或 bash 上并运行,则会看到返回信息。.../get"curl 命令常用参数图片cURL实战演练通过几个小实战演练,了解一些常用参数的用法1、篡改请求头信息,将 User-Agent 改为 ”testing-studiocurl -H "User-Agent

    98930

    浏览器缓存机制详解

    浏览器缓存就是当你打开一个网页,浏览器会自动下载副本到你电脑上,就相当于你另存为网页到某个地方而已,只不过这里是自动而已。当然不是浏览器能把各种 网页都能下载到本地电脑上,它是有特殊情况。...一般html,后者request是get请求,而post一般不缓存。(这个后面会说到) 当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。...缓存控制头 Cache-Control Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。...当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容自上次访问以来没有被修改 浏览器重新发送请求到服务器...当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容自上次访问以来没有被修改 浏览器呈现来自缓存的页面

    66920

    【Java核心面试宝典】Day18、GET和POST请求都有哪些常见面试题?

    下面是这四种头部信息中主要包括的内容: 通用头部包括有: 协议头 说明 举例 Cache-Control 用来指定当前的请求/回复中是否使用缓存机制 Cache-Control: no-store Connection...而post参数放置在请求主体中,并且参数不会被保留。因此相比于get方法,post方法更安全,主要用于修改服务器上的资源。 Get请求只支持URL编码,post请求支持多种编码格式。...Get方式需要使用Request QueryString来获取变量的值,而post方式通过Request Form来获取 Get方法产生一个tcp数据包,post方法产生两个(并不是所有的浏览器中都产生两个...2KB左右,像 Chrome, FireFox 等浏览器能支持的 URL 字符数更多,其中 FireFox 中 URL 最大长度限制为 65536 个字符,Chrome 浏览器中 URL 最大长度限制为...由于 POST 方法请求参数在请求主体中,理论上讲,post 方法是没有大小限制的,而真正起限制作用的是服务器处理程序的处理能力。

    38950

    用浏览器缓存绕过同源策略(SOP)限制

    而作者在测试中发现了Keybase的CORS策略错误配置,利用这种缺陷,可以操纵浏览器缓存获取用户敏感数据信息。一起来看看。...Keybase 是一个开源的跨平台即时通讯工具,在 PC 设备上支持 macOS、Linux 和 Windows 平台,并提供 Chrome/Firefox 浏览器扩展。...邮箱地址 我使用和剩余的邀请码数量 计费信息 上一次登录的时间戳、邮件形式的时间/日期验证码 TripleDes加密的PGP私钥 但是,我并没有私钥存储在Keybase上啊,之后我才了解到这是Keybase...但是,我在服务端对该API的响应消息中发现了一个名为 ‘Etag’ 的消息头,这是一个浏览器缓存标记头,代表客户端请求资源未发生变化,那么浏览器就可以从用户的缓存内容中去取出然后响应给用户。...Payload与漏洞利用 我想起Twitter用户@Bitk_曾用过一个技巧,那就是用javascript的fetch API方法去强制从浏览器缓存中直接发起一个跨域请求,而恰巧 Keybase 在这里未曾对服务端响应头部署过任何缓存控制头

    1.3K10

    浏览器缓存机制浅析

    核心就是把缓存的内容保存在了本地,而不用每次都向服务端发送相同的请求,设想下每次都打开相同的页面,而 在第一次打开的同时,将下载的js、css、图片等“保存”在了本地,而之后的请求每次都在本地读取,效率是不是高了很多...真正的浏览器工作的时候并不是 将完整的内容保存在本地,各种浏览器都有不同的方式,譬如firefox是一种类似innodb的方式存储的key value 的模式,在地址栏中输入 about:cache...需要注意的是,浏览器会在第一次请求完服务器后得到响应,我们可以在服务器中设置这些响应,从而达到在以后的请求中尽量减少甚至不从服务器获取资源的目的。浏览器是依靠请求和响应中的的头信息来控制缓存的。...比如如上一个响应头,Expires规定了缓存失效时间(Date为当前时间),而Cache-Control的max-age规定了缓存有效时间 (2552s),理论上这两个值计算出的有效时间应该是相同的(上图好像不一致...实际上ETag并不是文件的版本号,而是一串可以代表该文件唯一的字符串(Apache中,ETag的值,默认是对文件的索引节(INode),大小 (Size)和最后修改时间(MTime)进行Hash后得到的

    86240

    Django的请求与响应

    Host: 127.0.0.1:8000 ---> 请求头 Connection: keep-alive sec-ch-ua: " Not;A Brand";v="99", "Google Chrome...请求方法 HTTP1.0定义了三种请求方法: GET、 POST、 HEAD HTTP1.1 新增了五种请求方法: OPTIONS、PUT、DELETE、TRACE以及CONNECT方法 方法 描述...HEAD 类似于GET请求,只不过返回的响应中没有具体内容,只返回响应头。 POST 向指定资源提交数据进行处理请求,数据被包含在请求体中。 PUT 从客户端向服务器发送的数据取代指定文档中的内容。...: 请求中的元数据(消息头) request.META['REMOTE_ADDR']可以请求到客户端地址,当然你可以请求META中的任何信息....request.method == "GET": 处理GET请求内容 elif request.method == "POST": 处理POST请求内容 GET处理 GET请求动作,一般用与向服务器获取数据

    61510

    浏览器缓存机制浅析

    核心就是把缓存的内容保存在了本地,而不用每次都向服务端发送相同的请求,设想下每次都打开相同的页面,而在第一次打开的同时,将下载的js、css、图片等“保存”在了本地,而之后的请求每次都在本地读取,效率是不是高了很多...真正的浏览器工作的时候并不是将完整的内容保存在本地,各种浏览器都有不同的方式,譬如firefox是一种类似innodb的方式存储的key value 的模式,在地址栏中输入 about:cache 可以看见缓存的文件...需要注意的是,浏览器会在第一次请求完服务器后得到响应,我们可以在服务器中设置这些响应,从而达到在以后的请求中尽量减少甚至不从服务器获取资源的目的。浏览器是依靠请求和响应中的的头信息来控制缓存的。...比如如上一个响应头,Expires规定了缓存失效时间(Date为当前时间),而Cache-Control的max-age规定了缓存有效时间(2552s),理论上这两个值计算出的有效时间应该是相同的(上图好像不一致...实际上ETag并不是文件的版本号,而是一串可以代表该文件唯一的字符串(Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。

    52810

    对不起,看完这篇HTTP,真的可以吊打面试官

    当 Web 缓存在其存储中具有请求的资源时,它将拦截该请求并直接返回资源,而不是到达源服务器重新下载并获取。...缓存的有效性是由多个标头来共同决定的,而并非某一个标头来决定。如果指定了 Cache-control:max-age=N ,那么缓存会保存 N 秒。...HTTP 日期始终以格林尼治标准时间表示,而不是本地时间。...当客户端在本地修改资源打算重新发送之前,第二个客户端可以获取相同的资源并对资源进行修改操作,这样就会造成问题。...这个概念是允许所有的客户端获取资源的副本,然后让他们在本地修改资源,并成功通过允许第一个客户端提交更新来控制并发,基于此服务端的后面版本的更新都将被拒绝。 ?

    6.4K21

    如何使用 HTTP Headers 来保护你的 Web 应用

    事实上,现在来说,了解网络安全并不是锦上添花,而是 Web 开发者的必需任务,特别对于构建面向消费者的产品的开发人员。...需要注意的是,禁用缓存提高安全性及保护机密资源的同时,也的确会带来性能上的折损。所以确保仅对实际需要保密性的资源禁用缓存,而不是对服务器的任何响应禁用。...Internet Explorer 是第一个推出这种机制的,在 2008 年的 IE 8 中引入了 XSS 过滤器的机制,而 WebKit 后来推出了 XSS 审计,现今在 Chrome 和 Safari...然而请注意,这种机制是有局限性的,不是所有浏览器都支持(例如 Firefox 就不支持 XSS 过滤),并且依赖的模式匹配技术可以被欺骗。...此响应头在 2008 年引入 IE8,目前大多数主流浏览器都支持(Safari 是唯一不支持的主流浏览器),它指示浏览器在处理获取的资源时不使用嗅探。

    1.2K10

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券