HarmonyOS鸿蒙Next中pwa应用通过浏览器打开却无法显示pwa的图片，显示一个默认图标，怎么解决

HarmonyOS鸿蒙Next中pwa应用通过浏览器打开却无法显示pwa的图片，显示一个默认图标，怎么解决 cke_214.png

还有为啥，有些应用添加到桌面后，右下角有个闪电的标志啊，这个是咋回事？ 我这个为啥是个浏览器的


更多关于HarmonyOS鸿蒙Next中pwa应用通过浏览器打开却无法显示pwa的图片，显示一个默认图标，怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

尊敬的开发者，您好， 为了尽快解决您的问题，需要您进一步提供如下信息： 1.app.json5和module.json5配置文件中的图标资源引用关系，可提供配置截图或者说明 2.提供下资源目录结构 3.pwa应用图片的格式

更多关于HarmonyOS鸿蒙Next中pwa应用通过浏览器打开却无法显示pwa的图片，显示一个默认图标，怎么解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【背景知识】

  1. 在开发应用时，需要配置应用的一些标签，例如应用的包名、图标等标识特征的属性。
  2. 图标和标签通常一起配置，对应app.json5配置文件和module.json5配置文件中的icon和label。
  3. Image Asset支持生成以下两种类型图标：
    • icon：应用图标（手机或其他设备桌面及设置>应用中出现的应用图标）。
    • startWindowicon：启动页图标。

【解决方案】

  1. 若HAP中包含UIAbility，查看是否在module.json5配置文件的abilities标签中配置了icon。
    • 若对应的ability中skills标签下面的entities中包含"entity.system.home"、actions中包含"ohos.want.action.home"或者"action.system.home"，则系统将优先返回module.json5中的icon。
    • 若存在多个满足条件的ability，优先返回module.json5中mainElement对应的ability配置的icon。
    • 若在module.json5配置文件的abilities标签中未设置icon，或者对应的skills标签下面的entities与actions没有做相关配置，那么系统将使用app.json5中的icon。
  2. 若HAP中不包含UIAbility+，系统将返回app.json5中的icon。
  3. 根据以上情况，检查代码中的icon标签是否引用的是期望的图标资源。

在HarmonyOS Next中，PWA应用通过浏览器打开无法显示自定义图标而显示默认图标，通常是由于PWA的Web App Manifest配置问题或图标资源未被正确识别。请检查manifest.json文件中的icons字段，确保图标路径正确、格式符合规范（如PNG格式），且尺寸满足要求。同时，确认图标文件已正确部署在服务器上，并通过浏览器开发者工具检查网络请求，确保图标资源可正常加载。

根据您的问题，这通常与PWA应用的Web App Manifest配置有关。您遇到的图标问题和“闪电”标志是同一个核心原因导致的。

1. 图标显示为浏览器默认图标

根本原因：HarmonyOS Next的PWA引擎在将应用安装到桌面时，会从网站的 manifest.json 文件中读取图标（icons 数组）配置。如果出现以下情况，系统将无法获取正确图标，从而显示默认的浏览器图标：

  • manifest.json 文件不存在、路径错误或无法访问。
  • manifest.json 中的 icons 数组指定的图标文件路径错误、格式不受支持或尺寸不符合要求。
  • 图标文件未在服务器的响应头中设置正确的 Content-Type（如 image/png）。

解决方案： 请按以下步骤检查和修改您PWA应用的 manifest.json 文件：

  1. 确保 manifest.json 可访问且链接正确： 在HTML的 <head> 部分，必须有正确的链接：

    <link rel="manifest" href="/manifest.json">

    确保通过 https://您的域名/manifest.json 可以正常访问该文件。

  2. 正确配置 icons 数组： 在 manifest.json 中，必须提供多种尺寸的图标（特别是192x192和512x512像素），并确保路径正确。例如：

    {
  "name": "我的PWA应用",
  "short_name": "我的应用",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
    • 关键点：src 路径必须是绝对路径或相对于网站根目录的路径。图标文件必须实际存在且可通过网络访问。
    • 推荐尺寸：至少提供192x192和512x512的PNG图标。

  3. 验证图标文件： 使用浏览器开发者工具（F12）的 “网络”(Network) 选项卡，刷新页面，检查 manifest.json 以及图标文件（如 icon-192x192.png）是否成功加载（状态码为200）。如果失败，说明路径或服务器配置有问题。

  4. 清除数据并重新安装： 修改配置后，在系统的 “设置” > “应用管理” 中找到对应的浏览器或PWA应用，清除其缓存和数据。然后重新通过浏览器菜单“添加到桌面”或“安装应用”来安装PWA。

2. 关于桌面图标右下角的“闪电”标志

这个闪电标志是HarmonyOS Next的一个特性标识，代表该应用是一个 “快应用” 或 “纯Web应用”。

  • 含义：带有闪电图标的PWA应用，其运行方式更接近于一个独立的、轻量化的应用实例。它通常具有更快的启动速度，并且可能在某些场景下（取决于系统实现）与系统集成度更高，例如在任务管理中独立显示。
  • 与不带标志图标的区别：不带闪电标志的PWA应用，其运行容器可能更接近于一个增强型的浏览器标签页，虽然也能独立窗口运行，但底层与浏览器关联可能更紧密。
  • 为什么您的没有：您看到的“浏览器图标”正是因为上述第1点没有满足。当系统无法从 manifest.json 中成功获取有效的图标配置时，就会回退到使用浏览器的默认图标，并且通常也不会为其附加“闪电”标志。这本质上是一个安装不完整或识别失败的状态。

总结： 您遇到的两个现象（浏览器图标、无闪电标志）是同一个问题的两种表现。核心就是 manifest.json 的配置或其中指定的图标资源不可用。请严格按照上述步骤检查并修正您的Web App Manifest配置，确保图标资源可访问。修正后，清除浏览器数据，重新将PWA安装到桌面，即可显示自定义图标和闪电标志。

回到顶部