「该Promise不会拒绝」 controller： 返回与「当前页面关联」的激活的 ServiceWorker 对象，如果没有激活的服务工作线程则返回 null。...waiting： 如果有则返回状态为 waiting（等待）的服务工作者线程，否则为 null。...在新窗口中打开指定 URL，实际上会给当前服务工作线程添加一个「新Client」 2. 这个新 Client 对象以解决的Promise形式返回。 3....浏览器获取脚本文件，然后执行一些「初始化任务」，服务工作线程的生命周期就开始了。 (1) 确保服务脚本来自「相同的源」。 (2) 确保在「安全上下文」中注册服务工作线程。...服务工作者线程中的绝大多数代码应该在「事件处理程序」中定义。 大多数浏览器将服务工作线程实现为「独立的进程」，而该进程「由浏览器单独控制」。
Service Worker 他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 后台线程：独立于当前网页线程； 网络代理：在网页发起请求时代理，来缓存文件—...不同于普通Worker，Service Worker 是一个浏览器中的进程而不是浏览器内核下的线程（Service Worker是走的另外的线程,可以理解为在浏览器背后默默运行的一个线程,或者说是独立于当前页面的一段运行在浏览器后台进程里的脚本...如果注册成功，service worker就会被下载到客户端并尝试安装或激活（见下文），这将作用于整个域内用户可访问的URL，或者其特定子集。...Service Worker的使用 Service worker是一个注册在指定源和路径下的事件驱动worker。...如果注册失败，可以通过 catch 来捕获错误信息；如果注册成功，可以使用 then 来获取一个 ServiceWorkerRegistration 的实例 参考网易新闻的注册方式： "serviceWorker
这里的渐进式增强是指无论用户用的是什么浏览器都能保证应用能正常工作。...service worker是独立于当前页面的运行在浏览器后台进程的脚本。利用它，我们可以拦截页面请求，缓存文件。...使用service worker有几点注意： 页面必须基于https 独立于当前网页进程，不会对主线程造成影响 不能操作DOM,但可以通过postMessage与页面通信 可以拦截作用域范围内的所有请求...从图中可以看出，用户访问某个URL的时候， 服务器返回相应的资源文件，此时会调用navigator.serviceWorker.register('/teacher/sw.js') ， 下载sw.js...sw 是挂载到navigator对象上的， 使用之前先判断是否存在 作用域：SW 的默认作用域为基于当前文件 URL 的 ./， 如果想要改变作用域，可以使用scope eg: navigator.serviceWorker.register
Service Worker下文简称sw，在我的理解看来就类似于一个filter，是介于服务器与客户端之间的一个中间人，它会拦截当前网站的所有请求，根据其编写的逻辑，在请求需要转发给服务器时进行转发，否则就使用离线缓存...sw它算是一个独立的，运行在浏览器后台的脚本，因此用它来执行消耗大资源的程度时并不会对主线程造成阻塞；Service Worker 是一个浏览器中的进程而不是浏览器内核下的线程，因此它在被注册安装之后，.../时，此时会注册失败，此时若要注册需要将scope修改为./sw/。...fetch事件做的是每当sw向服务器发起请求的时候这个事件就会被触发，当然了有一个限制就是页面的路径不能大于 Service Worker 的 scope，不然 fetch 事件是无法被触发的。...一个比较常见的就是利用jsonp达成xss，但需要注意到的是navigator.serviceWorker.register无法加载跨域的js脚本，然而可以通过importScripts方法进行加载，当然了同样需要是
Service Worker：一个Service Worker是一段运行在浏览器后台进程里的脚本，他独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。...在将来，基于它可以实现消息推送，静静更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力，是PWA的核心。...如果有任何文件加载或缓存失败，那么安装过程就会失败，service worker就不能被激活（也即没能安装成功）。如果发生这样的问题，别担心，它会在下次再尝试安装。...准备index.js，用于注册service-worker if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js...('servcie worker 注册失败')}); } 在上述代码中，注册了service-worker.js作为当前路径下的service worker。
保持最新 - 得益于 service Woker 的更新进程，应用能始终保持最新状态。...虽然使用 HTTPS 会让您服务器的开销变多，但使用 HTTPS 可以让您的网站变得更安全 ,如何给网站开启 https 2.创建一个应用程序清单（Manifest） 应用程序清单提供了和当前渐进式 Web...您需要在页面对应的 JavaScript 文件中注册该 ServiceWorker： //main.js if ("serviceWorker" in navigator) { // 注册 service...4：创建可用的离线页面 离线页面可以是静态的 HTML，一般用于提醒用户当前请求的页面暂时无法脱机使用。然而，我们可以提供一些可以阅读的页面链接。 Cache API 可以在 main.js 中使用。...然而，该 API 使用 Promise，在不支持 Promise 的浏览器中会失败，所有的 JavaScript 执行会因此受到影响。
无论网络连接如何，能够使用Web应用程序意味着用户可以在飞机，地铁或连接受限或不可用的地方不间断地操作。 该技术将有助于提高客户端的工作效率，并将提高应用程序的可用性。...Service workers service worker是浏览器和服务器之间的脚本，主要作用是拦截请求，修改响应，以及一些其他的作用。...我们使用了空js文件注册了service worker。register的第二个参数的scope表示此service worker的作用范围是当前域名下面的根目录。 如图显示：注册成功。...调试 service worker在浏览器中单独线程运行，通过单独的方式和页面通信。但是和页面是处于不同的作用域。这就意味着service worker无法访问网页的dom等其他信息。...在service worker中，它大部分的工作是在监听的事件中来完成的，比如在install事件中完成资源缓存。同样我们可以在这里打断点。
[bq7kiloym4.png] SW具有以下特征： 一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。...Service Worker 的工作原理 Service Worker是基于注册、安装、激活等步骤 注册 if ('serviceWorker' in navigator) { window.addEventListener...(function (err) { // 注册失败:( console.log('ServiceWorker registration failed: '...如果新工作SW线程出现不正常状态代码（例如，404）、解析失败，在执行中引发错误或在安装期间被拒，则系统将舍弃新工作线程，但当前工作线程仍处于活动状态。...支持率不高 Chrome在安卓移动端上的占有率很低 依赖的GCM服务在国内无法使用 微信小程序的竞争 PWA应用 Lavas 是一套基于 Vue 的 PWA 解决方案，能够帮助开发者快速搭建 PWA 应用
service worker 简介 service worker 的功能和特性可以总结为以下几点： service worker 是一个独立 worker 线程，独立于当前网页进程，有自己独立的 worker...( https 请求)和缓存文件，缓存的文件直接可以被网页进程取到（包括网络离线状态） 离线内容开发者可控；能向客户端推送消息；不能直接操作 dom 必须在 https 环境下才能工作，当然 localhost...}) .catch(function (err) { // 注册失败:( console.log('ServiceWorker...为了避免 service worker 缓存自己导致死锁无法升级，通常将 sw.js 本身的缓存直接交给 HTTP 服务器缓存。...新服务工作线程取得控制权后，将会触发其 activate 事件。
假设当前域名下所有的覆盖式发布的静态资源和接口数据全部存储在同一个 cacheName 里面，业务部署更新后，无法识别旧的冗余资源，单靠前端无法完全清除。...在成功完成安装并处于“activate 活动状态”之前，服务工作线程不会收到 fetch 和 push 等事件。 默认情况下，不会通过服务工作线程获取页面，除非页面请求本身需要执行服务工作线程。...因此，您需要刷新页面以查看服务工作线程的影响。 clients.claim() 可替换此默认值，并控制未控制的页面。...= null) { return response; } return fetch(e.request.url); }) ) }); // 更新静态资源...参考文献： 服务工作线程：简介 Web 技术文档 Web API 接口 ServiceWorker 借助Service Worker和cacheStorage缓存及离线开发 网站渐进式增强体验(PWA)
Service Worker（服务工作线程）是一种在浏览器背后运行的脚本，用于提供强大的离线和缓存功能，以改善 Web 应用程序的性能和可靠性。...使用 // 注册 Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js...2.安装 需要在网页进行注册来安装，安装前需要检查是否支持 serviceWorker，如果支持，每次页面加载时就调用 register()，浏览器将会判断是否已注册。...如果其中的一个文件下载失败，那么安装步骤将失败。如果缓存文件列表过长，将会增大失败的几率。...持续更新 PWA 始终保持最新状态，无需用户手动更新，这消除了版本管理的烦恼。 安全性 通过 HTTPS 协议提供服务，保护用户数据不被窥探，并确保内容不被篡改。
Service Worker 是一个运行在浏览器后台进程里的js，基于它可以实现消息推送，静默更新以及拦截和处理网络请求，包括可编程的响应缓存管理，是 PWA 的核心。...若install失败，则退出等待下次访问再启动；否则触发activate事件。 在activate中，判断当前页面是否在上文声明的 filesToCache 列表中，如果是则接管网页的显示。...if('serviceWorker' in navigator) { //注册上一步创建的js文件 navigator.serviceWorker .register...而如果install失败了，那么接下来 service worker 就完全不会工作了。...但如果刷新后还是看不到，这意味着当前打开的页面没有已经被注册的 Service Worker，检查一下 注册 步骤的js是否被加载了吧。
但是浏览器是不会允许Service Worker一直处于工作状态。因为随着用户打开越来越多的注册了Service Worker的页面，性能肯定会收到影响。...为了方便我们的开发和调试，在开发的过程中，可以使用localhost来使用Service Worker。一旦把应用部署到服务器之后，必须使用https保证Service Worker的正常工作。.../offline.html') }) )}) 请注意，我们刚刚提到过Service Worker的安全策略只允许我们在Https或者localhost下注册它，所以我们一定要开启一个本地服务器来运行我们的代码示例...cache.put(url) 如果我们要添加单个缓存可以使用cache.put方法 cache.add(key, value) 在缓存一个请求数据的时候，我们希望将缓存和当前的请求想匹配的话。...CacheStorage因为Service Worker的作用域问题，只能控制范围内的缓存，无法控制cdn和在其他域下的接口数据。 缓存模式 缓存模式主要探讨了一个关于缓存利用率和更新的权衡问题。
它无法直接访问 DOM，但可以通过 postMessage 接口发送消息来和 UI 进程通信。...拦截网络请求是 Service Workers 的一个重要功能，通过它能完成离线缓存、编辑响应、过滤响应等功能。 想更深入的了解 Service Workers，推荐阅读文章服务工作线程：简介。...调用 serviceWorker.register 注册，参数 /sw.js 为脚本文件所在的 URL 路径 navigator.serviceWorker.register('/sw.js...），如果发现和当前已经注册过的文件存在字节差异，就将其视为“新服务工作线程”。...通过打开开发者工具的 Application-Service Workers 一栏，就能看到当前页面注册的 Service Workers，正常的效果如图： ?
navigator.onLine: 只读，返回一个布尔值，指示浏览器是否正在联机工作。...navigator.serviceWorker: 只读，返回ServiceWorkerContainer对象，该对象提供对注册、删除、升级以及与相关文档的ServiceWorker对象通信的访问。...navigator.userAgent: 只读，返回当前浏览器的用户代理字符串。 navigator.vendor: 只读，返回当前浏览器的供应商名称。...navigator.registerProtocolHandler(scheme, url): 该方法允许网站注册它们打开或处理特定URL方案(又名协议)的能力。...navigator.sendBeacon(url, data): 该方法通过HTTP异步地向web服务器发送少量数据，它的目的是与visibilitychange事件一起使用(但不是与unload和beforeunload
渐进式：能确保每个用户都能打开网页，可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问，不过其他功能都像原来一样没有影响。...主要用来做持久的离线缓存。 一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。...* 安装 (install) 失败，激活 (activating) 失败 都进入废弃 (redundant) 状态 Service Worker 有几个重要的功能性的的事件 fetch (请求)：当浏览器在当前指定的...通过 PUSH API，当订阅了推送服务后，可以使用推送方式唤醒 Service Worker 以响应来自系统消息传递服务的消息，即使用户已经关闭了页面。...console.log('scope: ', registration.scope); }) .catch(err => console.log('serviceWorker 失败'), err
描述 Service Worker本质上也是浏览器缓存资源用的，只不过他不仅仅是Cache，也是通过worker的方式来进一步优化，其基于h5的web worker，所以不会阻碍当前js线程的执行，其最主要的工作原理...后台服务钩子。 自定义模板用于特定URL模式。性能增强，比如预取用户可能需要的资源，比如相册中的后面数张图片。...另外写完相关代码后建议重启一下服务，之前我就遇到了无法缓存的问题，包括disk cache和memory cache，要重启服务才解决。...console.error("注册失败") }) 一旦登记成功，接下来都是Service worker脚本的工作，下面的代码都是写在service worker脚本里面的，登记后，就会触发install...，例如关闭文件服务器或者在控制台的Network中选择Offline，而我们也可以看到页面依旧正常加载，不需要网络服务，另外也可以在Network的相关的数据的Size列会出现(ServiceWorker
无非也是那几个http头的问题： Expires HTTP1.0的内容，服务器使用Expires头来告诉Web客户端它可以使用当前副本，直到指定的时间为止。...他基于h5的web worker，所以绝对不会阻碍当前js线程的执行，sw最重要的工作原理就是 1、后台线程：独立于当前网页线程； 2、网络代理：在网页发起请求时代理，来缓存文件； 兼容性 ?...一个简单的注册方式： (function() { if('serviceWorker' in navigator) { navigator.serviceWorker.register.../sw.js'); } })() 当然也可以考虑全面点，参考网易新闻的注册方式： "serviceWorker" in navigator && window.addEventListener...这就导致，我们的 SW 开启失败。
img 拆分同步逻辑的异步方案对大部分场景有效果，但并非一劳永逸，有以下几个问题： 并非所有 JS 逻辑都可拆分：比如数组排序，树的递归查找，图像处理算法，执行中需要维护当前状态，且调用上非线性，无法轻易拆分成子任务...根据计算机进程模型，主线程和 Worker 进程同属一个进程，可以访问和操作进程的内存空间，但为了降低多线程并发的逻辑复杂度，部分传输方式直接隔离了线程间的内存，相当于默认加了锁。...，CJS / AMD 等模块编译和依赖管理（用于开发目的） 后台服务钩子 自定义模版用于特定 URL 模式 性能增强，比如预取用户可能需要的资源，比如相册中后面数张照片 局限性 https：Service...Worker 必须运行在 HTTPS 协议上，但在本地环境中 http://localhost 或者 http://127.0.0.1 也可以 浏览器的兼容性 ?...img 用法 html 中 if ('serviceWorker' in navigator) { // 开始注册service workers navigator.serviceWorker.register
其核心思想是：系统有两个进程协同工作：Master进程和Worker进程。Master进程负责接收和分配任务，Worker进程负责处理子任务。...将 server worker 的生命周期设计成这样，其目的在于： 实现离线优先 允许新服务工作线程自行做好运行准备，无需中断当前的服务工作线程 确保整个过程中作用域页面由同一个服务工作线程（或者没有服务工作线程...如有指定的任何缓存文件无法下载，则安装步骤将失败 更新 更新 service worker 所在的 JavaScript 文件。...在这个步骤进行缓存管理，而不是在之前的安装阶段进行，原因在于：如果在 install 步骤中清除了任何旧缓存，则继续控制所有当前页面的任何旧 service worker 将突然无法从缓存中提供文件 self.addEventListener...，按下空格键，就可以开始了~ (4.4) Service Worker 的浏览器兼容性 由于一些相关的 google 服务无法用，iOS 上对其的支持也有限并在试验阶段，所以尚不具备大规模应用的条件；
云服务器
ICP备案
实时音视频
对象存储
云直播
