关于 Spartacus 开源 Storefront 在 PWA 模式下运行时哈希不匹配问题

举报
汪子熙 发表于 2023/02/12 13:32:06 2023/02/12
【摘要】 Spartacus 开源项目提供将 Angular 实现的 电商 Storefront 站点作为 PWA 运行的功能。这提高了用户性能,改善了用户体验,添加了另一个缓存层并减少了服务器端渲染 (SSR) 服务的负载。PWA 的工作方式是,对于应用程序定义的文件列表,它会根据文件的内容生成文件哈希。客户端浏览器根据这个 hash 值来判断文件是否发生了更改。如果发生更改,则浏览器需要重新加载。...

Spartacus 开源项目提供将 Angular 实现的 电商 Storefront 站点作为 PWA 运行的功能。

这提高了用户性能,改善了用户体验,添加了另一个缓存层并减少了服务器端渲染 (SSR) 服务的负载。

PWA 的工作方式是,对于应用程序定义的文件列表,它会根据文件的内容生成文件哈希。客户端浏览器根据这个 hash 值来判断文件是否发生了更改。如果发生更改,则浏览器需要重新加载。

每次重新部署(new deployment) 会导致文件的 hash 发生变化。

在构建 Spartacus 并将其部署到 CCV2 Cloud 时,会发生以下步骤:

  1. 构建应用程序:为必要的文件(包括 index.html)生成哈希
  2. index.html 中的占位符 OCC_BACKEND_BASE_URL_VALUE 替换为当前环境的实际OCC API url
  3. 启动 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.

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。