首页 > 其他分享 >关于 Spartacus 开源 Storefront 在 PWA 模式下运行时的 index.html hash mismatch 问题

关于 Spartacus 开源 Storefront 在 PWA 模式下运行时的 index.html hash mismatch 问题

时间:2023-01-19 23:33:58浏览次数:48  
标签:index hash Spartacus baseUrl Storefront html PWA

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.

标签:index,hash,Spartacus,baseUrl,Storefront,html,PWA
From: https://www.cnblogs.com/sap-jerry/p/17062296.html

相关文章

  • vue.js客服系统实时聊天项目开发(六)获取URL中的GET参数(支持/#/?单页锚点hash模式)
    封装一个函数获取URL中的GET参数需要支持锚点链接例如:http://localhost:8080/#/chatApp?ent_id=5具体来说varquery=window.location.search.substring(1);......
  • index.html
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1"/><metana......
  • 调用fragment中的onActivityResult时发生java.lang.IndexOutOfBoundsException问题,请
    调用fragment中的onActivityResult时概率发生java.lang.IndexOutOfBoundsException问题,请问下什么原因?StartScanCodeFragment中代码:overridefunonActivityResult(reques......
  • JDK 1.8 Hashtable的源码分析
       /**   *Hashtable特点:   * 与hashTable一样1.1效率低,线程安全,key不为null hashMap1.2 效率高,key为null长度11    */publicclassHashta......
  • JDK 1.8 HashMap的源码分析
       /**   *HashMap的特点:   *1.AbstractMapMap冗余   *2.与hashTable一样1.1效率低,线程安全,key不为null hashMap1.2 效率高,key为null ......
  • JDK 1.8 hashset的源码分析
        /**   *hashset的特点:无序 唯一需要比较器自定义<>中的内容需要实现comparable的接口推荐外部实现:多态,自定义多种规则   *底层实现逻辑:数......
  • 基于Netty的HashedWheelTimer实现延迟任务
    packagecom.cmcc.open.ota.config;importio.netty.util.HashedWheelTimer;importio.netty.util.Timeout;importio.netty.util.TimerTask;importlombok.extern.s......
  • 关于BindException
    当调用的方法找不到绑定的SQL语句时,将出现错误,例如:org.apache.ibatis.binding.BindingException:Invalidboundstatement(notfound):cn.tedu.csmall.product.mapper.......
  • 善于使用HashSet和Dictionary使系统性能绝大的提升。
    废话不说。直接上代码。 privatestaticHashSet<string>hashSetLocationIds=newHashSet<string>();stringid=string.Format("{0}{1}{2}{3}{4}",1,2,3,4).......
  • hashCode介绍
    hashCode()方法的作用是获取哈希码,也称为散列码,实际上是一个int整数。这个哈希码的作用是确定该对象在哈希表中的索引位置。散列表存储的是键值对(key-value),它的特点是:能......