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

配置CRA生成的app,不从CDN下载Workbox,而是从本地下载

Workbox是一种用于创建离线应用和渐进式Web应用的JavaScript库,它提供了一套工具和库,帮助开发人员将离线功能和缓存策略添加到他们的应用程序中。Workbox提供了一个快速简单的方法来管理网页资源的缓存和访问。在默认的Create React App(CRA)中,Workbox通常会从CDN(内容分发网络)下载。

如果您希望从本地下载Workbox,而不是从CDN下载,您可以按照以下步骤进行配置:

  1. 创建一个本地目录用于存储Workbox文件。
  2. 从Workbox的GitHub仓库下载所需的版本。您可以从https://github.com/GoogleChrome/workbox/releases 下载最新的发布版本。选择适合您项目的版本,点击下载ZIP文件。
  3. 解压ZIP文件并将其中的workbox-*文件夹复制到您的项目的本地目录中。
  4. 打开CRA生成的项目的src目录,然后找到serviceWorker.js文件。
  5. serviceWorker.js文件中,找到以下代码行:
  6. serviceWorker.js文件中,找到以下代码行:
  7. 将其替换为以下代码行:
  8. 将其替换为以下代码行:
  9. <path_to_local_workbox>替换为您的项目中存储Workbox文件的本地路径。workbox-vX.X.X是您下载的Workbox版本文件夹的名称,例如workbox-v5.1.3
  10. serviceWorker.js文件中,找到以下代码行:
  11. serviceWorker.js文件中,找到以下代码行:
  12. 将其替换为以下代码行:
  13. 将其替换为以下代码行:
  14. 保存文件并重新运行您的应用程序。

现在,您的应用程序将从本地下载Workbox而不是从CDN下载。请确保您在将Workbox文件夹复制到项目中的本地目录时选择了适当的版本,以便与您的应用程序兼容。

