只有主页的服务工作线程内部获取API失败。重新加载时，它将为缓存的脱机页面提供服务 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

web渐进式应用PWA

什么是渐进式 Web 应用渐进式 Web 应用首先是一种应用，它根据设备的支持情况来提供更多功能，提供离线能力，推送通知，甚至原生应用的外观和速度，以及对资源进行本地缓存。...Service Worker 这个概念可能比较难懂，它其实是一个工作在其他线程中的标准的 Worker，它不可以访问页面上的 DOM 元素，没有页面上的 API，但是可以拦截所有页面上的网络请求，包括页面导航...该事件处理函数中，我们可以使用 respondWith()方法来劫持 HTTP 的 GET 请求然后返回：从缓存中取到的资源文件如果第一步失败，资源文件将会从网络中使用 Fetch API 来获取（...获取到的资源将会加入到缓存中。如果第一步和第二步均失败，将会从缓存中返回正确的资源文件。...然而，我们可以提供一些可以阅读的页面链接。 Cache API 可以在 main.js 中使用。

1.2K1 0

在项目中使用Service Worker 与 PWA

Service Worker（服务工作线程）是一种在浏览器背后运行的脚本，用于提供强大的离线和缓存功能，以改善 Web 应用程序的性能和可靠性。...Service Worker 是 Web 开发中的一个强大工具，它使开发人员能够更好地控制和管理 Web 页面的资源缓存、网络请求和响应，从而提供更快速、更稳定的用户体验。...更快的加载速度通过将资源缓存在本地，Service Worker 可以显著提高 Web 页面的加载速度。它可以从缓存中获取资源，而无需每次都从服务器重新下载。 3....它包括以下几个阶段: 下载安装激活 1.下载用户首次访问service worker控制的网站或页面时，service worker会立刻被下载。...然后，它会发起远程请求来获取最新资源，将资源缓存起来，并返回给页面。

5341 0

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

是的

没有找到

WorkBox 之底层逻辑Service Worker

这些都是缓存策略的应用方向。缓存策略使离线体验成为可能，并「通过绕过 HTTP 缓存触发的高延迟重新验证检查提供更好的性能」。异步和事件驱动的 API 在「网络上传输数据本质上是异步的」。...它「通过跳过 HTTP 缓存可能启动的任何与服务器的内容新鲜度检查，为不可变资产提供了速度提升」。更重要的是，「任何缓存的资产都将在离线时可用」。 4....可能需要在将 HTML 响应放入缓存之前重新加载。然后在开发者工具中，模拟离线连接，然后重新加载。最后一个可用版本将立即从缓存中提供。...该策略的工作流程如下：对于首次请求的资源，从网络获取，将其放入缓存，并返回网络响应。对于后续请求，首先从缓存中提供资源，然后在后台重新从网络请求并更新资源的缓存条目。...Update on reload（重新加载时更新）：当切换开启时，每次重新加载页面时都会重新获取并替换当前的Service Worker。

4422 0

在“小程序”PWA上开发WebRTC

尽管WebRTC实际上不能脱机工作，但可能需要添加基本的离线支持。你的目标是提供类似于本地的体验，因此你应该尽量获取一些离线用户的体验。...Service Worker-服务工作线程 Service Worker是PWA的第二个重要部分。简而言之，服务工作线程是一个可编程的代理服务器和缓存。...为了让你的应用程序被Chrome分类为PWA，应用程序需要加载服务工作线程和某种脱机功能。至少，你必须能够在连接断开时提供服务。文件处理需要特别注意的一点是，服务工作线程文件的位置非常重要。...服务工作线程只能缓存它所在的同一文件夹中的或者是子文件夹下的资源。为了获得最大的缓存能力，我建议尽可能地将其放置在根目录中。务必注意，服务工作线程运行时生命周期与网络应用程序的其余部分完全分离。...如果你决定从头开始自己创建一个服务工作线程，请考虑在里面放入一个“终止-开关” – 即服务工作线程完全取消无效缓存并重新安装的一种方法。

