首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Workbox如何确定路由是否与请求匹配?

Workbox是一个用于创建离线优先的Web应用程序的JavaScript库。它提供了一套工具和库,帮助开发人员实现离线缓存、路由和运行时缓存等功能。

在Workbox中,路由是指根据请求的URL确定如何处理该请求的过程。Workbox使用路由来决定是否将请求与缓存中的资源进行匹配,以及如何响应该请求。

Workbox中的路由匹配是通过使用正则表达式来实现的。开发人员可以使用workbox.routing.registerRoute()方法来注册路由,并指定一个正则表达式来匹配请求的URL。例如,以下代码将注册一个路由,用于匹配所有以.jpg为后缀的图片文件:

代码语言:txt
复制
workbox.routing.registerRoute(
  /\.(?:jpg|jpeg|png|gif)$/,
  new workbox.strategies.CacheFirst()
);

在上述代码中,正则表达式/\. (?:jpg|jpeg|png|gif)$/用于匹配以.jpg.jpeg.png.gif为后缀的URL。当请求的URL与该正则表达式匹配时,将使用CacheFirst策略来处理该请求,即首先尝试从缓存中获取响应,如果缓存中不存在,则发起网络请求。

除了使用正则表达式进行路由匹配外,Workbox还提供了其他一些路由匹配方法,如workbox.routing.registerNavigationRoute()用于注册导航路由,workbox.routing.registerRoute()用于注册自定义路由等。

总结起来,Workbox通过使用正则表达式来确定路由是否与请求匹配。开发人员可以根据自己的需求,使用适当的路由匹配方法和正则表达式来实现灵活的请求路由和缓存策略。

关于Workbox的更多信息和使用方法,可以参考腾讯云的相关产品介绍页面:Workbox - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你的web应用支持离线访问和策略缓存吗?

开始使用Workbox Workbox 定义了标准统一API,我们来看如何借助它提供的API逐步优化项目 路由请求定义缓存 在 Workbox 中,最核心的概念要数基于路由的策略缓存了,这里抓住两个关键词...接下来的重点便是放在如何基于路由如何体现策略。 前端的大多资源都是通过 HTTP 请求得来的,包括 js 、css 、 图片等等,既然这些内容都需要请求,那我能不能在请求发出后,做一些处理呢?...就会有针对匹配路由的资源定义不同的关于缓存的策略,比如,我们要求指定资源 网络请求优先 workbox.routing.registerRoute( /\.js$/, new workbox.strategies.NetworkFirst...:png|jpg|jpeg|svg|gif)$/, handler ); 函数形式 // 通过函数来匹配请求路由 const matchFunction = ({url, event}) => {...// 如果请求路由匹配了就返回 true,也可以返回一个参数对象以供 handler 接收处理 return false; }; workbox.routing.registerRoute

99720

Workbox5+Webpack4构建离线应用

路由功能是workbx的核心功能,主要是匹配资源路径后,采用相应的缓存策略,或者自定义缓存处理,使用方法如下所示: import {registerRoute} from 'workbox-routing...,第二个参数是对匹配路径进行的处理函数,可以用workbox封装的缓存策略处理函数,也可以自定义,上述示例就是使用的workbox内部封装的CacheFirst缓存策略。...: NetworkFirst:网络优先 CacheFirst:缓存优先 NetworkOnly:仅使用正常的网络请求 CacheOnly:仅使用缓存中的资源 StaleWhileRevalidate:从缓存中读取资源的同时发送网络请求更新本地缓存...,使用navigationRoute可以匹配导航请求,从而从换从中加载index.html,但默认情况会拦截所有导航请求,如果需要控制,可以在方法中添加白名单和黑名单加以控制。...onClick={() => { notification.close(key); reloadSW(); }} > 确定

