文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Workbox / create-react-app PWAs何时更新为新的静态资源？

Workbox和create-react-app是两个与PWA（Progressive Web App）开发相关的工具。

Workbox是由Google开发的一个用于创建可靠且高效的离线优先的Web应用程序的库。它提供了一套用于缓存管理、请求路由和运行时缓存策略的API，可以帮助开发者更轻松地构建离线可访问的Web应用程序。

create-react-app是一个由Facebook开发的用于快速创建React应用程序的脚手架工具。它提供了一个预配置的开发环境，使开发者可以更专注于编写应用程序的业务逻辑而不必担心配置和构建过程。

在PWA开发中，静态资源（如HTML、CSS、JavaScript文件）通常会被缓存以实现离线访问和更快的加载速度。当这些静态资源发生变化时，需要更新PWA的缓存，以确保用户获取到最新的版本。

在create-react-app中，当你运行npm run build命令来构建生产版本的应用程序时，create-react-app会自动为生成的静态资源文件添加一个唯一的哈希值。这个哈希值会随着每次构建而改变，因此当你部署新版本的应用程序时，浏览器会自动下载并缓存新的静态资源。

而Workbox可以通过使用workbox-webpack-plugin插件来与create-react-app集成，该插件可以帮助你在构建过程中生成带有唯一哈希值的静态资源，并自动更新PWA的缓存。

因此，当你使用create-react-app和Workbox构建PWA时，静态资源会在每次构建时更新为新的版本，并通过唯一的哈希值来标识。这样可以确保用户在访问PWA时获取到最新的静态资源，提供更好的用户体验。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）。腾讯云CDN是一种分布式部署在全球各地的加速服务，可以帮助提高静态资源的加载速度，减少用户访问延迟。您可以通过腾讯云CDN来加速PWA的静态资源分发，提供更好的用户体验。

腾讯云CDN产品介绍链接地址：https://cloud.tencent.com/product/cdn

相关搜索:php后台登陆统计php舞曲网站源码php 写入口文件php过滤 ctfphp 标签不闭合php文档在线预览php cbc模式php语句 转向php数据批量更新php开发系统实例
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

前端遇上Go: 静态资源增量更新的新实践

大家知道，前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载。如果网络环境恶劣，那么我们的静态资源尺寸越大，用户下载失败的概率就越高。...作为一个发版频繁的业务，要降低发版的影响，可以做两方面优化： 更高效地使用缓存，减少静态资源的重复下载。 使用增量更新，降低单次发版时下发的内容尺寸。...看过我们《美团金融扫码付静态资源加载优化实践》的朋友，应该知道我们其实之前已有实践，在当时仅仅靠增量更新，日均节省流量达30多GB。而现在这个数字已经随着业务量变得更高了。...因此这一次从系统的架构设计上，就优先考虑了如何面对突发的海量流量。 首先我们来聊聊为什么我们会有突发流量。 对于前端来说，网页每次更新发版，其实就是发布了新的静态资源，和与之对应的 HTML 文件。...而对于增量更新服务来说，新的静态资源也就意味着需要进行新的计算。 有经验的前端同学可能会说，虽然新版上线会创造新的计算，但只要前面放一层 CDN ，缓存住计算结果，就可以轻松缓解压力了不是吗？

1K20

Hexo添加PWA支持

推荐阅读：https://lavas.baidu.com/pwa/README 可以了解一下什么是PWA 开始操作 注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件 注意：你的博客必须全站为...HTTPS，这是使用PWA的基础条件 注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件 重要的事情说三遍！...应遵循如下规则： 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹； scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；...如果你的地址栏没有出现这个加号，首先在新的标签页上的地址栏输入Chrome://flags，然后再搜索栏输入PWAS进行查找，会出现两个选项一个为Desktop PWAs local updating，...另一个为Desktop PWAs installable from the omnibox，将其设为Enabled，然后点击Relaunch，进行浏览器的重启，再查看localhost:4000，就会出现加号了

