Service Worker是否应该在每次重新加载页面或导航到不同的页面时进行自我安装？ - 腾讯云开发者社区

构建渐进式Web应用程序的主要要求之一是使其在网络和加载方面非常可靠——它应该在不确定或不存在的网络条件下可用。...每次页面加载时都可以调用 register() 方法，浏览器会判断 Service Worker 是否已经注册，根据注册情况会对应的给出正确处理。...最重要的是，如果在页面上安装一个 Service Worker，就可能会有延迟加载和渲染的风险 —— 而不是尽快让你的用户可以使用该页面。注意，这种情况对第一次的访问页面时才会有。...后续的页面访问不会受到 Service Worker 安装的影响。一旦 Service Worker 在第一次访问页面时被激活，它就可以处理加载/缓存事件，以便后续访问 Web 应用程序。...运行时缓存请求安装了 Service Worker 后，用户导航到另一个页面或刷新所在的页面，Service Worker 将收到 fetch 事件。

8811 0

WorkBox 之底层逻辑Service Worker

❝默认情况下，新的service worker直到「下一次导航或页面刷新之前才会开始控制页面」。...更新发生的时机浏览器会在以下情况下检查service worker的更新：用户导航到service worker作用域内的页面。...当导航到service worker作用域内的新页面时，浏览器会自动执行更新检查。手动触发更新检查关于更新，注册逻辑通常不应更改。然而，一个例外情况可能是「网站上的会话持续时间很长」。...Service Worker在最坏的情况下应该对性能没有不利影响，而不是使性能变差。为用户着想，应该在「页面加载事件」触发时注册Service Worker。...Update on reload（重新加载时更新）：当切换开启时，每次重新加载页面时都会重新获取并替换当前的Service Worker。

2782 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

安装您的Web应用程序想要安装Service Worker，您必须先注册它，您可以在JavaScript代码中进行注册。...如果支持，则注册/sw.js Service Worker。您可以在每次加载页面时调用register（）方法而不用担心 – 浏览器会判断Service Worker是否已经注册，并且会正确处理。...最重要的是，如果你只是在你的页面上安装一个Service Worker，你可能会有延迟加载和渲染的风险 – 而不是尽快让你的用户可以使用这个页面。请注意，这仅在第一次访问页面时才显得重要。...后续页面访问不受Service Worker安装的影响。一旦在第一次访问页面时激活Service Worker，它可以处理加载/缓存事件，以便随后访问您的Web应用程序。...这里您将看到如何拦截请求并返回创建的缓存（并创建新缓存）。安装Service Worker并且用户导航到另一个页面或刷新他所在的页面后，Service Worker将收到fetch事件。

9491 0

在项目中使用Service Worker 与 PWA

更快的加载速度通过将资源缓存在本地，Service Worker 可以显著提高 Web 页面的加载速度。它可以从缓存中获取资源，而无需每次都从服务器重新下载。 3....它包括以下几个阶段: 下载安装激活 1.下载用户首次访问service worker控制的网站或页面时，service worker会立刻被下载。...2.安装需要在网页进行注册来安装，安装前需要检查是否支持 serviceWorker，如果支持，每次页面加载时就调用 register()，浏览器将会判断是否已注册。...在这个状态可以更新 Service Worker。用户导航至站点时，浏览器会尝试在后台重新下载定义 Service Worker 的脚本文件。...Service Worker 并且用户导航到其他页面或刷新当前页面，Service Worker 将开始监听 fetch 事件。

2961 0

Service Worker 入门指南

这个方法也可以用于检测进行的任务是否成功。在服务工作线程中，这个方法告诉浏览器事件一直进行，直至 promise resolve，浏览器不应该在事件中的异步操作完成之前终止服务工作线程。...它等同于 Network 窗格中的离线模式。「Update on reload」：复选框可以强制 Service Worker 线程在每次页面加载时更新。...此行上的数字指示 Service Worker 线程已被更新的次数。如果启用 update on reload 复选框，接下来会注意到每次页面加载时此数字都会增大。...停止 Service Worker 线程是测试 Service Worker 线程再次重新启动时的代码行为方式的绝佳方法。它通常可以揭示由于对持续全局状态的不完善假设而引发的错误。...如果这时候点击正在不同标签中运行的 Service Worker 线程旁的 focus 按钮，Chrome 会聚焦到该标签。

1.8K3 0

现代浏览器内部机制 Part 2 | 导航这件小事

