关于 Spartacus 开源 Storefront 在 PWA 模式下运行时的 index.html hash mismatch 问题
Spartacus 开源项目提供将 Angular 实现的 电商 Storefront 站点作为 PWA 运行的功能。
这提高了用户性能,改善了用户体验,添加了另一个缓存层并减少了服务器端渲染 (SSR) 服务的负载。
PWA 的工作方式是,对于应用程序定义的文件列表,它会根据文件的内容生成文件哈希。客户端浏览器根据这个 hash 值来判断文件是否发生了更改。如果发生更改,则浏览器需要重新加载。
每次重新部署(new deployment) 会导致文件的 hash 发生变化。
在构建 Spartacus 并将其部署到 CCV2 Cloud 时,会发生以下步骤:
- 构建应用程序:为必要的文件(包括 index.html)生成哈希
- 将
index.html
中的占位符OCC_BACKEND_BASE_URL_VALUE
替换为当前环境的实际OCC API url - 启动 Storefront Service
由于 index.html
在 CCV2 生成哈希值后
才得到调整,PWA 由于哈希不匹配而无法正常工作,这被视为潜在的安全问题。
从缓存资源列表中删除 index.html
的方法并不能看成一个完善的解决方案。
因为那样的话,每次 full page 重新加载都会进入 SSR,这样的话使用 PWA 意义就不大了。
如果部署 Spartacus 到 CCV2,之后访问 Storefront 遇到 502 bad gateway 错误的话:
ct() failed (111: Connection refused) while connecting to upstream, client: 10.244.2.13, server: ~^.spartacus-app.$, request: “GET /app-fr/fr/EUR/ HTTP/1.1”, upstream: “http://127.0.0.1:4200/app-fr/fr/EUR/”, host: “something.model-t.cc.commerce.ondemand.com”
一个可能的错误就是,在 Spartacus 代码里:忘记将代码里的 occ baseUrl 的配置注释了:
backend: {
occ: {
baseUrl: 'https://localhost:9002', ---> you can comment it out by applying //
}
},
这是因为 OCC_BACKEND_BASE_URL_VALUE
在幕后被 CCv2 自动
替换,CCv2 将其替换为客户要部署到的环境的 api,因此,无需在 Spartacus 中设置静态 occ baseUrl - 后者仅仅是在本地开发时才需要设置。
换言之,app.module.ts 中 provideConfig() 的 backend.occ.baseUrl 的值优先于 meta 标签的值,所以如果希望 base URL 由 meta 标签动态驱动,不要定义 provideConfig() 中的 baseUrl.
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023