1.2K1 0

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

这可以让网页在「没有网络连接」的情况下正常使用，因为部分或全部页面可以从服务工作线程缓存中提供服务。...安全限制 ❝服务工作线程也「受加载脚本对应源的常规限制」 ❞ 此外，由于服务工作线程几乎可以「任意修改和重定向网络请求」，以及加载静态资源，服务工作者线程 API 「只能在安全上下文（HTTPS）下使用...2. claim()可用于「不希望等待页面重新加载」而让服务工作线程开始管理页面生命周期 Service Worker 规范定义了 6 种服务工作者线程可能存在的状态：已解析parsed 安装中installing...如果浏览器检测到某个服务工作线程空闲了，就可以终止它并在需要时再重新启动。这意味着可以「依赖」服务工作线程在「激活后处理事件」，但不能依赖它们的持久化全局状态。...服务工作线程可以「在安装时缓存后备资源」，然后在缓存和网络都失败时返回它们。

2.5K2 0

阿里&百度&腾讯&facebook&Microsoft&Google开源项目汇总

- 半同步半异步模式，采用独立多IO线程，通过Epoll管理请求的接入以及读写，工作线程采用固定线程池。IO线程与工作线程通过内存队列进行交互。　...开发者也可通过它的dumpapp工具提供的命令行接口来访问应用内部。...Cascading是一个构建于Hadoop上的API，用来创建复杂和容错数据处理工作流，它抽象了集群拓扑结构和配置，允许开发者快速开发复杂分布式的应用，而不用考虑背后的MapReduce。...它全部用C写成，使用Apache 2.0 License授权。Twemproxy的强大之处在于可以通过配置的方式让它禁用掉失败的结点，同时还能在一段时间后进行重试，抑或使用指定的键->服务器映射。...它的特性是： - 通过代理的方式减少缓存服务器的连接数； -自动在多台缓存服务器间共享数据； -通过不同的策略与散列函数支持一致性散列； -通过配置的方式禁用失败的结点；

1.9K9 1

Remix 究竟比 Next.js 强在哪儿？

与常规的在构建或部署时获取所有数据并将页面以静态文件形式渲染不同，Remix 在流量到达时便准备好缓存，从中提取出文件，同时在后台准备好接收下一个访问的重新验证。...说到底，在使用 Shopify API 时，缓存几乎是不必要的，无论缓存命中或未命中，在加载速度的表现上没什么太大的区别。...在 Remix 中，整个载入链中唯一需要率先完成加载的只有文件，这是因为 Remix 的设计便是如此，永远从服务端获取数据，去除用户网络对加载速度的影响。...而在部署时没有完成构建的页面，将由 Next.js 以服务器方式对页面进行渲染，然后再缓存到 CDN 上。...那缓存未命中怎么说？好问题。服务器和 HTTP 的缓存只会在网页接受到流量时才能起作用，但网站的业务也只有在接收流量时才有用。

3.9K6 0

如何使用浏览器工具调试PWA

有效值包括「fullscreen」（打开应用时全屏展示）、「standalone」（显示设备标准的状态栏和系统返回按钮）、「minimal-ui」(只有返回、前进、重新加载按钮)和「browser」（包括地址栏正常的浏览器...在设备模式屏幕下，离线也是强制的，除网络节流。重新加载更新：当调试时，这个非常有用。Service Workers首次加载时会将其安装在设备上。...您可以强制触发以下事件： Update 将强制更新Service Worker Push 模拟一个推送事件 Sync 模拟后台同步事件，这允许用户脱机执行操作，服务器上线后，再与服务器通信。...当加载Service Workers使用Cache API缓存的资源时，DevTools的网络面板显示为来自Service Workers的： ? Firefox如何？...从这里您可以取消注册任何Service Worker，并在调试器中为任何类型的工作线程（也包括Web Workers）打开线程代码。您还可以触发Push API push 事件来调试Push事件。

3.7K4 0

系统设计：即时消息服务

