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 的配置注释了：

```typescript
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.

ITPub博客

关于 Spartacus 在 PWA 模式下运行时的 index.html hash 不匹配的问题

最新文章