如何替换SAP Spartacus桌面图标？技术求助

可能的操作失误点 #

• 缓存未清理：浏览器或PWA的Service Worker缓存了旧图标资源，导致新图标无法加载
• 图标尺寸不匹配：自定义图标尺寸和manifest里声明的sizes不一致，浏览器自动 fallback 到旧图标
• 文件替换不完整：只替换了部分尺寸的图标，剩余尺寸仍为默认文件
• manifest未正确打包：修改后的manifest文件没在构建时被纳入生产包，网站仍使用旧配置
• 路径/文件名错误：自定义图标文件名或存放路径和manifest里的src配置不对应

正确替换步骤 #

1. 准备对应尺寸的自定义图标
   按照manifest里的要求，生成72x72、96x96、128x128、144x144这几个尺寸的PNG图标，要么和原图标同名（直接覆盖），要么记好新文件名后续修改manifest配置。

2. 替换图标文件
   将所有尺寸的自定义图标放到..\js-storefront\mymobilestore\src\assets\icons目录，直接覆盖原默认图标文件。

3. 核对manifest配置
   打开..\js-storefront\mymobilestore\src\manifest.webmanifest，确保icons数组里每个对象的src、sizes、type都和自定义图标对应，示例配置如下：

   "icons": [
     {
       "src": "assets/icons/icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
       "src": "assets/icons/icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
       "src": "assets/icons/icon-128x128.png",
       "sizes": "128x128",
       "type": "image/png",
       "purpose": "maskable any"
     },
     {
       "src": "assets/icons/icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "purpose": "maskable any"
     }
   ]
   

4. 清理缓存并重新构建

   • 执行项目构建命令，比如ng build --prod，确保修改后的manifest和新图标都被打包到生产环境
   • 打开浏览器开发者工具（F12），切换到Application标签，找到Service Worker点击Unregister，再清除Storage下的所有缓存数据
   • 关闭浏览器后重新打开网站，触发PWA安装提示，查看图标是否更新

5. 验证最终效果
   将应用安装到设备后，检查桌面或应用列表里的图标，确认自定义图标正常显示。

内容的提问来源于stack exchange，提问作者Stephen