背景 在 Web 早期，对于用户离线时网页应该怎样表现，基本没有方案。用户应该 "总是" 在线的。 ? 连接上了！大伙都在这！别离开。...通过更严格、更程序化实现，替换了 AppCache 那种声明式的方式。 Service Workers 是在 web 浏览器所包含的持久的后台进程中执行代码的一种方式。...但是要开始使用 Service Workers，还需要先在前置 web 应用里注册 Service Worker。 注册 下面的代码说明了怎样在客户端浏览器里 注册 Service Worker。...下面的例子演示了一个 '缓存优先' 策略：任何与请求匹配的缓存数据会优先返回，不通过网络请求；只有在没有匹配的缓存数据的时候，才会发出网络请求。...下面是在我自己的项目工程中适用的一个例子：缓存更新 策略。
「如果大家对这些概念熟悉，可以直接忽略」 同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。...这样可以避免在service worker预缓存任何内容时出现「带宽争用」。 尽管service worker得到了广泛支持，但进行「特性检查」可以避免在不支持它的浏览器中出现错误。...❞ 默认情况下，新的service worker将在「没有任何客户端由旧的service worker控制时激活」。这发生在相关网站的所有打开标签都关闭时。...Service Worker在最坏的情况下应该对性能没有不利影响，而不是使性能变差。为用户着想，应该在「页面加载事件」触发时注册Service Worker。...这些开关非常有帮助，特别是Bypass for network，当我们正在开发一个具有活动Service Worker的项目时，同时还希望确保体验在没有Service Worker的情况下也能按预期工作
安装 要为 web 应用程序安装 Service Worker，必须先注册它，这可以在 JavaScript 代码中完成。...让我们考虑用户第一次访问你的 Web 应用程序。目前还没有 Service Worker，而且浏览器无法预先知道最终是否会安装 Service Worker。...后续的页面访问不会受到 Service Worker 安装的影响。一旦 Service Worker 在第一次访问页面时被激活，它就可以处理加载/缓存事件，以便后续访问 Web 应用程序。...这意味着需要小心在安装步骤中决定要缓存的文件列表，定义一长串文件将增加一个文件可能无法缓存的机会，导致你的 Service Worker 没有得到安装。...处理 install 事件完全是可选的，你可以避免它，在这种情况下，你不需要执行这里的任何步骤。
来注册 Service Worker ，在注册的过程中，浏览器会在后台启动尝试 Service Worker 的安装步骤。...如果注册成功，Service Worker 在 ServiceWorkerGlobalScope 环境中运行； 这是一个特殊的 worker context，与主脚本的运行线程相独立，同时也没有访问 DOM...如果所有的资源成功缓存则安装成功，如果有任何静态资源缓存失败则安装失败，在这里失败的不要紧，会自动继续安装直到安装成功，如果安装不成功无法进行下一步 — 激活 Service Worker。...激活成功后 Service Worker 可以控制页面了，但是只针对在成功注册了 Service Worker 后打开的页面。...可以防止在一个刷新间隔内发生多次函数执行，这样保证了流畅性，也节省了函数执行的开销 某些情况下可以直接使用requestAnimationFrame替代 Throttle 函数，都是限制回调函数执行的频率
，可以在页面没有打开的时候就运行。...worker 拥有更精细、更完整的控制；作为一个页面与服务器之间代理中间层，service worker 可以捕获它所负责的页面的请求，并返回相应资源，这使离线 web 应用成为了可能。...Cache API 提供了一个网络请求的持久层，并可以使用 match 操作查询这些请求。...通过使用本地缓存中的资源，不但能省去对网络的昂贵访问，更有了在 离线、掉线、网络不佳 等情况下维持应用可用的能力。...在这个步骤进行缓存管理，而不是在之前的安装阶段进行，原因在于：如果在 install 步骤中清除了任何旧缓存，则继续控制所有当前页面的任何旧 service worker 将突然无法从缓存中提供文件 self.addEventListener
launcher=true" } P.S.安装banner是指一个类似于获取权限的弹出面板，用户可以选择添加至主屏幕或取消，满足一定条件的话，Chrome会自动弹出安装banner，具体见Web App...，为了达到首屏立即加载的效果，可以把带loading和默认占位图的页面框架作为App Shell展示出来。...另外，为了达到秒开可用的首屏性能，Web App首屏性能优化其它常规手段在PWA也是推荐使用的，比如数据直出。...） 动态内容缓存（运行时缓存） 缓存是纯数据操作（包括持久化），而service worker能够在后台运行，尤其适合处理这种与页面及交互无关的事情，所以service worker与Cache API...，发布内容没有任何限制可以随便折腾，以后的博客Demo都会逐步迁移过去（之前一直放在自己的FTP，那可真蠢..） ?
这非常雄心勃勃，但是如果我们可以跨平台使用更富有表现力的 URL 那就太好了。...有人担心，无论这些东西出现在什么UI上，网站都可以使用它来发送垃圾邮件。但是，浏览器可以自由地忽略或验证所告知的任何内容。 这是个非常新的提案，它已作提交给小组。...例如，当用户单击指向你网站的链接，但是没有明确建议网站应如何打开（例如“在新窗口中打开”）时，如果开发人员可以决定是将焦点集中在网站使用的现有窗口上还是打开新窗口，那将是很好的选择。...service workers 将在顶层使用 await，因此它将无法被安装，并且将在控制台中出现错误。...最初我不确定这个建议，因为路由信息是与页面而不是 service workers 一起工作，而我通常更喜欢由 service workers 负责。
鉴于此，允许网站自己决定离线时的行为变得弥足珍贵，这样用户就不会被网络状态局限。 最初，H5标准中推出了应用缓存作为离线web应用的解决方案。...Service Worker是一种在浏览器环境当中于一个持久的背景进程当中执行代码的方法。被执行的代码时事件驱动的，也就是说驱动一个Service Worker的行为的，是在其中产生的事件。...然而想要开始利用Service Worker，你需要先实现你的web应用明面上的功能，然后再于其中注册Service Worker。...利用安装事件，可以实现你的SW初始化逻辑，或者说通过只执行一次的命令来设定你的SW初始状态。一种常见的用法是在安装阶段提权准备好缓存。...这功能可以用于保证任何用户在离线的时候所产生对于网络有依赖的操作，最终可以在网络再次可用的时候抵达它们的目标。 一下是一个背景同步样例。
渐进式Web应用程序就是为此而生的，它同时具备了Web应用功能和以前只有在原生应用才有的功能的特点，渐进式Web应用程序通过从主屏幕上的图标启动，也可以根据推送通知启动，加载时间几乎可以忽略不计，而且除了可以在线使用外...Service Worker可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能，以给 web 应用提供更好更丰富的使用体验。...在这一步中，我们使用这个选项来拦截HTTP请求和响应，直接从缓存为用户提供闪电般快速的响应。 在Service Worker安装期间进行预缓存 当用户第一次访问你的网站时，SW会开始自行安装。...如果匹配，我们就返回该缓存资源，但如果该资源不存在于缓存中，我们就像正常情况下一样继续获取请求的资源。 在Service Worker安装并激活后，刷新页面并再次检查网络选项卡。...如果有任何问题，欢迎通过评论区留言告诉我。
毕竟给Service Worker的权利较大，可以直接截取和返回用户的请求，所以了于安全考虑，目前只能在HTTPS环境下才能使用Service Worker。 浏览器支持 ?...Service Worder在安装（install）和激活(activate)后，会进入正常工作状态。当它负责的页面在浏览器中被打开，它就会对页面的请求进行处理。...总结 Service Worker是继web Worker后又一个新的线程，这个线程比web worker独立得更彻底，可以在页面没有打开的时候就运行。...作为一个页面与服务器之间中间层，Service Worker可以捕获它所负责的页面的请求，并返回相应资源，这使离线web应用成为了可能。这也是Service Worker被提出的一个重要目的。...虽然现在支持的浏览器和平台还不多，而且还在试验阶段，但已被W3C制定规范。在将来，当Service Worker更成熟和普及时，将会为web app打开新的大门。
事实上，二者互不不阻塞的原因就是它们是并行执行的，可以看出 Web Worker 是货真价实的多线程。 你可能想说 — ”JavaScript 不是一个在单线程上执行的语言吗？“。...你可能会惊讶 JavaScript 作为一门编程语言，却没有定义任何的线程模型。...使用 postMessage 方法 在较新的浏览器中，postMessage 方法支持 JSON 对象作为函数的第一个入参，但是在旧版本浏览器中它还是只支持 string。...Web Worker 可以非常好的切入此类场景，因为这里不涉及任何的 DOM 操作，Worker 中仅仅运行一些专为加密的算法。...为保证存取时不阻塞 UI 线程，这部分工作理应交给 Web Worker 完成。好吧，在 IndexDB 中你可以不使用 Web Worker，因为它提供的异步 API 同样不会阻塞 UI。
您可以使用您选择的任何模型快速组合分布式应用程序，这些选项之一是Map / Reduce。...最简单的答案是，你可以使用Gearman作为用不同语言编写的客户端和工作者之间的接口。...假设您的PHP Web应用程序想要进行图像转换，但这是在Web服务器机器上运行它的太多处理。您可以将映像发送到单独的一组工作机器上进行转换，这样负载不会影响Web服务器和其他PHP脚本的性能。...这使得多核服务器的扩展非常简单：工人机器上有16个核心吗？启动你的工人的16个实例（或更多，如果他们没有CPU绑定）。...5.4，我建议如果使用PHP作为worker进程，使用php-5.4以上的版本。
那么为什么有越来越多的网站支持了这个特性呢？1、我想主要是因为，PWA可以通过Service Workers，在没有网络的情况下运行，提高用户体验。...PWA 应用的一个大致的交互流程，可以使用下图来配合理解：使用Next.js实现一个PWA应用为什么又是Next.js，你可能会问你能不能来点别的，我想说的是，Next.js作为一个前后端通杀的框架，的确非常适合作为本文的教学...但是现在你使用的Next.js，不需要手动去做，因为我们在next.config.js里面已经配置了PWA插件， next-pwa插件会自动为你生成Service Worker，所以你不需要手动添加，如图...npm run build && npm start 此时，我们在打开 localhost:3000，不出意外的话，我们就可以看到chrome 地址栏安装应用的图标了，我们可以点击安装试试看，这里因为没有写任何...而且如果你的 web 服务如果完全就是工具性，无需联网的话，那就更 nice 了，简直就和 App 体验无太大差异。进一步了解，PWA 可以发布到 Google 商店，你知道如何操作吗？
安装 您的Web应用程序想要安装Service Worker，您必须先注册它，您可以在JavaScript代码中进行注册。...在安装阶段，最好加载和缓存一些静态资源。资源成功缓存后，Service Worker安装完成。如果没有成功（加载失败） – Service Worker将重试。...后续页面访问不受Service Worker安装的影响。一旦在第一次访问页面时激活Service Worker，它可以处理加载/缓存事件，以便随后访问您的Web应用程序。...使用Service Worker，您可以劫持连接并制作响应。 通过不使用HTTPs，您的Web应用程序变得容易受到攻击。...为了让事情更安全，您需要在通过HTTPS提供的页面上注册Service Worker，以便您知道浏览器接收的Service Worker在通过网络中未被修改。
概述 在讲Service Worker之前先说一下另一个概念：PWA(Progressive Web Apps) Progressive Web App：是一个具有响应式布局的Web应用，可以离线工作...如果你想要保存一些持久化的信息，你可以在service worker里使用IndexedDB API。...如果所有的文件被缓存成功，service worker就安装成功了。如果有任何文件加载或缓存失败，那么安装过程就会失败，service worker就不能被激活（也即没能安装成功）。...在service worker出现之前，前端确实不会自己给自己发消息，但是有了service worker，就可以在拦截请求之后根据需要发回自己的响应，对页面而言，这个普通的请求结果并没有区别，这是Response...这是一个双向的过程，页面可以发消息给service worker，service worker也可以发送消息给页面，由于这个特性，可以将service worker作为中间纽带，使得一个域名或者子域名下的多个页面可以自由通信
在某些情况下，可以使用 setTimeout 对长时间运行的计算阻塞的，可以使用 setTimeout暂时放入异步队列中，从让页面得到更快的渲染。...具体的实现上，可以理解为 Service Worker 是一个能在网页关闭时仍然运行的 Web Worker。...postMessage 方法 新浏览器支持JSON对象作为方法的第一个参数，而旧浏览器只支持字符串。...来看一个示例，通过将 JSON 对象作为一个更“复杂”的示例传递，创建 Worker 的页面如何与之通信。传递字符串跟传递对象的方式也是一样的。...这是一个使用 Web Worker 非常好的场景，因为它不需要访问 DOM 或任何花哨的东西——它是完成其工作的纯算法。
由于Javascript 的单线程特性，任何“重量”操作都会阻塞主线程。为了提升性能和体验，现代浏览器使用worker 作为一种多线程机制，把原本的单线程应用变成多线程运行。...，用于在终端弱网或无王情况下同步后台的数据或继续前端的请求消息 由于service worker在浏览器关闭后仍然运行着，所以即使用户没有网络或关闭客户端，service worker仍会存储相应的请求...PWA 的应用特性与功能特点 Google 给出的 PWA 应用特性如下： 可靠：即使在互联网连接不佳或没有互联网的情况下，也可以快速加载。...当没有互联网连接时，PWA 会使用 Service Worker 来消除对Web服务器的依赖。 快速：流畅的动画和交互效果，应用程序拥有原生的体验，没有笨拙的网页滚动。...PWA 应用主要功能特点如下： 渐进增强：在尽可能多的环境中运行，可以使用任何可用的服务，并在没有服务的情况下优雅地降级。
协议下运行； 开发过程中可以通过 locakhost 使用 service worker。...Service Worker 在全局提供了一个 skipWaiting() 方法，skipWaiting() 在 waiting 期间调用还是在之前调用并没有什么不同。...一般情况下是在 install 事件中调用它。...「clients.claim() 方法」 如果使用了 skipWaiting 的方式跳过 waiting 状态，直接激活了 Service Worker，可能会出现其他终端还没有受当前终端激活的 Service...「Update」：按钮可以对指定的 Service Worker 线程执行一次性更新。 「Push」：按钮可以在没有负载的情况下模拟推送通知。 「Sync」：按钮可以模拟后台同步事件。
其中有一个大的因素就是我们的应用用到了很多的第三方库。那么，有没有一种一举两得的方法，我即可以保留使用的第三方脚本，又可以保证页面的加载速度？...允许第三方脚本完全按照它们的编码方式运行，无需任何更改。在 web worker 中同步读写主线程 DOM 操作，允许在 web worker 中运行的脚本按预期执行。...图片如何集成 Partytown你可以很容易地将它添加到任何站点，并使用 type="text/partytown" 标记任何你想要加载在 web worker 中的脚本。...然而，为了让它更容易在各种框架或服务中使用，可以为它们的生态系统制作插件/包装器。只有当特定脚本具有 type="text/ Partytown " 属性时，才会启用 Partytown。...执行步骤任何你添加 type="text/partytown" 的脚本都会在默认情况下加载到 web worker 中，但是可以完全访问全局变量。'
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