1.2K10

    • Workbox-webpack-plugin 使用指南与实践

    简介Workbox-webpack-plugin 是 Google 开发的用于渐进式 Web 应用（PWA）的插件，通过缓存静态资源及优化加载速度来提升用户体验。...{handler: 'NetworkFirst',}StaleWhileRevalidate：快速返回缓存中的资源，同时在后台进行网络请求更新缓存。适合资源更新频率较高的场景。...进阶配置6.1 缓存资源版本控制Workbox 通过为缓存的资源生成唯一的 hash 值来控制缓存的更新，每当资源内容变化时，Workbox 会生成新的缓存并更新 Service Worker。...完整项目示例以下是一个完整的 Webpack 项目示例，结合 GenerateSW 模式配置静态资源预缓存和运行时缓存：const { GenerateSW } = require('workbox-webpack-plugin...通过它，我们可以轻松实现静态资源的预缓存、运行时缓存、自动缓存更新等功能，从而提升应用的离线能力和加载性能。

    10510

    Workbox5+Webpack4构建离线应用

    离线缓存优化 将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！...适用于缓存一些全局的数据，对于静态资源很少用它。...) 更多配置下信息请参考官方文配置文档 预缓存功能 预缓存功能可以在service worker安装前将一些静态文件提前缓存下来，这样就能保证service worker安装后可以直接存缓存中获取这些静态资源...： NetworkFirst：网络优先 CacheFirst：缓存优先 NetworkOnly：仅使用正常的网络请求 CacheOnly：仅使用缓存中的资源 StaleWhileRevalidate：从缓存中读取资源的同时发送网络请求更新本地缓存...如果正常引入，我们可以在控制台中看到下图： 总结 service worker实现缓存有非侵入、持久化、缓存内容可控等优点 Workbox可以理解为service worker的库，利用它可以快速进行

    1.2K10

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

    这里就不详细介绍他们的区别了，这里说下通过localStorage来缓存静态资源的优化方案。 localStorage通常有5MB的存储空间，我们以微信文章页为例。...activated 如果是第一次加载sw，在安装后，会直接进入activated阶段，而如果sw进行更新，情况就会显得复杂一些。流程如下： 首先老的sw为A，新的sw版本为B。...举个栗子 我们可以以网易新闻的wap页为例,其针对不怎么变化的静态资源开启了sw缓存，具体的sw.js逻辑和解读如下： 'use strict'; //需要缓存的资源列表 var precacheConfig...当资源内容和sw.js更新后，workbox会去比对资源，然后将新的资源存入cache，并修改indexedDB中的版本信息。...且文件都要以版本文件名的方式，来确保修改后cache和indexDB会得到更新。 理解了原理和实践后，说明这种方式适合于上线后就不会经常变动的静态资源。

    2.3K50

    2018年WEB发展趋势预测

    在出现了如此振奋人心的案例之后，全世界都期待着2018年成为PWAs爆发的一年， 尽管这个技术还相当新，但是其前景是十分光明的。...无论销售的是电子产品、毛绒玩具还是软件服务，几乎在所有提供客服的网站都使用到了客服聊天机器人。聊天界面改变了商家和消费者的沟通方式，聊天机器人可以使得商家和客户在任何时间、任意场合进行沟通交流。...整个的工作流程看起来相当简单： 用户访问一个网页并且开启了消息推送，当这个网站有任何更新（比如说是又一篇新的推文或者私信）时这个用户就会收到消息，哪怕他关闭了这个网页。...它可以完美地支持拥有复杂功能的动态网页。Laravel为复杂任务提供了成熟的解决方案。众多插件和包使得开发过程变得更加快速和稳定，不断的日常更新确保框架可以满足开发者现存的开发需求。...紧跟甚至引领web开发的发展趋势意味着吸引更更多的新客户，让现有客户满意甚至拉回更多的回头客。

    1.3K70

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

    我们常用的字体文件格式是TTF（TrueType Font），由苹果和微软为 PostScript 而开发的字体格式，它被开发时就没有考虑为web使用，所以它们没有经过压缩，体积往往较大。...-- MDN SW（以下Service Worker都简称SW）是一个比较新的API，它主要是用来解决离线情况下，使用本地缓存的资源来加载web程序。...} from 'workbox-cacheable-response' // ... // 图片字体等静态资源缓存 registerRoute( /.+\.(?...它非常适合用来缓存一些可变的资源，比如CSS和JS，你可以享受到缓存的速度，即使远端资源更新之后，客户端也只需要刷新下页面就能更新缓存，不用担心读到旧缓存。...} from 'workbox-expiration' // 图片字体等静态资源缓存 registerRoute( /.+\.(?

    1.6K41

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

    manifest 缓存 已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。...所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。...他们旨在（除开其他方面）创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。...如果是第一次加载sw，在安装后，会直接进入activated阶段，而如果sw进行更新，情况就会显得复杂一些。流程如下： 首先老的sw为A，新的sw版本为B。...cacheOnly 这个策略也比较直接，直接使用 Cache 缓存的结果，并将结果返回给客户端，这种策略比较适合一上线就不会变的静态资源请求。

    1.5K20

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

    Workbox didn't load ?`); } 更改完成后，回到浏览器，此时刷新浏览器没有任何变化，这里需要提醒一点，更改完 service worker 注册文件需要终止重启或者更新。...而针对不同的资源，正是通过资源请求地址来实现的，这便是基于路由，示例如下 workbox.routing.registerRoute( /\.js$/, … ); 以上代码我们定义了一个路由缓存策略...，即：所有后缀为 .js 的请求都会进入该策略进行处理，那，我们需要做什么处理呢？...就会有针对匹配该路由的资源定义不同的关于缓存的策略，比如，我们要求指定资源 网络请求优先 workbox.routing.registerRoute( /\.js$/, new workbox.strategies.NetworkFirst...当请求的路由有对应的 Cache 缓存结果就直接返回，在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存，如果本来就没有 Cache 缓存的话，直接就发起网络请求并返回结果

    99020

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

    ；其次，标准的设计向下兼容，并且侵入性小，开发者使用新特性代价很小，只需要在原有站点上新增，让站点的用户体验渐进式的增强。...除了正常的静态资源以外，Twitter 把首页也缓存了下来。...（用于新的 HTML 页面），当它状态码为 200 时，该策略将缓存的页面存储在一个名为 pages 的缓存中。...由于实际静态资源是挂载在 CDN 上面，需要修改预渲染资源的前缀。...，之后每次加载不进行网络请求直接读取缓存，然后再对比本次请求的版本和线上的版本，若有更新再次缓存以供下次访问，极大的缩短白屏时间。

    2.7K121

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

    WebP 最初在2010年由 Google 发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。WebP 有静态与动态两种模式。...；其次，标准的设计向下兼容，并且侵入性小，开发者使用新特性代价很小，只需要在原有站点上新增，让站点的用户体验渐进式的增强。...Workbox 是一组库，可以帮助开发者编写 Service Worker，通过 CacheStorage API 缓存资源。...（用于新的 HTML 页面），当它状态码为 200 时，该策略将缓存的页面存储在一个名为 pages 的缓存中。...客户端缓存支持 客户端在页面首次加载后把资源缓存下来，之后每次加载不进行网络请求直接读取缓存，然后再对比本次请求的版本和线上的版本，若有更新再次缓存以供下次访问，极大的缩短白屏时间。

    1.5K20

    为 vue 项目添加 PWA 支持

    ，选择“添加到主屏幕” PC 与 Android 的 Chrome 可通过右上角菜单添加（此处以 m.weibo.cn 为例） PC Android Service Worker 的更新 这是开发...SW 在接管页面，新的 SW 仍旧是 waiting 状态 想要实现在不结束 session 的情况下更新 SW，必须使用 skipWaiting，目前有两种常见的处理方法 注：以下方法中提到的registerServiceWorker.js...，例如弹出一个对话框来提示用户点击某个按钮以刷新页面 该方法对仅 precache 应用是没有任何影响的 但由于 skipWaiting 后新 SW 会立即接管页面，因此如果你更新了 SW 在处理 runtimeCaching...引用的是 Workbox 3 的缘故…… 对于这个问题有两种可能的解决方法： 将workboxPluginMode设置为InjectManifest，然后自己指定一个 SW 里面加上该代码内容 从谷歌那里下载最新的...Workbox 放置在项目内，并配置workboxOptions中的importWorkboxFrom为disable，然后在importScripts中指定本地workbox-sw.js的路径 接着在

    3.6K00

    在 React应用中实现Web推送通知

    默认情况下，Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker，并且任何以前安装的sw都将被虚拟人替换。...“重新加载时更新”选项或等效选项的情况下打开DevTools，然后重新加载页面。...如果您还没有准备好主动地投入到CRA上下文中的Workbox配置研究中，我认为此软件包是最方便的方法。...首先，添加一个新的depenendecy： yarn add cra-append-sw 之后，我们需要在package.json中扩展build-script，在其中添加一个新命令，该命令在main进程之后执行...如果您想使用户烦恼很多次，请首先显示带有订阅要约的自定义对话框。并且只有在用户同意的情况下，才显示真实的。

    3.1K30

    Service Worker 实现 web 应用消息推送

    则是为解决“Web App 的用户体验不如 Native App”的普遍问题而提供的一系列技术集合，必然部分处理逻辑会牵扯到 UI 线程，从而在启动 service worker 的时候，UI 线程的繁忙也会影响其启动性能...有实际意义的离线，一般不是指断开网络能访问，而是指在用户想访问之前，能提前把资源加载回来。离线并不是一直都断开网络，而是在网络连接良好的情况下，能把需要的资源都加载回来。...一些比较糟糕的做法是在 WIFI 网络下把整个 App 客户端的资源都拉下来，这样其实很多资源是用户不需要的，浪费了用户的网络和存储。...管理资源缓存 浏览器提供了很多存储相关的 H5 API，比如 application cache、localStorage，但都不是非常好用，主要是给予页端的控制权太少，限制太多，页端不能完全控制每一个资源请求的存储逻辑...WebViewClient 的标准的 shouldInterceptRequest 接口是拦截不了 service worker 的请求了，但 Chrome 49.0 提供了新的 ServiceWorkerController

    2.3K20

    React 16 - 基础

    单向数据绑定 创建步骤 创建静态 UI 考虑组件的状态组成 状态来自外部还是要在内部维护 考虑组件的交互方式 内部进行的交互操作的结果如何暴露给外部使用 受控组件：表单元素状态由使用者维护 ; 表达式作为子元素 const element = {props.firstName} JSX 优点 直观：声明式创建界面 灵活：代码动态创建界面 无需学习新的模板语言...componentWillUnmount 组件移除时被调用 典型场景：资源释放 getSnapshotBeforeUpdate 在页面 render 之前调用，state 已更新 典型场景：获取...render 之前的 DOM 状态 componentDidUpdate 每次 UI 更新时被调用 典型场景：页面需要根据 props 变化重新获取数据 shouldComponentUpdate...组件设计模式 高阶组件 HOC 高阶组件接受组件作为参数，返回新的组件。

    40730

    WorkBox 之底层逻辑Service Worker

    前言 在前几天师夷长技以制夷:跟着PS学前端技术文件中，我们提到了WorkBox，然后自己也对这块很感兴趣，所以就利用业余时间进行相关资源的查询学习和实践。...更新的方式 了解浏览器何时更新service worker很重要，但“如何”也很重要。...安装(Installation) 当使用打包工具生成「静态资源」时，这些资源的「名称中会包含哈希值」，例如framework.3defa9d2.js。...假设其中一些资源被预缓存以供以后离线访问，这将需要对service worker进行更新以预缓存新的资源： self.addEventListener("install", (event) => {...事件示例有两个方面不同： 创建了一个具有 key 为前端柒八九_v2的「新 Cache 实例」。

    38120
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券