带宽估计：如果我们的服务每天获得2TB的数据，这将为我们每秒提供25MB的传入数据。...当服务器收到脱机用户的消息时会发生什么情况？如果接收方已断开连接，服务器可以通知发送方传递失败。如果是临时断开连接，例如，接收器的长轮询请求刚刚超时，那么我们应该期待用户重新连接。...从服务器获取数据时，客户端应分页。对于不同的客户端，页面大小可能不同，例如，手机屏幕较小，因此我们需要在视口中减少消息/对话的数量。...2.每当一个用户向另一个已脱机的用户发送消息时，我们都可以向发送失败消息发送程序并更新客户端上的状态。 3.每当用户联机时，服务器总是可以以几秒钟的延迟广播该状态秒，以查看用户是否没有立即脱机。...推送通知将使我们的系统能够向脱机用户发送消息。对于推送通知，每当出现新消息或事件时，每个用户都可以从其设备（或web浏览器）选择加入以获取通知。

5.9K65 2

Web Workers与Service Workers：后台处理与离线缓存

在主线程中实例化 Worker在主页面的 JavaScript 中，实例化 Web Worker 并开始通信。...，fetch 事件用于拦截网络请求，优先从缓存中提供资源，如果没有找到，则尝试从网络获取。...网络优先策略在网络可用时，优先使用网络响应，只有在网络失败时才使用缓存。...推送通知Service Workers 支持通过 Push API 实现推送通知。首先，用户需要订阅服务，然后服务器可以发送推送消息到客户端。...示例：Service Worker更新流程检测更新：在主页面中，每次加载时检查Service Worker是否有新版本。

3331 0

你的应用太慢了，给我司带来了巨额损失，该怎么办

那么，是什么影响了页面的加载速度，导致用户跳出？其中有一个大的因素就是我们的应用用到了很多的第三方库。那么，有没有一种一举两得的方法，我即可以保留使用的第三方脚本，又可以保证页面的加载速度？...一个网站的请求越多，它的加载时间就越长。发送太多的 JavaScript 会让主线程很忙。过多的 JavaScript 会阻碍 DOM 的构建，延迟页面呈现的速度。...cpu 密集型脚本解析和执行可能会延迟用户交互，并会导致电池电量消耗的更快。不小心加载的第三方脚本可能会产生单点故障(SPOF)。HTTP 缓存不足，迫使经常直接从网络获取资源。...它们主要用于创建有效的脱机体验，拦截网络请求，并根据网络是否可用采取适当的操作，以及更新驻留在服务器上的资源。它们还允许访问推送通知和后台同步 api。...然而，为了让它更容易在各种框架或服务中使用，可以为它们的生态系统制作插件/包装器。只有当特定脚本具有 type="text/ Partytown " 属性时，才会启用 Partytown。

4830 0

Web Worker 的内部构造以及 5 种你应当使用它的场景

一旦下载完成，代码将立刻执行，此时 Worker 也就开始了它的工作。如果提供的代码文件不存在返回 404，那么 Worker 会静默失败并不抛出异常。...加密：针对个人敏感数据的保护条例变得日益严格，端对端的数据加密也变得更为流行。当程序中需要经常加密大量数据时（如向服务器发送数据），加密成为了非常耗时的工作。...数据预获取：为优化你的网站或 web 应用的数据加载时长，你可以使用 Web Worker 预先获取一些数据，存储起来以备后续使用。...在此背景下，一些与 IndexDB 类似的 API 便应运而生了。从根本上来说，客户端一侧需要有数据存储能力。为保证存取时不阻塞 UI 线程，这部分工作理应交给 Web Worker 完成。...好吧，在 IndexDB 中你可以不使用 Web Worker，因为它提供的异步 API 同样不会阻塞 UI。

3.6K1 0

萌新必看——10种客户端存储哪家强，一文读尽！