通常这一步也是安全检测[5]发生的时候：如果域名或响应数据和已知的恶意网站匹配时，网络进程会抛出一个警告，并展现一个告警的页面。...也会有例外的情况：比如导航重定向到一个另外的站点，那么预先启动好的渲染进程将不会被使用，这导致 UI 线程需要重新启动一个渲染进程。...当新的导航将发往与当前页面不同的站点时，浏览器将会创建一个新的渲染进程去处理这些新工作，旧的渲染进程则则用来在剩余的时间里处理诸如 unload 的页面事件。...当导航发生时，网络线程会依据域名在已注册的 Service Worker 作用域集合中查询，如果找到某个对应的 Service Worker，UI 线程会发起一个渲染进程去执行 Service Worker...导航预加载[11]就是用来加速这一进程的机制：与 Service Worker 并行启动去加载资源。

1.1K3 0

现代浏览器探秘(part2):导航

选项卡的会话历史记录将更新，因此后退/前进按钮将可以逐步浏览刚导航到的站点。为了便于在关闭选项卡或窗口时能够对选项卡/会话进行还原，会话的历史记录将被存储在磁盘上。 ?...图7：渲染器进程通过IPC通知浏览器进程页面已“加载完成” 导航到其他站点简单的导航完成了！但是如果用户再次将不同的URL放到地址栏会发生什么？...当你尝试重新导航或关闭选项卡时，beforeunload可以创建“要离开这个网站吗？” 警告。...图9：从浏览器进程到新渲染器进程的2个IPC，通知新渲染器渲染页面并通知旧渲染器进程卸载如果是Service Worker 最近对该导航过程的一个改变是引入了service worker （https...导航预加载是一种通过与Service Worker并行加载资源来加速此过程的机制。它用header标记这些请求，允许服务器为这些请求发送不同的内容，例如：只更新部分数据而不是整个文档。 ?

2K2 0

窥探现代浏览器架构(二)

渲染进程通过IPC告诉浏览器进程页面已经加载完成了导航到不同的站点一个最简单的导航情景已经描述完了！可是如果这时用户在导航栏上输入一个不一样的URL会发生什么呢？...注意：不要随便给页面添加beforeunload事件监听，你定义的监听函数会在页面被重新导航的时候执行，因此这会增加重导航的时延。...浏览器进程通过IPC告诉渲染进程它将要离开当前页面导航到新的页面了如果重新导航是在页面内被发起的呢？...如果是重新导航到不同站点（different site）的话，会有另外一个渲染进程被启动来完成这次重导航，而当前的渲染进程会继续处理现在页面的一些收尾工作，例如unload事件的监听函数执行。...service worker启动的时间其实增加了页面导航的时延。

6311 0

从输入URL到页面可交互的过程探究之一：从服务端到客户端

有几种方法可以实现访问：在地址栏中输入URL、点击(或触碰)一个页面上或其他app中的超链接、或者点击你的收藏。无论是哪种情况，都会触发一个动作——导航。...当一个页面被访问时，可以注册一个Service worker，这个动作是由一个工作线程来完成的，它可以把service worker的注册和URL映射[4]记录在本地数据库中。...要判断一个service worker是否被安装，只需在这个本地数据中查找是否有对应的URL。如果为service worker查到了对应的URL，它就会被允许处理请求的回应。...这是有好处的，因为它避免了浏览器因为service worker启动过慢而对页面渲染的影响。当浏览器发现没有service worker来处理初始化请求时，就会继续网络请求层。...实际应用中，当我们使用不同的URL来指向不同版本的同一份资源时，我们就可以采用这种做法，而非对同一个URL的资源进行更改，因为被缓存的版本会一直被使用且不会去发送请求。

1.5K3 0

Google图解：输入 URL 按下 “Enter”，Chrome 干了什么？

网络线程会检查响应数据是否是来自 Safe Browsing（安全站点）的 HTML。如果域或响应数据与已知的恶意网站相匹配，则网络线程会发出警告，并显示警告页面。...但是如果用户再次将不同的 URL 放到地址栏会发生什么？浏览器进程会通过相同的步骤，导航到不同的站点。但在此之前，它需要检查当前显示的网站是否注册了 beforeunload事件。...当新导航进行到与当前渲染的网站不同的网站时，会调用单独的渲染进程来处理新导航，同时保持当前渲染进程用于处理类似 unload 事件。...如果将 Service Worker 设置为从缓存加载页面，则无需从网络请求数据。...导航预加载是一种通过与 Service Worker 并行加载资源，来加速此过程的机制。它用 Header 标记这些请求，允许服务器决定为这些请求发送不同的内容。

1.8K3 0

