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

workbox v5 -如何对service worker进行版本控制?

Workbox v5 是一个用于创建离线优先的 Progressive Web App(PWA)的 JavaScript 库。它提供了一组工具和库,用于简化 Service Worker 的开发和管理。

在 Workbox v5 中,可以通过以下步骤对 Service Worker 进行版本控制:

  1. 创建一个新的 Service Worker 文件,例如 sw.js
  2. sw.js 文件中,使用 Workbox 提供的 workbox.core.setCacheNameDetails() 方法来设置缓存名称和版本号。例如:
代码语言:txt
复制
workbox.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
});
  1. sw.js 文件中,使用 Workbox 提供的 workbox.precaching.precacheAndRoute() 方法来预缓存和路由资源。例如:
代码语言:txt
复制
workbox.precaching.precacheAndRoute([
  { url: '/index.html', revision: 'v1' },
  { url: '/styles.css', revision: 'v1' },
  { url: '/script.js', revision: 'v1' },
]);
  1. 在 HTML 文件中,注册 Service Worker。例如:
代码语言:txt
复制
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('Service Worker registered:', registration);
      })
      .catch((error) => {
        console.log('Service Worker registration failed:', error);
      });
  });
}

通过以上步骤,我们可以对 Service Worker 进行版本控制。当更新应用程序时,只需更新 sw.js 文件中的缓存名称和版本号,然后重新注册 Service Worker,新的版本将会被安装并生效。

Workbox v5 还提供了其他功能和工具,例如路由请求、缓存策略、后台同步等,可以根据具体需求进行使用。

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

相关·内容

Workbox5+Webpack4构建离线应用

service worker缓存的优缺点: 优点: 非侵入式缓存 缓存内容开发者完全可控 持续性缓存 独立于主线程之外,不堵塞进程 缺点: 权限太大,能拦截所有fetch请求,需要控制一下 发版更新处理比较麻烦...CacheFirst({ cacheName: 'my-image-cache', })); registerRoute有两个参数,第一个参数是一个正则表达式,用来匹配路径,第二个参数是匹配路径进行的处理函数...包注册service worker并添加一下自定义事件,方便后期进行更新和离线事件的处理。...如果正常引入,我们可以在控制台中看到下图: 总结 service worker实现缓存有非侵入、持久化、缓存内容可控等优点 Workbox可以理解为service worker的库,利用它可以快速进行...service worker开发 通过workbox-webpack-plugin可以将workbox引入到现有的用webpack构建的项目中 本文workbox的接口的解释较少,需要各位去官网查阅api

1.2K10

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

使用 service worker 前,需要创建一份注册文件,不妨在项目下创建一个名为 sw.js 的文件 console.log('Hello, I am sw.js file') 然后在应用中通过这个文件进行注册...,通过以下代码就能完成应用中 service worker 的注册,后面关于 service worker 相关的处理,在 sw.js 文件中进行。...}); } 刷新页面,就能看到控制台打印了这句话,表示 service worker 注册成功 打开控制台 Application ,一切在掌控之中, service...worker 注册成功 到这里完成了,完成了 service worker 的注册,关于其相关的配置和处理,我们一起去 sw.js 文件中定义吧!...Workbox didn't load ?`); } 更改完成后,回到浏览器,此时刷新浏览器没有任何变化,这里需要提醒一点,更改完 service worker 注册文件需要终止重启或者更新。

