关于 Spartacus 开源 Storefront 在 PWA 模式下运行时哈希不匹配问题
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.
- 点赞
- 收藏
- 关注作者
评论(0)