JS 中 service workers 的简介

} 复制代码 Service Worker 注册在我们开始缓存资源或拦截网络请求之前，我们必须在浏览器中安装service worker。..., err) }); } else { // Not supported } }); 复制代码每次页面加载时都可以运行上面的代码，没有任何问题；...浏览器将决定是否已经安装service worker并相应地处理它。...如果安装成功，则激活service worker。在用户访问另一个页面后刷新当前页面之前，service worker文件中的任何功能都不可用。...就像第一次安装一样，只有当用户导航到另一个页面或刷新当前页面时，新的service worker的功能才能使用。我们可以做的事情就是监听activate事件，并删除旧的缓存资源。

8022 0

web渐进式应用PWA

: 是否设置对应移动应用，默认为 false related_applications: 获取移动应用的方式 background_color: 应用加载之前的背景色，用于应用启动时的过渡 theme_color...站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问当 manifest 文件发生改变时，资源请求本身也会触发更新 3.创建一个 Service Worker Service...Service Worker 这个概念可能比较难懂，它其实是一个工作在其他线程中的标准的 Worker，它不可以访问页面上的 DOM 元素，没有页面上的 API，但是可以拦截所有页面上的网络请求，包括页面导航...当有不同的 URL 指向同一个资源时，你也可以将这些 URL 分别写到这个数组中。offlineURL 将会加入到这个数组中。...waitUntil方法保证了 service worker 不会安装直到其相关的代码被执行。

1.2K1 0

Web性能优化之Worker线程(下)

今天，我们就着重对服务工作线程Service Worker进行介绍。由于，在实际项目中，还未做实践，所以有些东西更偏向于概念和API的描述。...2. claim()可用于「不希望等待页面重新加载」而让服务工作线程开始管理页面生命周期 Service Worker 规范定义了 6 种服务工作者线程可能存在的状态：已解析parsed 安装中installing...) => { console.log('Service worker 处于安装中状态'); }; 安装中状态「频繁」用于「填充服务工作线程的缓存」。...在下一个「导航事件」时，新服务工作线程会到达激活中状态。「已安装」的服务工作者线程调用 self.skipWaiting()。...「页面重新加载」时都会运行。

2.4K2 0

JS 中 service workers 的简介

} Service Worker 注册在我们开始缓存资源或拦截网络请求之前，我们必须在浏览器中安装service worker。...} }); 复制代码每次页面加载时都可以运行上面的代码，没有任何问题；浏览器将决定是否已经安装service worker并相应地处理它。...Service Worker 生命周期注册生命周期包括三个步骤：下载安装激活当用户首次访问您的网站时，会立即下载service worker文件并尝试安装。...如果安装成功，则激活service worker。在用户访问另一个页面后刷新当前页面之前，service worker文件中的任何功能都不可用。...就像第一次安装一样，只有当用户导航到另一个页面或刷新当前页面时，新的service worker的功能才能使用。我们可以做的事情就是监听activate事件，并删除旧的缓存资源。

8753 0

Service Worker最佳实践

前端页面向内核发起注册时会将脚本地址通知内核，内核会启动独立进/线程加载Service Worker脚本并执行Service Worker安装及激活动作。...Worker脚本中保存需要持久化的信息，可以借助localstorage），当打开新的可管辖页面或者已管辖页面发起message等消息时，Service Worker进/线程会被重新唤起。...每当已安装的Service Worker有管辖页面被打开时，便会触发Service Worker脚本更新，当上次脚本更新写入Service Worker数据库的时间戳与本次更新超过24小时，便会忽略本地网络...在之前的原理中说过，Service Worker会在每次打开对应的页面后去检查更新Service Worker脚本，但如果Service Worker脚本有缓存期限的话，那么在开发调试的时候修改了测试页面的...对于前端页面中的跨域资源的url可以附带“cors=1”参数，以便Service Worker在拦截之后可以判断出是跨域请求从而重新进行组装cors请求，如图17。

2.2K1 0

PWA 入门

如果注册成功，service worker 就会被下载到客户端并尝试安装或激活；下载。...用户首次访问 service worker 控制的网站或页面时，service worker 会立刻被下载；安装。...如果这是首次启用 service worker，页面会首先尝试安装，安装成功后它会被激活；需要注意的是，如果你不是首次访问 service worker 控制的网站（之前就访问过）时，service...直到所有已加载的页面不再使用（或者说不再依赖）旧的 service worker 才会激活新的 service worker。...http 方法（通常只允许 GET 或 HEAD），默认值是 false； ignoreVary 如果为 true 则匹配时不进行 vary 头部的匹配，默认值是 false； cacheName 代表一个具体的要被搜索的缓存

