总之，不管怎样，JSDelivr在决定将节点设置为NearChina，可以肯定的是，在最近很长一段时间内，我们都无法享受国内外双料同时加速的快感，换句话说，jsd在中国就被永久地打入了冷宫。...是的，接下来的两张图你应该能显著的看到这一差距： [没有ServiceWorker中继，平淡无奇] [ServiceWorker中继，刺激拉满] 在第一张图中，用户和服务器的关系直的就像电线杆，用户想要什么...由于sw不可访问window，在sw中是无法使用ajax或XMLHTTPRequest。同时，fetch是一个异步函数，直接调用它会返回一个Promise。...此脚本适用于卸载ServiceWorker的替换脚本。因为sw在无法拉取新版本时不会主动卸载，依旧保持运行，填入一个透明代理sw即可。...如果有任何一个url长时间无法联通，将会导致极长的检测时间浪费。
前端缓存分析 前端缓存 大致可以分为 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('.
缓存方式 详解 使用情况 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 协商缓存并非是一种被强缓存“低级”的策略，对于一些特殊的应用场景或资源，协商缓存优于强缓存。
ServiceWorkers可用于拦截web请求，并返回一个缓存版本，这样的话即使在离线的状态下，网站仍然处于可用状态。。...如果有的话，将这些内容返回，否则的话，建立相应的web请求，并将返回的内容缓存起来。 ?...也就是说，所有经过缓存层的内容都已经过了某种过滤。 3 JSONP终点 当然，ServiceWorkers自身也有一定的局限性，即只能安装到与请求资源相同的域中。...这就意味着，要将一个serviceWorker安装到c0nrad.io的话，需要像下面这样来注册该serviceWorker： navigator.serviceWorker.register('https...4 完整的攻击流程 创建最终的有效载荷（窃取电子邮件、监视网络账户等） 使用JSONP启动有效载荷 利用XSS将有效载荷注入受害者机器 获取持久性访问权限具体案例 攻击者通常利用这种手法维护持久性的访问权限
我们需要在脚本 (例如，在 ServiceWorker 中) 中处理缓存更新的方式。...此文件不应包含对DOM的任何引用，因为它将无法访问DOM。 在我们的主JavaScript文件中，使用Worker构造函数创建一个新的Worker对象。...这是一种「确保内容新鲜度」的好策略，但其权衡是「当用户离线时将无法正常工作」。 要确保请求直接通过到网络，只需「不对匹配的请求调用 event.respondWith」。...它「通过跳过 HTTP 缓存可能启动的任何与服务器的内容新鲜度检查，为不可变资产提供了速度提升」。更重要的是，「任何缓存的资产都将在离线时可用」。 4....检查缓存内容 如果无法检查缓存，就很难确定缓存策略是否按预期工作。Chrome DevTools 的应用程序面板提供了一个子面板，用于检查缓存实例的内容。
浏览器客户端代码 说到 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 不存在资源争抢的问题。
突然发现 WP-SUPER-CACHE 无法预缓存，点击【立即加载预缓存】后没有任何效果，并且垃圾回收定时器也失效了，缓存文件全是几天前的，感觉很奇怪！...闲下来的时候，突然想起前些天对博客做的一些优化，于是回头挨个去检查，最终发现导致预缓存和定时器失效的原因是因为我优化的时候禁用了 WP Cron 的功能！ ?...当我把添加的代码删除后，wp-super-cache 的预缓存功能立马就开始工作了。。。 看来，这个功能不能随便禁用了！...发现 wp-super-cache 无法预缓存的朋友，也请检查下 wp-config.php 里面是不是存在禁用 WP_CRON 的语句。
所以服务端无法记住当前的 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
所以在 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 应用的开启速度，更多是优化体验方面的。
本章包含以下知识点 显示离线页面 加载离线图片 加载离线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 <!
这样，下次有人从设备访问应用程序时，UI立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。 一个App shell的代码结构如下： <!...() { navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' }) .then(...serviceWorker.js主要对有install跟fetch事件进行监听，对cache进行操作，达到缓存的目的。...除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。...通俗来讲，您需要告诉用户当他们无法连接上网络时会发生什么变化。比如： 哪些功能无法使用； 或者是页面上的数据是什么时间更新的； 目前的网络连接情况； 等等。
基本上，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。
而Service Worker，我们可以用它来进行本地缓存，相当于一个本地的proxy。说起缓存，我们会想起我们常用的一些缓存技术来缓存我们的静态资源，但是老的方式是不支持调试的，灵活性不高。...使用Service Worker来进行缓存，我们可以用javascript代码来拦截浏览器的http请求，并设置缓存的文件，直接返回，不经过web服务器，然后，做更多你想做的事情。...而 serviceWorker 需要 Promise 支撑，目前支持的浏览器如下： ? 支持 serviceWorker 的浏览器： ?...开始尝试攻击： 首先在 https 站点中找到一个 Xss，利用 Xss 注册一个 serviceWorker.registration 实例： navigator.serviceWorker.register...比如：杀死该JSONP路径以及其子目录的全部接口，从而导致网站无法正常使用。 0x04 中止及防范攻击 1.
最近遇到了一个 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参数值的问题了。
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) 为了验证网页在离线时能访问的能力，
它无法直接访问 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
不需要后端缓存服务，对于千人千面的复杂页面，对后端 ssr 来说缓存规模庞大的无法计算。 相比后端 ssr，在前端可以绕过复杂的权限系统，同时 http 请求的权限问题也无需关心。...相对的，缺点是： 需要客户端支持 serviceWorker。 第二次首屏才会生效。后端 ssr 可以做到访问前预缓存 ssr 结果。 可能破坏前端页面状态，因为在同一个环境偷偷执行了一些页面逻辑。...当然第一次没有缓存，所以在没有命中缓存时，会同步的做两件事： 发送请求，拿到后端返回的 response，扔给浏览器。这是最普通的请求逻辑。...附上代码片段： if (navigator.serviceWorker) { navigator.serviceWorker.addEventListener("message", event =>...) { navigator.serviceWorker.controller.postMessage({ type: "serverRenderContent
❝服务工作线程的一个主要能力是可以「通过编程方式实现真正的网络请求缓存机制」 ❞ 有如下特点： 线程缓存「不自动缓存」任何请求 「所有缓存都必须明确指定」 线程缓存「没有到期失效的概念」 除非明确删除...，否则缓存内容「一直有效」 线程缓存必须「手动更新和删除」 缓存「版本」必须「手动管理」 每次线程更新，新服务工作线程负责提供新的缓存键以保存新缓存 「唯一」的浏览器「强制逐出策略」基于线程缓存占用的空间...缓存超过浏览器限制时，浏览器会基于「最近最少使用」（LRU，Least RecentlyUsed）原则为新缓存腾出空间 关于LRU我们在网络拾遗之Http缓存中有介绍 ❝本质上，服务工作线程缓存机制是一个...顶级服务脚本和通过 importScripts()在服务工作线程内部导入的文件「永远都不会被缓存」 navigator.serviceWorker .register('/serviceWorker.js...「缓存检查」 ❞ 对于任何肯定有缓存的资源（如在安装阶段缓存的资源），可以采用该策略。
在前段时间参加的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效果仍然有限。
通过service worker，我们可以预先缓存网站的某些资源。 我们作为资源引用的是JavaScript文件，CSS文件，图像和一些字体。...install事件比较适合用来预加载数据和初始化缓存，activate事件适合用来清理旧版本的数据。...虽然这么说，但我们无法保证service worker任何时候都处于生效状态，所以在service worker中定义的全局状态可能不会被保留。...这就意味着service worker无法访问网页的dom等其他信息。因此我们也无法通过 DevTools里面同一个tab来调试service worker。...在service worker中，它大部分的工作是在监听的事件中来完成的，比如在install事件中完成资源缓存。同样我们可以在这里打断点。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
