关于 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.
相关文章
- 怎么html文字下划线,HTML怎么设置下划线?html文字加下划线方法
- 开源Fast R-CNN代码实现物体识别[通俗易懂]
- html里面超链接alt_怎样用HTML代码在图片插入超链接[通俗易懂]
- html中如何写系统时间,在HTML页面获取当前系统时间
- 跨境电商erp源码java大卖先生_erp 开源
- html表格空格符是什么,HTML中的空格符号是什么
- 怎么修改HTML网页的名字_如何修改html文件内容
- 推荐一个超级好看的开源的后台管理框架
- 27.8k stars的开源数据库连接工具DBeaver
- 征集Harbor开源项目参考用户
- etlpy: 并行爬虫和数据清洗工具(开源)详解大数据
- Linux Tap:让你探索开源的精彩世界(linuxtap是什么)
- Linux开发HTML网站:一个简单的指南(linux开发html)
- 开放式Oracle数据库:构建你的未来(开源oracle库)
- 让Linux灵活运行HTML:简单有效的方法(linux运行html)
- :Linux的分支:开源快乐之旅(linux的分支)
- Linux的分支:走向开源的应用之路(linux的分支)
- 为什么架构于开源之上?
- 法国政府正考虑采用开源软件
- Sweet Home 3D:一个帮助你寻找梦想家庭的开源工具
- 使用HTML实现MySQL资料读取(html读取mysql)
- 互联网巨头奉献的十大开源安全工具
- HTML 操作 Oracle 数据库的实现(html调用oracle)
- HTML与Oracle开启精彩的互联网之旅(html和oracle)
- Redis 简介了解开源内存数据库的有趣之处(什么是redis讲解)
- Java中使用开源库JSoup解析HTML文件实例