浏览器有权限删除存储内容比较陈旧或者是比较大的项目内容；还能记录页面状态，当我们离开当前页面，重新打开页面的时候上次记录的内容会得到保存记录，可以直接使用。...—例如当前屏幕、输入的数据、用户首选项等访问本地数据或文件并有严格隐私要求的实用程序脱机工作的渐进式web应用程序（PWA）接下来将为大家详细比较10中不同的客户端存储方式，包括这些方法的限制...存储大量结构化信息不太实用，但是我们可以通过在页面卸载时写入数据来避免性能问题。 4.IndexedDB/索引数据库 ? IndexedDB提供了一个类似NoSQL的低级API来存储大量数据。...Cache API ? Cache API为HTTP请求和响应对象对提供存储。您可以创建任意数量的命名缓存来存储任意数量的网络数据项。 API通常对缓存渐进式web应用进行网络响应。...当设备与网络断开连接时，重新提供缓存内容，以便web应用程序可以脱机运行。以下代码将网络响应存储在名为myCache的缓存中： ? 类似的函数可以从缓存中检索项。

2.9K1 0

JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景

有两种方法可以停止 Worker:从主页调用 worker.terminate() 或在 worker 内部调用 self.close()。...Workers 将为你完成所有繁重的工作，然后一旦完成再把结果返回给 page 页面。处理错误和 JavaScript 代码一样，Web workers 里抛出的错误，你也需要进行处理。...Prefetching data(预取数据)：为了优化你的网站或 web 应用程序并改进数据加载时间，你可以利用 Web Workers 提前加载和存储一些数据，以便在需要时稍后使用。...这也是 IndexDB 或类似 api 发挥作用的地方。通常情况下，客户端的存储都是必要的，但使用起来需要不阻塞UI渲染线程，那么工作就需要在 Worker 中进行了。...不过，以IndexDB 为例，它提供了一些异步的API，调用它们的话也不需要使用 web worker，但如果是同步的 API，就必须要在 Worker 中使用了。

8381 0

校招前端二面面试题合集

优点：用来加载速度较慢的内容（如广告）可以使脚本可以并行下载可以实现跨子域通信缺点：iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎索识别会产生很多页面，不容易管理compose题目描述...Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。...它们之间的区别：link：浏览器会派发一个新等线程(HTTP线程)去加载资源文件，与此同时GUI渲染线程会继续向下渲染代码@import：GUI渲染线程会暂时停止渲染，去服务器加载资源文件，资源文件没有返回之前不会继续渲染...，告诉用户向这台设备发起请求区域负载均衡设备选择一台合适的缓存服务器来提供服务，将该缓存服务器的IP地址返回给全局负载均衡设备全局负载均衡设备把服务器的IP地址返回给用户用户向该缓存服务器发起请求，缓存服务器响应用户的请求...如果缓存服务器没有用户想要的内容，那么缓存服务器就会向它的上一级缓存服务器请求内容，以此类推，直到获取到需要的资源。最后如果还是没有，就会回到自己的服务器去获取资源。

6641 0

异步JS中的Web Workers

因为javascript是单线程的(注意浏览器不是单线程的, js调用其内部的api也不一定是单线程的, 如定时器), 其只有一个线程用来执行代码, 所以为了避免遇到计算量大、耗时的任务阻塞线程继续往下执行...虽然有事件循环机制, 但其本质上还是在一个单线程上执行, 它在同一时间也只能做一件事情, 如果它正在等待长期运行的同步调用返回，就不能做其他任何事情....Service Workers: 服务线程, 一个注册在指定源和路径下的事件驱动worker, 采用 js 控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源....(保证同源), 会看到worker.js只加载了一次, 下面分别是 index.html 和 index2.html 的 network 情况, 说明两个同源的页面是共享了同一个线程, 并且启动后, 刷新页面也不会重新去初始化...SW 的缓存中获取, 此时将网络断开, 发现缓存的资源仍然可以获取到, 页面仍然可以正常访问再看看Application的Cache Storage, 可以看到以 key 值 v1 存储的响应缓存,

1.7K2 0

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

