关于 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.
相关文章
- 基于.NET的开源搜索引擎-DotLucene(2)
- 使用开源库 SVPullToRefresh 实现上拉加载下拉刷新
- 根据标准word模板生成word文档类库(开源)
- 【云栖大会】再谈开源大数据
- Opencv学习笔记 - ArUco,一个开源的微型的现实增强库
- H7-TOOL脱机烧录器功能开源发布
- 推荐一个markdown格式转html格式的开源JavaScript库
- 人人开源框架 - 支持LocalDateTime
- Github上如何找到自己想要的开源项目(小技巧:精确搜索)
- 十一长假我肝了这本超硬核PDF,现决定开源!!
- 黑客篡改开源项目制作恶意软件,多家外贸企业中招——傀儡进程,powershell无文件攻击