1.2K10
  • PWA 实践应用(Google Workbox

    当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件,如果符合,则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...通过 Workbox 路由和预缓存,你可以在几行代码中设置这个模式。

    1.5K40

    Service Worker:让你的 Web 应用牛逼起来

    Etag是由服务端特定算法生成的该文件的唯一标识,而请求头把返回的Etag值通过If-None-Match再带给服务端,服务端通过比对从而决定是否响应新内容。这也是304缓存。...它让开发人员可以确定缓存文件的时间和长度,以及在不进入网络的情况下将其提供给浏览器,这意味着它可以用于创建Web离线工作的应用。...缓存策略 workbox提供的缓存策划有以下几种,通过不同的配置可以针对自己的业务达到不同的效果: staleWhileRevalidate 这种策略的意思是当请求路由有对应的 Cache 缓存结果就直接返回...最大数量 maxEntries: 30 }) ] }) ); networkFirst 这种策略就是当请求路由是被匹配的...maxEntries: 10 }) ] }) ); cacheFirst 这个策略的意思就是当匹配请求之后直接从 Cache 缓存中取得结果,如果 Cache

    2.3K50

    PWA 实践应用(Google Workbox

    当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件,如果符合,则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...通过 Workbox 路由和预缓存,你可以在几行代码中设置这个模式。

    44110

    前端性能和加载体验优化实践

    WebP 有静态动态两种模式。动态WebP(Animated WebP)支持有损无损压缩、ICC 色彩配置、XMP 诠释数据、Alpha 透明通道。...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...如何使用 WorkboxWorkbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件,如果符合,则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。

    1.5K20

    ServiceWorker工作机制生命周期:资源缓存协作通信处理

    前端缓存分析 前端缓存 大致可以分为 http缓存 浏览器缓存 http缓存推荐阅读《浏览器http缓存机制剖析:存储策略过期策略的机理分析》,我们来分析下 浏览器缓存 storage cookie...他们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动,更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。...,通过不同的配置可以针对自己的业务达到不同的效果 staleWhileRevalidate 这种策略的意思是当请求路由有对应的 Cache 缓存结果就直接返回, 在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新...networkFirst 这种策略就是当请求路由是被匹配的,就采用网络优先的策略,也就是优先尝试拿到网络请求的返回结果,如果拿到网络请求的结果,就将结果返回给客户端并且写入 Cache 缓存。...可以像如下方式使用 Network First 策略: cacheFirst 这个策略的意思就是当匹配请求之后直接从 Cache 缓存中取得结果,如果 Cache 缓存中没有结果,那就会发起网络请求

    1.5K20

    【腾讯云前端性能优化大赛】前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

    当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...A.3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...Workbox 的主要特性之一是它的路由和缓存策略模块。 路由和缓存策略 Workbox 允许使用不同的缓存策略来管理 HTTP 请求的缓存。...首先确定正在处理的请求是否符合条件,如果符合,则对其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...通过 Workbox 路由和预缓存,你可以在几行代码中设置这个模式。

    2.7K121

    【腾讯云前端性能优化大赛】前端首屏性能优化

    从本地读取肯定是要比网络请求快的。 那么我们如何缓存呢?这里就不讲什么协商缓存和强缓存了,这种网上太多了,不再赘述,这次讲另一种缓存,使用Service Worker。...Service workers 本质上充当 Web 应用程序、浏览器网络(可用时)之间的代理服务器。...这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。...本文这里直接从使用说起,如何接入项目进行使用。...// registerRoute 是最重要的方法,用来拦截请求,第一个参数可以是正则也可以是一个函数 // 是正则的话,当请求的URL匹配的时候,就会对这个请求执行对应得 CacheHandler registerRoute

    1.6K41

    为 vue 项目添加 PWA 支持

    vue & PWA 如果您的目的不是为现有的 vue 项目添加 PWA 支持,那么更推荐尝试 Lavas 注:PWA 应用要求必须全程 https,且在已安装的 PWA 应用中无法发送 http 请求...需要创建或修改项目中的vue.config.js,配置项以及示例在此处 我想多提几句的配置项有三个: workboxPluginMode 可选配置项,默认为GenerateSW GenerateSWInjectManifest...如何选择: 如果你只是想简单地将项目 PWA 化,选择GenerateSW,插件会自动帮你生成包含 precache manifest 的service-worker.js 如果你有较高的定制需求,需要在已有...的强大所在,阅读这些内容会使你更好地了解如何配置以及具体能做什么: Workbox Routing Workbox Strategies Workbox Cache Expiration iconPaths...中指定本地workbox-sw.js的路径 接着在registerServiceWorker.js中我们可以如下所示在updated()函数中加入一些内容,询问用户是否愿意重载页面以更新应用,若用户同意则向

    3.7K00

    - 论如何善用ServiceWorker

    同时,WorkBox只能简单的缓存数据,并不能做到拦截篡改请求的功能,尤其不能精准把握每一个资源的缓存情况,自定义程度并不高。...如果此处网址过多,将在页面加载时疯狂请求所有的url(例如1k个) 现在,SW初始化已经完成了。接下来,我将讲述SW如何捕获页面的请求。...Promise.race 此函数也是并行执行,不过all不同的是,只要有任何一个函数完成,就立刻返回,无论其是否reject或者resolve。...Promise.any 这个函数非常的有用,其作用和race接近,不过之不同的是,any会同时检测结果是否resolve。...caches.match(req)将会试图在CacheStorage中匹配请求的url获取值,然后丢给管道同步函数then,传参resp为Cache匹配到的值。

    3.5K21

    WorkBox 之底层逻辑Service Worker

    请求资产、服务器响应请求以及下载响应都需要时间。所涉及的时间是多样且不确定的。...缓存策略是service worker的fetch事件Cache API之间的交互。如何编写缓存策略取决于不同情况。...「仅缓存」运作方式:当service worker控制页面时,「匹配请求只会进入缓存」。...检查缓存内容 如果无法检查缓存,就很难确定缓存策略是否按预期工作。Chrome DevTools 的应用程序面板提供了一个子面板,用于检查缓存实例的内容。...处理存储配额应该是Service Worker开发的一部分,而 Workbox 使这个过程比自行管理更简单。不管是否使用 Workbox,模拟自定义存储配额以测试缓存管理逻辑可能是一个不错的主意。

    39920

    Go 1.22中的路由提升

    这些功能允许你将常见的路由表示为模式,而不是Go代码。尽管它们很容易解释和使用,但在选择多个匹配请求的模式时,确定胜出的模式的规则是一个挑战。...实际上,每个路由模式对应一个正则表达式,而匹配请求的集合则充当正则语言的角色。 通过语言而不是表达式定义优先级易于陈述和理解。但基于潜在无限集合的规则也有一个缺点:如何高效实现它并不明确。...事实证明,我们可以通过逐段遍历模式来确定两个模式是否冲突。粗略地讲,如果一个模式在另一个模式有通配符的地方有一个字面段,那么它更具体;但如果字面值两个方向的通配符对齐,则这两个模式冲突。...当在ServeMux上注册新模式时,它会检查先前注册的模式是否存在冲突。但是检查时需要耗费额外的时间,所以我们使用索引跳过不可能与新模式冲突的模式。在实践中,它的工作效果相当好。...无论如何,此检查发生在模式注册时,通常是在服务器启动时。在Go 1.22中,匹配传入请求的时间以前的版本相比并没有太大变化。 兼容性 我们尽一切努力确保新功能与较早版本的Go兼容。

    27310

    VirtualService配置解析

    VirtualService对象定义了从一个或多个主机到目标服务的路由规则,并指定了如何请求路由到目标服务的不同版本和子集。...VirtualService的匹配条件在VirtualService中,可以定义各种匹配条件,以确定应该如何路由请求。下面是一些常见的匹配条件:uri:请求的URI路径。...sourceLabels:请求的来源标签,如kubernetes标签。在VirtualService中,可以同时指定多个匹配条件。这些条件之间是“”的关系,只有同时匹配所有条件才会触发路由规则。...VirtualService的路由规则在VirtualService中,可以定义多个路由规则,以指定如何请求路由到目标服务。...每个路由规则可以包含一个或多个目标服务,以及用于确定哪个服务应该处理请求的负载均衡和故障转移策略。以下是一些常见的路由规则:route:将请求路由到指定的目标服务。

    82340

    ASP.NET MVC URL重写优化(进阶篇)-继承RouteBase玩转URL

    -包含路由定义的值(如果该路由当前请求匹配)或 null(如果该路由请求匹配)。...GetVirtualPath:检查路由是否某个规则匹配,返回一个对象(包含生成的 URL 和有关路由的信息)或 null(如果路由 values 不匹配)。...因为我们返回了null,意味着该请求与我们新增的分类路由规则不匹配,那程序将在路由表中继续自上而下的进行匹配。...由此可看出,VirtualPathData()在路由映射中的活:处理请求路由键值对,生成相应URL,不处理或不匹配则返回null。   ...VirtualPathData()必须处理这条规则匹配的每一次路由请求,返回相同的URL;放弃之不匹配请求,返回null,让匹配继续。 !!!

    1.5K30

    解析Spring Cloud Gateway在微服务中的角色

    三个关键词来概述Gateway的作用: 路由 负载均衡 请求功能增强 Gateway的三个概念 核心概念 描述 Routes(路由路由请求转发的基本模块,它定义了请求匹配规则和如何转发请求。...Predicate(断言) 断言用于定义请求匹配条件,它决定了请求是否会被路由到相应的目标。断言可以根据请求的路径、请求头、请求方法等进行匹配,如果请求断言条件匹配成功,则会被路由到相应的目标。...这些规则指示NGINX如何转发请求。其中,可以将特定的URL或路径匹配到网关的地址。 网关接收请求:NGINX根据代理规则将请求转发给Spring Cloud网关。...这样可以集中处理所有的请求,并提供一个统一的访问接口。 路由负载均衡 Spring Cloud Gateway可以根据预定义的路由规则将请求路由到相应的微服务实例。...若无法匹配到对应的路由规则,断言失败,则请求将被拒绝并返回响应的错误响应。 请求某个路由规则匹配成功,确定目标服务的地址 Gateway将请求转发到目标服务的地址 目标服务接收到请求并处理。

    31030

    ASP.NET MVC5高级编程 ——(5)路由

    (controller/action--简单来说:Routing路由作用--确定Controller、确定Action、确定其他参数、根据识别出来的数据, 将请求传递给Controller和Action...传入路由特性的字符串叫做路由模版,他就是一个模式匹配规则,决定了这个路由是否是用于传入的请求。如果匹配,MVC就运行路由的操作方法。...URL模式的表现形式:{controller}/{action}; 应用系统由若干条路由组织成,每条路由都有一个URL模式; 模式匹配的URL可能有多条; 路由系统对应用的一个URL请求进行服务时,...要查看这个URL请求哪个URL模式相匹配,然后用这个模式对应的路由对这个URL请求进行处理; URL匹配: URL可以被分成除主机名(域名)和查询字符串以外的。...); 试想:如果不定义默认路由,URL将会如何进行匹配

    2K40

    Hexo添加PWA支持

    执行下面的命令 npm install hexo-pwa --save hexo@4.2.0 目前赞不兼容 hexo-pwa,使用 hexo@4.2.0 版本的用户推荐降级到 hexo@4.1.1 如何查看版本...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI(如导航栏、工具栏等)将会被隐藏 minimal-ui 显示形式standalone...类似,浏览器相关UI会最小化为一个按钮,不同浏览器在实现上略有不同 browser 浏览器模式,普通网页在浏览器中打开的显示一致 scope: {string} 作用域 scope 应遵循如下规则:.../3.3.0/workbox-sw.js'); ​ if (workbox) { workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com...按F12或者Ctrl + Shift + I或者直接鼠标右键弹出的菜单中,有个检查,鼠标点击,就可以进入开发者调试模式,然后选择Application—>Service Workers,查看是否成功?

    1.2K10
    领券