上篇文章：现代浏览器内部机制 Part 1 | 多进程架构本文是这个系列的第二篇文章，会深入到 Chrome 的内部工作。...让我们以一个常见的例子作为起点：输入一个 url，浏览器会从服务端获取数据并将页面展示出来。本文会聚焦在用户通过浏览器向一个站点发起访问请求以及浏览器准备渲染这个页面的部分，这个过程我称之为导航。...Step 4：渲染进程网络线程以获取了全部的数据，并完成了所有需要的检查，此刻它自信的告诉 UI 线程：“小兄弟，数据准备好了！”。接着，UI 线程会唤起一个渲染进程去渲染页面。 ?...Service Worker 可以从本地缓存中加载数据（无需发起网络请求），也可以选择通过网络请求获取最新的资源和数据。 ?...它将为这些请求设置一个 Header，由服务端来决定为这些请求发送不同的内容；比如，仅返回更新的数据而不是整个文档。 ?

1.2K3 0

系统设计面试的行家指南（中）

通知服务器 :提供以下功能：为发送通知的服务提供 API。这些 API 只能在内部访问或由经过验证的客户端访问，以防止垃圾邮件。进行基本验证，以验证电子邮件、电话号码等。...接下来，让我们看看每个组件如何协同工作来发送通知： 1。服务调用通知服务器提供的 API 来发送通知。 2。通知服务器从缓存或数据库中获取元数据，如用户信息、设备令牌和通知设置。 3。...对于不活跃的用户或者很少登录的用户来说，预先计算的新闻提要浪费了计算资源。扇出上读。新闻提要是在读取时生成的。这是一种随需应变的模式。当用户加载她的主页时，最近的帖子被拉出来。...如果聊天服务器离线，service discovery (Zookeeper)将为客户端提供一个新的聊天服务器来建立新的连接。消息重发机制。重试和排队是重新发送消息的常用技术。祝贺你走到这一步！...DAG 调度程序错误：重新调度任务。资源管理器排队：使用副本。任务工作线程关闭：在新的工作线程上重试任务。

2461 0

前端性能优化(三)——浏览器九大缓存方法

web缓存发现请求资源已经被存储，它会拦截请求，返回资源副本，而不会去服务器重新请求资源。具体的缓存设置，如何判断是否有缓存？等，上一篇文章以详细介绍，可点击《浏览器缓存机制》查看。...indexDB 分别为同步和异步访问提供了单独的API，同步API本打算供Web Worker内部使用，但目前还未实现。...，将大部分的图片、js、css等资源放在mainfest文件配置中，页面打开时通过mainfest文件读取本地文件或请求服务器资源。...当网络断开时，可以继续访问页面。文件缓存到本地，不需要每次都从网络上请求。稳定性比较好，遇网络故障或服务器故障可以继续访问本地缓存。加载速度快，缓存资源为本地资源，因此加载速度较快。...8、cacheStorage cacheStorage 表示 cache对象的存储。该接口提供 serviceWorker 或其他类型的工作线程或window范围访问的所有命名缓存的主目录。

1.9K3 0

前端性能优化(三)——浏览器九大缓存方法

web缓存发现请求资源已经被存储，它会拦截请求，返回资源副本，而不会去服务器重新请求资源。具体的缓存设置，如何判断是否有缓存？等，上一篇文章以详细介绍，可点击《浏览器缓存机制》查看。...indexDB 分别为同步和异步访问提供了单独的API，同步API本打算供Web Worker内部使用，但目前还未实现。...，将大部分的图片、js、css等资源放在mainfest文件配置中，页面打开时通过mainfest文件读取本地文件或请求服务器资源。...当网络断开时，可以继续访问页面。文件缓存到本地，不需要每次都从网络上请求。稳定性比较好，遇网络故障或服务器故障可以继续访问本地缓存。加载速度快，缓存资源为本地资源，因此加载速度较快。...8、cacheStorage cacheStorage 表示 cache对象的存储。该接口提供 serviceWorker 或其他类型的工作线程或window范围访问的所有命名缓存的主目录。

1.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