1.4K2 0

一文看懂Chrome浏览器工作原理

浏览器进程通过IPC告诉渲染进程它将要离开当前页面导航到新的页面了如果重新导航是在页面内被发起的呢？...浏览器进程告诉新的渲染进程去渲染新的页面并且告诉当前的渲染进程进行收尾工作 Service Worker的情景这个导航过程最近发生的一个改变是引进了service worker的概念。...如果开发者在service worker里设置了当前的页面内容从缓存里面获取，当前页面的渲染就不需要重新发送网络请求了，这就大大加快了整个导航的过程。...service worker启动的时间其实增加了页面导航的时延。...导航预加载就是一种通过在service worker启动的时候并行加载对应资源的方式来加快整个导航过程效率的技术。

1.6K3 1

如何在Ubuntu 16.04使用Buildbot建立持续集成系统

然后，我们将配置Buildbot主服务器以观察GitHub存储库的更改，每次检测到新的更改时自动进行测试。...来自不同来源的许多不同变更集可以交给调度程序。更改过滤器定义一组标准，用于确定此特定调度程序是否应处理相关更改。...我们添加的第一步是steps.GitHub实例。在这里，我们设置应该下拉到构建器中的存储库。我们设置mode为“full”和method“clobber”以在每次提取新代码时完全清理我们的存储库。...在Web浏览器中，导航到示例项目存储库的fork： https://github.com/your_github_user/hello_hapi 单击“设置”选项卡以查看项目设置。...重新加载systemd守护程序和服务以立即应用配置： $ sudo systemctl daemon-reload $ sudo systemctl restart buildbot-master 现在应该在

1.8K3 0

异步JS中的Web Workers

、iframe 或其他 worker....(保证同源), 会看到worker.js只加载了一次, 下面分别是 index.html 和 index2.html 的 network 情况, 说明两个同源的页面是共享了同一个线程, 并且启动后, 刷新页面也不会重新去初始化...worker 代码, 需要手动终止线程, 再重新启动我们在index.html页面触发加法运算, 并 postMessage 给worker线程, 分别在不同的调试窗口可以看见对应的打印信息, index.html..., 如果下载的 SW 文件是新的, 安装就会在后台尝试进行, 安装成功后不会被激活, 会进入 waiting 阶段, 直到所有已加载的页面不再使用旧的 SW 才会被激活. 4) fetch 还有一个值得监听的重要事件是...fetch, 他是进行自定义请求响应的, 每次请求被 SW 控制的资源时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的文档, 和这些文档内引用的其他任何资源.

1.5K2 0

2020前端性能优化清单（五）

您是否对所有的 JavaScript 库进行了异步加载？...目前，服务器还没有一种简单的方法得知被推送的资源是否已经在用户的某个缓存中[39]，因此每次用户访问时，资源都会被继续推送。所以，您可能需要创建一个缓存感知的 HTTP/2 服务器推送机制[40]。...例如，在 A/B 测试中，当 HTML 需要为不同的用户改变其内容时，我们可以使用 CDN 服务器上的 service worker[100] 来处理逻辑。...确保在滚动页面或元素展示动画效果时没有延迟，能始终达到每秒 60 帧。至少也要使每秒帧数在 60 到 15 的混合范围内。...虽然组件在页面上的显示顺序以及如何向浏览器提供资源的策略很重要，但是我们也不应该低估感知性能[112]的作用。这个概念涉及到等待的心理，基本思路是在其他事情发生时让顾客保持忙碌或投入。

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

JavaScript 是如何工作的：Service Worker 的生命周期及使用场景

WorkBox 之底层逻辑Service Worker

JavaScript工作原理（八）：Service Workers，生命周期和应用案例

在项目中使用Service Worker 与 PWA

Service Worker 入门指南

现代浏览器内部机制 Part 2 | 导航这件小事

现代浏览器探秘(part2):导航

窥探现代浏览器架构(二)

从输入URL到页面可交互的过程探究之一：从服务端到客户端

Google图解：输入 URL 按下 “Enter”，Chrome 干了什么？

JS 中 service workers 的简介

web渐进式应用PWA

Web性能优化之Worker线程(下)

JS 中 service workers 的简介

Service Worker最佳实践

PWA 入门

一文看懂Chrome浏览器工作原理

如何在Ubuntu 16.04使用Buildbot建立持续集成系统

异步JS中的Web Workers

2020前端性能优化清单（五）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