虽然使用 HTTPS 会让您服务器的开销变多，但使用 HTTPS 可以让您的网站变得更安全 ,如何给网站开启 https 2.创建一个应用程序清单（Manifest） 应用程序清单提供了和当前渐进式 Web...站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问 当 manifest 文件发生改变时，资源请求本身也会触发更新 3.创建一个 Service Worker Service...你可能不需要这个事件，但是在示例代码中，我们在该事件发生时将老的缓存全部清理掉了： // 清理旧的缓存 function clearOldCaches() { return caches.keys(...你可以在缓存需要更新的时候点击 refresh 按钮。 4：创建可用的离线页面 离线页面可以是静态的 HTML，一般用于提醒用户当前请求的页面暂时无法脱机使用。...为了避免这种情况，在访问/js/offlinepage.js 的时候我们添加了一段代码来检查当前是否在离线环境中： // 加载脚本以填充脱机页列表 if (document.getElementById
但是有很多时候，并不希望浪费时间，更期望达成是以下的体验：1. 拿出手机；2. 实现用户目标；3. 放回手机；4....尽管“Service workers”可通过加载缓存，来解决页面问题，但当客户端会发送多个数据时，会产生问题。...如何实现后台同步 真正的可扩展Web Style，可实现任何想要的功能。当用户有网络连接时，则立即触发事件。...如推送消息，使用service worker作为事件目标，当页面无法打开的时候，可帮助你打开，下面是为页面注册同步的代码： // Register your service worker: navigator.serviceWorker.register...可以在发送数据时使用调度，聊天，消息，邮件，文档更新，设置更改时，上传照片时，任何想要发送给服务器的数据都可以使用。
（从缓存里面读取 依然显示页面） 简介 背景 有一个困扰 web 用户多年的难题——丢失网络连接。...Service Worker 可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。...这是原生APP 本来就支持的功能，这也是相比于 web app，原生 app 更受青睐的主要原因。 什么是Service Worker ？...* SW.js 浏览器会自动检查差异性 * 发生变更 install 事件被触发 此时，旧的 SW 还在工作，新的 SW 进入 waiting 状态。...* 注意，此时并不存在替换接管，当你现在已经打开的页面关闭时，那么旧的 SW 则会被 kill 掉。 * 新的 SW 就开始接管页面的缓存资源。
页面通信不太熟了吗，不就 url 传参吗； 同域的情况下本地缓存也可以存值传递； 真的是这样吗？还有没有其它？ 再仔细审题。要求是：新打开的 B 页面关闭（包括意外崩溃）如何传回给 A 页面。...这里，如果你不清楚如何跳转到一个已经打开的页面，可以参考这篇，本质就是设置页面名即可。 在 chrome 浏览器下会报错“Blocked popup during beforeunload.”...; } 效果展示 其实传参也可以通过本地缓存传参，A 页面设置监听,在 B 页面设置 loacalStorage，本瓜亲测可行...Service Worker 每 10s 查看一遍时间戳，如果发现“状态是 running 且 时间戳有一段时间未更新了”，则说明这个网页 B 发生崩溃了。...需要知道：具体是如何做差，各监控指标的差异在哪，图片资源加载到底如何计时？ 呜呼！这算“面试造火箭，工作拧螺丝” 吗？ 未必！这些问题在实际工作中是极大可能遇到的，本瓜之前就用过监听本地缓存。
这导致页面的更新只能通过manifest文件中的版本号来决定。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。...被Service Worker缓存的文件，可以在Network中看到Size项为 from ServiceWorker： ?...claim() 方法会立即控制这些页面 //从而更新客户端上的serviceworker return self.clients.claim();...简介 在 Workbox 之前，GoogleChrome 团队较早时间推出过 sw-precache 和 sw-toolbox 库，但是在 GoogleChrome 工程师们看来，workbox 才是真正能方便统一的处理离线能力的更完美的方案...即使我们把main.css从服务器上删除，也不会对页面造成影响。 所以这种方式的缓存都需要配置一个版本号。在修改sw.js时，对应的版本也需要变更。
值通过if-modified-since 传递给服务端 ， 服务端通过比较当前文件的修改时间和上次修改时间(上次传给客户端的值),如果相等那么说明文件修改时间没变也就是没变化。...（CDN网络是在用户和服务器之间增加Cache层，如何将用户的请求引导到Cache上获得源服务器的数据，主要是通过接管DNS实现） ?...服务端缓存 页面缓存，这种缓存技术一般用于不会经常变动信息，并且访问次数较多的页面，这样就不用每次都动态加载。...在目前阶段，ServiceWorker的主要能力集中在网络代理和离线缓存上。具体的实现上，可以理解为ServiceWorker是一个能在网页关闭时仍然运行的WebWorker。...缓存雪崩，是指缓存使用不合理时，某一时间缓存失效，大量请求会直接到达向服务器，服务器无法承载大量请求，就导致服务器崩溃 缓存更新不及时，是指缓存使用不合理时，服务器文件更新，用户获取到的还是旧的错误的缓存文件
在install事件中，我们将一个离线页面缓存进来。在fetch事件中，如果资源请求失败的话，使用刚才缓存的离线页面。这样，我们的web应用就会在离线状态下，加载这个离线页面了。...如果你刚才已经运行过上一版的代码，你就会发现，页面并没有发生改变，在离线状态下，页面依然是旧版的offline.html。 当我们关闭所有运行代码的标签页之后再次打开，我们就会惊奇的发现，页面更新了。...究竟传入什么参数，取决于如何添加的缓存。如果在具体的cache上调用这个方法，就是在当前缓存下去查找，如果在window.caches下调用，就是在全局缓存中匹配。...如果缓存利用率高了的话，代码更新速度必然受到影响。 我们先来看一下第一种，缓存优先，在没有缓存的情况下请求网络资源。这是一种高效、省流量的方法。但是资源的更新可能会收到影响。...和以往有所不同的是我们监听了controllerchange事件，当Service Worker发生变化的时候，就重载页面，完成页面的及时更新。
❞ 如何查看Service Worker 要查看正在运行的Service workers列表，我们可以在Chrome/Chromium中地址栏中输入chrome://serviceworker-internals...我们需要在脚本 (例如，在 ServiceWorker 中) 中处理缓存更新的方式。...更新发生的时机 浏览器会在以下情况下检查service worker的更新： 用户导航到service worker作用域内的页面。...更新的方式 了解浏览器何时更新service worker很重要，但“如何”也很重要。...如果我们想更明确，可以在要传递到网络的请求的fetch事件回调中加入一个空的return;。这就是「仅缓存」策略演示中对于未经预缓存的请求所发生的情况。 3.
再看看有缓存情况如何 ?： 请求时间是 1.05 s ，有缓存和无缓存基本差不多。...、last-modified、etag 等，来记录下次请求是否缓存、如何缓存。...的 header 加上 Last-Modified字段，这个 header 字段表示这个资源在服务器上的最后修改时间。...服务器再次收到资源请求时，根据浏览器传过来 If-Modified-Since 和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回 304NotModified ，但是不会返回资源内容...如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified 的 Header 在重新加载的时候会被更新，下次请求时，If-Modified-Since 会启用上次返回的Last-Modified
之前加载过的css和js都被缓存了。 所以这里是有点小问题的，毕竟我服务器更新了，你service worker 没给我更新缓存，就说不过去了。...install 根据我的理解，这个环节只在第一次打开网站时加载，一系列操作保证其原子性（要么可用，要么废弃） Activate service worker被激活，某些请求就会变成 from ServiceWorker...首先，会触发更新的情况如下 1.导航到一个作用域内的页面。 2.更新 push 和 sync 等功能事件，除非在前 24 小时内进行了更新检查。...3.调用 .register()，仅在ServiceWorker网址已发生变化时。 4.在获取更新时遵循（长达 24 小时）服务工作线程脚本上的缓存标头。...serviceworker替换老的 4.skipWaiting 跳过waiting 5.手动更新 navigator.serviceWorker.register('/sw.js').then
在主线程中实例化 Worker在主页面的 JavaScript 中，实例化 Web Worker 并开始通信。...以下是如何使用 Service Worker 进行离线缓存的基本步骤：1. 注册 Service Worker在主页面的 JavaScript 中注册 Service Worker。...Service Workers 生命周期独立于页面，需要手动更新以应用新的缓存策略。...： 在页面的 JavaScript 中，通过 Service Worker 获取缓存数据，并启动 Web Worker 处理。...示例：Service Worker更新流程检测更新： 在主页面中，每次加载时检查Service Worker是否有新版本。
生命周期 (install -> waiting -> activate -> fetch)： 其中， install 事件是 Service Worker 获取的第一个事件，并且只发生一次。...activate', event => { event.waitUntil( self.clients.claim() .then(() => { // 返回处理缓存更新的相关事情的...Promise }) ) }) 如何处理 Service Worker 的更新 如果目前尚未有活跃的 SW ，那就直接安装并激活。...问题： 弊端一：过于复杂 弊端二：刷新逻辑的实现必须通过 JS 完成更新 如何调试 为了更熟练的运用 Chrome Devtools 调试 Service Worker，首先需要熟悉以下这些选项：...「Update on reload」：复选框可以强制 Service Worker 线程在每次页面加载时更新。
不要给 service-worker.js 设置缓存 理由和第一点类似，也是为了防止在浏览器需要请求新版本的 SW 时，因为缓存的干扰而无法实现。毕竟我们不能要求用户去清除缓存。...这表示新旧两个页面中间有共同存在的交叉时间，因此简单的切换页面或者刷新是不能使得 SW 进行更新的，老的 SW 依然接管页面，新的 SW 依然在等待。...在注册 SW 的地方（而不是 SW 里面）可以通过监听 controllerchange 事件来得知控制当前页面的 SW 是否发生了变化，如下： navigator.serviceWorker.addEventListener...另外这里还有两个注意点： SW 的更新和页面的刷新 在讲到 SW 的 waiting 状态时，我曾经说过 简单的切换页面或者刷新是不能使得 SW 进行更新的，而这里又一次牵涉到了 SW 的更新和页面的刷新...我们简单理一下逻辑，其实也不复杂： 刷新不能使得 SW 发生更新，即老的 SW 不会退出，新的 SW 也不会激活。 这个方法是通过 skipWaiting 迫使 SW 新老交替。
前天在Web性能优化之Worker线程(上)中针对Worker中的专用工作线程Dedicated Worker做了简单介绍和描述了如何配合webpack在项目中使用。...由于，在实际项目中，还未做实践，所以有些东西更偏向于概念和API的描述。但是，我感觉针对「服务工作线程」在项目优化方面还是有很大的可探索的空间的。 那我们就闲话少叙，开车走起。...这可以让网页在「没有网络连接」的情况下正常使用，因为部分或全部页面可以从服务工作线程缓存中提供服务。...❝与共享工作线程类似，来自「一个域」的多个页面「共享」一个服务工作线程 ❞ 服务工作线程在两个主要任务上最有用： 充当「网络请求的缓存层」 启用「推送通知」 ❝在某种意义上 服务工作线程就是用于把网页变成像...，否则缓存内容「一直有效」 线程缓存必须「手动更新和删除」 缓存「版本」必须「手动管理」 每次线程更新，新服务工作线程负责提供新的缓存键以保存新缓存 「唯一」的浏览器「强制逐出策略」基于线程缓存占用的空间
为了让sw.js的逻辑更清晰，这里仅仅展示最后总结出来的最优代码。如果想了解更多，可以跳到本章最后一个部分《参考链接》。...但对于 ServiceWorker 本身的代码更新，需要别的机制。...() 更新客户端 ServiceWorker 代码如下： const VERSION = "v1"; // 添加缓存 self.addEventListener("install", event =...上方的代码顺便清理了旧版本的缓存。 资源拦截 在代码的最后，需要监听 fetch 事件，并且进行拦截。如果命中，返回缓存；如果未命中，放通请求，并且将请求后的资源缓存下来。...在第 2 次刷新后，通过上图可以看到，缓存版本内容已更新到 v2，并且左侧内容区已经被改变。
2、当应用有可用的更新时，可以只更新发生改变的那部分内容。相比之下，对于一个原生应用而言，即便是最微小的改动也需要强制用户去进行热更新或者再次下载整个应用。 ...它充当了Web应用程序与浏览器之间的代理服务器，进行资源在文件级别下的缓存与操控，拦截页面请求，实现在不同的情况下对不同请求的响应策略。 ...指定了一些页面和文件进行缓存，我们希望用户在无网络的情况下只能访问到我们指定缓存的页面。 ...当然，还有另外一种情况，我们指定了一些页面进行缓存（常用页面），当用户访问到一些不常用页面时，再对其进行缓存。...，看应用清单有没有读出你的 PWA 应用信息配置文件： 随后在serviceWorker标签下检查serviceWorker是否正确运行： 接着访问站点，在地址栏即可添加PWA应用：
一旦处于Service Worker控制之下，它将处于以下状态之一： 它将处理从页面发出网络请求或消息时发生的fetch和message事件 它将被终止以节省内存 以下是生命周期的外观： 在ervice...Worker内部处理安装 在页面加速注册过程之后，让我们看看Service Worker脚本中发生了什么，它通过向Service Worker实例添加事件侦听器来处理install事件。...这里您将看到如何拦截请求并返回创建的缓存（并创建新缓存）。 安装Service Worker并且用户导航到另一个页面或刷新他所在的页面后，Service Worker将收到fetch事件。...更新服务工作者 当用户访问您的Web应用程序时，浏览器会尝试重新下载包含Service Worker代码的.js文件。这发生在后台。...为了让事情更安全，您需要在通过HTTPS提供的页面上注册Service Worker，以便您知道浏览器接收的Service Worker在通过网络中未被修改。
service worker 更新 /sw.js 控制着页面资源和请求的缓存，如果 /sw.js 需要更新应该怎么办呢？ service worker 控制着整个 App 的离线缓存。...更新 sw.js 文件，当浏览器获取到了新的文件，发现 sw.js 文件发生更新，就会安装新的文件并触发 install 事件。...手动更新 /sw.js 也可以借助 Registration.update() 手动更新 var version = '1.0.1'; navigator.serviceWorker.register...首先在页面的 javaScript 主线程中使用 navigator.serviceWorker.register() 来注册 servcie worker。...self.clients.claim()：在 activate 事件回调中执行该方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。
对导入脚本的任何更改都会触发service worker更新流程，就像对顶级service worker发生改变一样。...updateViaCache 在Chrome 68以后，开发者可以在调用navigator.serviceWorker.register()时传递新参数：updateViaCache，其有三个可选值：imports...这些值决定了对于检查 service worker 更新而发出HTTP请求，浏览器的HTTP缓存是否起作用以及如何发挥作用。...例如，以下代码将注册service worker，并确保在检查更新/service-worker.js脚本或通过importScripts()引用的任何脚本时，其不受HTTP缓存影响。...更改导入的URL的副作用是service worker脚本的内容发生了更改，这又触发了service worker的更新流程。
我们也可以在应用中缓存一些资源。这篇文章我们准备了解这些：service workers 以及缓存是如何一起配合给用户一个完美的离线体验。...在前一个章节当我们学习如何 debugger 的时候，我们了解到浏览器的缓存存储。提及缓存时，不仅仅是指存储，还包括浏览器内用来保存数据以供离线使用的策略。...缓存请求返回的数据 这个方案是指如果之前的网络请求数据被缓存了，那么就用缓存的数据更新页面。如果缓存不可用，那直接去网络请求数据。当请求成功返回时，利用返回的数据更新页面并缓存返回的数据。...先展示缓存，再根据请求的数据更新页面 这种方案将同时请求缓存以及服务端的数据。如果某一项在缓存中有对应的数据，好，直接在页面中展示。...现在你已经知道了如何创建离线应用，在接下来的文章中，我们将继续讨论这项技术的有趣之处，包括推送通知，主屏幕图标创建等等···
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