99620
  • Service Worker 实现 web 应用消息推送

    Service Worker 介绍 Service Worker 是事件驱动的 worker,生命周期与页面无关,关联页面未关闭时,它也可以退出,没有关联页面时,它也可以启动. service worker...管理资源缓存 浏览器提供了很多存储相关的 H5 API,比如 application cache、localStorage,但都不是非常好用,主要是给予页端的控制权太少,限制太多,页端不能完全控制每一个资源请求的存储逻辑...如何灵活地控制缓存,可以参考 Google 官方文章 《The Offline Cookbook》。 1.4....状态管理 Service worker 有两类状态,一类是 service worker 线程的运行状态,另一类是 service worker 脚本版本的状态。...({modulePathPrefix: "/workbox-v3.6.2"}); 4.2 人工配置的文件部分 // continue // dist/service-worker.js workbox.core.setCacheNameDetails

    2.3K20

    为 vue 项目添加 PWA 支持

    : 如果你只是想简单地将项目 PWA 化,选择GenerateSW,插件会自动帮你生成包含 precache manifest 的service-worker.js 如果你有较高的定制需求,需要在已有...Service Worker 的基础上将项目 PWA 化,则选择InjectManifest,插件会在你指定的service-worker.js的基础上加入 precache manifest workboxOptions...Worker 的等待阶段 添加离线 Google Analytics 支持 运行时缓存runtimeCaching,Workbox 的强大所在,阅读这些内容会使你更好地了解如何配置以及具体能做什么:...Worker 的更新 这是开发 PWA 应用时需要考虑的一个重要问题 由于 Service Worker 的更新机制(扩展阅读:【Service Worker】生命周期那些事儿),直接单纯的刷新页面并没有结束当前...注:以下方法中提到的registerServiceWorker.js是由 PWA 插件在src目录中自动生成的,其作用是注册 SW 以及提供其生命周期钩子,具体可以看该 npm 包 register-service-worker

    3.7K00

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

    然后基于google推出的第三方库workbox,在产品中进行运用实践,并其原理进行简要剖析。 前端缓存简介 先简单介绍一下现有的前端缓存技术方案,主要分为http缓存和浏览器缓存。...PWA也运用了该文件,不同于manifest简单的将文件通过是否缓存进行分类,PWA用manifest构建了自己的APP骨架,并运用Servie Worker控制缓存,这也是今天的主角。...Service Worker Service Worker本质上也是浏览器缓存资源用的,只不过他不仅仅是cache,也是通过worker的方式来进一步优化。...所以这里我列举了几个使用Service Worker的页面: 淘宝 网易新闻 考拉 所以说还是可以尝试下的。...做到按需依赖的原理就是通过Proxy全局对象workbox进行代理: new Proxy(this, { get(t, s) { //如果workbox对象上不存在指定对象,就依赖注入该对象对应的脚本

    2.3K50

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

    出于安全问题的考虑,Service Worker 只能被使用在 https 或者本地的 localhost 环境下。...JS 文件的目录的 object: Serivce Worker 的配置项,可选填,其中比较重要的是 scope 属性,它是 Service Worker 控制的内容的子目录 Service Worker...如果是第一次加载sw,在安装后,会直接进入activated阶段,而如果sw进行更新,情况就会显得复杂一些。流程如下: 首先老的sw为A,新的sw版本为B。...生命周期图 Service Worker信息通讯 postMessage 方法可以进行 Service Worker 和页面之间的通讯 从页面到 Service Worker navigator.serviceWorker.controller.postMessage...做到按需依赖的原理就是通过Proxy全局对象workbox进行代理: new Proxy(this, {   get(t, s) {     //如果workbox对象上不存在指定对象,就依赖注入该对象对应的脚本

    1.5K20

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

    Worker A.3.1.1 什么是 Workbox Workbox 是一组库,可以帮助开发者编写 Service Worker,通过 CacheStorage API 缓存资源。...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...A.3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...首先确定正在处理的请求是否符合条件,如果符合,则其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...预缓存 除了在发出请求时进行缓存(运行时缓存)之外,Workbox 还支持预缓存,即在安装 Service Worker 时缓存资源。

    2.7K121

    PWA 实践应用(Google Workbox

    [twitter-pwa-offline-20210412-w-400.jpg] 3 技术选型(Service Worker) 3.1 使用 Google Workbox 构建 Service Worker...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...首先确定正在处理的请求是否符合条件,如果符合,则其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...预缓存 除了在发出请求时进行缓存(运行时缓存)之外,Workbox 还支持预缓存,即在安装 Service Worker 时缓存资源。

    1.5K40

    PWA 实践应用(Google Workbox

    3 技术选型(Service Worker) 3.1 使用 Google Workbox 构建 Service Worker 3.1.1 什么是 Workbox Workbox 是一组库,可以帮助开发者编写...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...3.1.2 如何使用 Workbox Workbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...首先确定正在处理的请求是否符合条件,如果符合,则其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...预缓存 除了在发出请求时进行缓存(运行时缓存)之外,Workbox 还支持预缓存,即在安装 Service Worker 时缓存资源。

    43710

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

    技术选型 使用 Google Workbox 构建 Service Worker 什么是 Workbox ?...当一起使用 Service Worker 和 CacheStorage API 时,可以控制网站上使用的资源(HTML、CSS、JS、图像等)如何从网络或缓存中请求,甚至允许在离线时返回缓存的内容。...如何使用 WorkboxWorkbox 是由许多 NPM 模块组成的。首先要从 NPM 中安装它,然后导入项目 Service Worker 所需的模块。...首先确定正在处理的请求是否符合条件,如果符合,则其应用缓存策略。匹配是通过返回真值的回调函数进行的。缓存策略可以是 Workbox 的一种预定义策略,也可以创建自己的策略。...客户端缓存支持 客户端在页面首次加载后把资源缓存下来,之后每次加载不进行网络请求直接读取缓存,然后再对比本次请求的版本和线上的版本,若有更新再次缓存以供下次访问,极大的缩短白屏时间。

    1.5K20

    如何在 Vue 项目中缓存字体文件以提高性能

    利用服务工作者(Service WorkerService Worker 是一种可以在后台运行的脚本,可以拦截和缓存网络请求,提供离线支持,并加速资源加载。我们可以使用它来缓存字体文件。...步骤: 安装 WorkboxWorkbox 是 Google 提供的一个工具库,简化了 Service Worker 的创建。...优点:支持离线访问,并且可以更细粒度地控制缓存策略。 缺点:Service Worker 需要 HTTPS 环境并且可能对初学者有一定复杂性。 3....然后运行 font-spider 字体进行优化: font-spider public/index.html font-spider 会扫描 index.html 中使用的所有字符,生成一个精简版的字体文件...每种方法都有其优缺点,具体选择应根据项目的实际情况进行权衡。如果你的应用需要支持离线访问或性能要求较高,推荐使用 Service Worker 或 PWA 进行缓存。

    10810

    如何在Gitlab流水线中部署进行控制

    让我们看一下如何使用受保护的环境来设置生产部署和流水线的访问控制。这个功能目前在Gitlab Silver / Premium版本可用。 在我们的自动化世界中,为什么要手动做一些事情?...但是,对于CI/CD管道,正确的配置手动作业可能是控制部署并满足合规性要求的好方法。让我们看一下如何定义手动作业以服务于两个重要的场景:控制谁可以去部署,设置手动批准作业。...在这种情况下,以上示例CI配置中管道的UI视图将如下所示: 如上面的YAML示例和上图所示,使用受保护的环境和阻止属性定义的手动作业是处理合规性需求以及确保对生产部署进行适当控制的有效工具。...版本控制和持续集成是持续可靠地部署软件的基本工具。GitOps通过使存储库成为运行应用程序所需的所有基础架构的真实来源,将这两种软件最佳实践投入运营。...使用GitOps,基础架构的任何更改都会与应用程序的更改一起提交到git存储库。 这使开发人员和运维人员可以使用熟悉的开发模式和分支策略。合并请求提供了协作和建议更改的场所。

    1.9K41

    如何在CentOS 7上使用Etckeeper进行版本控制管理 etc

    这将允许您在需要或需要时恢复到以前版本的配置文件。 准备 要学习本教程,您需要: 一个具有sudo权限的非root用户的CentOS 7 CVM。...-r--. 1 root root 874 Apr 2 21:42 .gitignore 注意:.git必须在本地系统中受到保护(因此仅限超级用户的读,写和执行权限); 因为版本控制系统不会自己跟踪文件权限...如果某些文件您不想使用版本控制进行跟踪,则可以手动将它们添加到.gitignore文件中。要停止跟踪文件,请先打开.gitignore进行编辑。...etckeeper vcs rm --cached file_to_ignore 您之前添加的文件.gitignore重复上述命令。...结论 在本教程中,我们已经解释了如何使用etckeeper,这是一个很好的工具,可以将您的/etc目录存储在Git存储库中。您还可以使用Bazaar,Mercurial或Darcs存储库。

    1.9K10
    领券