这里没有提及腾讯云相关产品,因此无法为您提供腾讯云的相关产品和产品介绍链接地址。如果您对腾讯云的产品感兴趣,可以访问腾讯云的官方网站(https://cloud.tencent.com)了解他们提供的云计算服务和产品。

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

相关·内容

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

    默认情况下,Create-react-app CRA工作方式是在开发人员模式下不存在ServiceWorker,并且任何以前安装sw都将被虚拟人替换。...默认情况下,在http:// localhost:3000 / service-worker.js上将动态生成虚拟文件提供给dev-mode 。...额外步骤:等等,生产模式如何? 在这种情况下,Create React App会编译build文件夹中文件,并在其中放置一个默认服务工作程序,其中包含对现代应用程序有用东西。...如果我们决定保留它们并只添加我们推送功能,则需要对构建过程进行一些修改。CRA中有用于服务人员构建工作箱。而且,即使您目的只是添加一些自定义代码,也没有内置方法可以对其进行修改。...如果您还没有准备好主动地投入到CRA上下文中Workbox配置研究中,我认为此软件包是最方便方法。

    3.1K30

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

    PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA...PWA 本身强调渐进式(Progressive),可以两个角度来理解渐进式,首先,PWA 还在不断进化,Service Worker、Web App Manifest、Device API 等标准每年都会有不小进步...workbox-config.js: npx workbox wizard 根据配置生成 Service Worker 程序: npx workbox generateSW workbox-config.js...由于实际静态资源是挂载在 CDN 上面,需要修改预渲染资源前缀。...附录 C 客户端离线包支持 为了解决客户端缓存滞后问题,离线包方式是一种提前下载页面资源方式。缺点是占用用户更多流量,优点是能够实现真正意义上页面“秒开”。

    2.7K121

    【前端部署第六篇】使用 docker 部署单页应用,并通过对象存储服务将静态资源上传至 OSSCDN

    PUBLIC_PATH 与 webpack 处理 假设将带有 hash 值静态资源推至 CDN 中,此时静态资源地址为: https://cdn.shanyue.tech。...module.exports = { output: { publicPath: 'https://cdn.shanyue.tech' } } 在 create-react-app 中...publicPath: paths.publicUrlOrPath, }, } 可知「在 cra 中通过设置环境变量 PUBLIC_URL 即可配置 CDN 地址」。...但是,你也可以配置 CNAME 记录并使用自己域名。 在以下命令行及代码示例中,我们将 cra-deploy 项目的静态资源全部上传至 shanyue-cra 该 Bucket 中。 3....小结 通过本篇文章,我们已将静态资源部署至 CDN(近乎等同于 CDN),与大部分公司生产环境一致。

    2.4K30

    Service Worker 实现 web 应用消息推送

    有实际意义离线,一般不是指断开网络能访问,而是指在用户想访问之前,能提前把资源加载回来。离线并不是一直都断开网络,而是在网络连接良好情况下,能把需要资源都加载回来。... API 使用规范来看,消息推送与通知弹窗关联比较密切,基本上使用业务场景仅限制在消息通知范围。 1.3....文档:https://developers.google.com/web/tools/workbox/ 以下为 vue-cli3 pwa 部分配置文件,详细关注 workboxPluginMode...和 workboxOptions 配置 文档:https://developers.google.com workboxPluginMode 有两个选项: GenerateSW 会生成默认 service...worke 文件并且注入相应配置到 webpack pipline, 适合简单配置需求 InjectManifest插件将生成一个预先缓存URL列表,并将该预先缓存清单添加到现有的服务工作文件中,

    2.3K20

    【前端部署第五篇】使用 docker 部署单页应用,挂载 nginx 配置文件并对其进行系列优化

    那为什么带有 hash 资源可设置长期缓存呢: **资源内容发生变更,他将会生成全新 hash 值,即全新资源路径。**而旧有资源将不会进行访问。...: no-cache,「避免浏览器默认为强缓存」 nginx.conf 文件需要维护在项目当中,经过路由问题解决与缓存配置外,最终配置如下: 该 nginx 配置位于 cra-deploy/nginx.conf3...构建资源优化: 使用 terser 压缩 Javascript 资源 使用 cssnano 压缩 CSS 资源 使用 sharp/CDN 压缩 Image 资源或转化为 Webp 使用 webpack...,减少浏览器端 OSCP 查询(可验证证书合法性) TLS v1.3,TLS 握手时间 2RTT 优化到了 1RTT,并可 0-RTT Resumption HSTS,无需301跳转,直接使用 HTTPS...此时,关于如何将前端在 Docker 中进行部署篇章已经结束,而在工作实践中,往往会将静态资源置于 CDN 中。

    2K40

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

    当然复杂分包策略和异步加载代码,我们现在基本不用担心,项目一般都是通过webpack配置好即可。 说完异步加载,我们再来说说按需引入。...但是我们自己服务器各方面来说,都不适合去承载大量资源请求。所以这个时候就需要用到CDN(Content delivery network)。...--维基百科 简单理解就是把你需要加载资源不是放在你自己服务器上,而是放在一个托管服务器上,这个托管服务器有着更好性能,更稳定服务,可以为用户提供更快访达。...SWAPI并不简单,0开始去规划一个项目的本地资源缓存SW代码是一个相当大工程,好在Google已经有完善解决方案,那就是workbox,它提供了很多工具来帮助我们对请求资源进行管理和缓存。...所以 workbox-cacheable-response中导入一个插件,他可以帮我们过滤相应状态码。

    1.6K41

    使用Edge turbo下载CNCB数据

    _f1.fq.gz edgeturbo dl /gsa/CRA007099/CRR511439/CRR511439_f1.fq.gz 下载数据会保存在家目录下download目录下 PS: 我在自己服务器测试了一下...大家也可以复制粘贴上面的命令去试试看: 如果想要更换下载目录可以使用这个命令。 [Llocal_path]参数用于指定本地下载目录,如果不指定,则使用当前配置下载目录。...以下载到本地/home/data 为例: edgeturbo dl /gsa/CRA007099/CRR511439/CRR511439_f1.fq.gz L/home/data 文件下载后,将自动进入下面的页面...,任务 ID 之间以空格隔开; 注 3:删除正在进行中任务,任务将停止并清除所有缓存临时文件; 查看任务状态 edgeturbo ps 或者edgeturbo 设置本地下载目录 在进行下载时,客户端默认将下载文件保存在.../gsa/CRA007099/CRR511439/CRR511439_r2.fq.gz 所以我们构建(edgeturbo download )下载命令是: edgeturbo download /

    2.7K20

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

    5....PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA...PWA 本身强调渐进式(Progressive),可以两个角度来理解渐进式,首先,PWA 还在不断进化,Service Worker、Web App Manifest、Device API 等标准每年都会有不小进步...客户端离线包支持 为了解决客户端缓存滞后问题,离线包方式是一种提前下载页面资源方式。缺点是占用用户更多流量,优点是能够实现真正意义上页面“秒开”。 [点击查看大图] 4....而通过在 CI/CD 阶段,将传统 SSR 流程执行一遍,用动态生成 index.html 覆盖原来“空”index.html,即优化了首屏耗时体验,省去了骨架屏步骤,也提升了加载速度。

    1.5K20

    使用 GitLab CI 在云开发上部署React应用

    云开发静态托管是云开发提供静态网站托管能力,静态资源(HTML、CSS、JavaScript、字体等)分发由腾讯云对象存储 COS 和拥有多个边缘网点腾讯云 CDN 提供支持。...本文使用create-react-app创建了一个React应用,借助Gitlab CI向大家讲述将项目部署到云开发静态网站托管过程。...创建web应用 在本地环境通过create-react-app创建了一个名为test-cra项目: yarn create react-app test-cra 设置git相关设置,并上传应用到GitLab...EnvIdvalue为环境ID 创建.gitlab-ci.yml配置文件 在本地工程test-cra根目录中创建.gitlab-ci.yml文件 .gitlab-ci.yml配置文件如下,这里可查看更多...整个CI流程有2个stage 构建阶段(build):生成构建产物,并把构建产物进行存档(artifacts操作) 部署阶段(deploy): 需要使用腾讯云提供cli工具(@cloudbase/cli

    2K10

    打通GitLab CICD到腾讯云静态网站托管

    云开发静态托管是云开发提供静态网站托管能力,静态资源(HTML、CSS、JavaScript、字体等)分发由腾讯云对象存储 COS 和拥有多个边缘网点腾讯云 CDN 提供支持 本文使用了create-react-app...,点击Create Project 15865860008180.jpg 创建web应用 在本地环境通过create-react-app创建了一个名为test-cra项目 yarn create react-app...EnvIdvalue为环境ID 15865878646997.jpg 创建.gitlab-ci.yml配置文件 在本地工程test-cra根目录中创建.gitlab-ci.yml文件 15865880299801....jpg .gitlab-ci.yml配置文件如下,这里可查看更多gitlab ci 配置 image: node:12.16.2 stages: - build - deploy build...整个CI流程有2个stage 构建阶段(build):生成构建产物,并把构建产物进行存档(artifacts操作) 部署阶段(deploy): 需要使用腾讯云提供cli工具(@cloudbase/cli

    4.2K1611

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

    Etag是由服务端特定算法生成该文件唯一标识,而请求头把返回Etag值通过If-None-Match再带给服务端,服务端通过比对从而决定是否响应新内容。这也是304缓存。...workbox加载失败'); } 然后需要在使用其他api前,提前使用配置 //关闭控制台中输出 workbox.setConfig({ debug: false }); 也可以统一指定存储时cache...工作原理 首次加载Web应用程序时,workbox下载指定资源,并存储具体内容和相关修订信息在indexedDB中。...即使我们把main.css服务器上删除,也不会对页面造成影响。 所以这种方式缓存都需要配置一个版本号。在修改sw.js时,对应版本也需要变更。...使用实践 当然了,一般我们一些不经常变资源,都会使用cdn,所以这里自然就需要支持域外资源了,配置方式如下: var fileList = [ { url:'https://

    2.3K50

    为 vue 项目添加 PWA 支持

    支持 运行时缓存runtimeCaching,Workbox 强大所在,阅读这些内容会使你更好地了解如何配置以及具体能做什么: Workbox Routing Workbox Strategies...配置manifest.json 位于public/manifest.json,安装插件时自动生成,参考 Web App Manifest 进行配置 引导用户添加 PWA 应用 在应用中可以自行通过提示等方式引导用户手动添加...就会 skipWaiting 但实际情况是,最终生成 SW 中并没有这一段代码(也并没有放置在其他 js 中),我猜测这可能是因为加入代码这一特性是 Workbox 4 才加入,而插件生成 SW...引用Workbox 3 缘故…… 对于这个问题有两种可能解决方法: 将workboxPluginMode设置为InjectManifest,然后自己指定一个 SW 里面加上该代码内容 谷歌那里下载最新...Workbox 放置在项目内,并配置workboxOptions中importWorkboxFrom为disable,然后在importScripts中指定本地workbox-sw.js路径 接着在

    3.7K00

    创建 React 应用 7 种方式,你用过几种?

    一:Create-React-App 首先,我们第一个是想到是 react 官方团队提供脚手架工具 Create React App(cra) npx create-react-app my-app...因此社区中提供了一些可配置 cra 方案,craco、react-app-rewired craco 可配置 cra 这里以 craco 为例,首先需要安装 @craco/craco yarn add...: ✅ 页面渲染性能优秀 ✅ 对 SEO 友好 ✅ 对打包文件进行了优化 ✅ 轻松部署到 CDN(基于出色扩展功能) ✅ 丰富插件系统 Gatsby 劣势: ⛔️ 使用起来相较于 CRA 更为复杂...ISR – 增量静态再生,可以再次 API 获取数据,并且生成静态页面,最适合常见资讯类、新闻类网站。...例如,在 umijs 中,/src/pages 目录下文件会自动生成路由,无需手动配置。 提供了按需加载、代码拆分等优化方案,可以提升应用加载速度和运行效率。

    7.1K10

    Butterfly主题PWA实现方案

    下载需要收费,但是可以截图生成图标包及manifest 因为我们最终目的是要制作一个全平台WEB APP,所以对于图标的大小、类型适配显得格外重要。...设置图片相对于 source 目录存放路径 ? 设置 Web App 名称 ? 生成 README.md ? 选择生成 ? 下载资源包 ?...使用workbox:这个插件需要配合gulp插件,所以配置较为繁琐,好处是可以自定义适配弹窗提示,适合对前端有一定了解用户。如果你还有使用pjax,恭喜你,BUG御三家马上就可以集齐了。 ?...修改站点配置文件[Blogroot]/_config.yml,在站点配置文件_config.yml中增加以下内容: 将之前生成图标包移入相应目录,例如我是/img/siteicon/,所以放到[Blogroot...这会导致PWA无法加载索引文件,也就是说无法PWA加载index.html,最终影响离线观看博客体验。 安装必要插件 既然要使用gulp配合workbox实现PWA,自然少不了安装这两个插件。

    1.6K20
    领券