1

我已将 PWA 添加到我现有的 Angular 应用程序中，之后浏览器允许使用提到的应用程序图标、名称、描述等将我的应用程序添加到主屏幕。问题是在将应用程序添加到主屏幕时，它允许用户更改应用程序我想限制的名称，因为 Myntra 和其他产品正在做。我附上了我的应用程序和 Myntra 的屏幕截图。提前致谢。

清单.json -

 {"name": "PwaDemo",
  "short_name": "PwaDemo",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

在此处输入图像描述在此处输入图像描述

4

1 回答 1

0

您正在非 HTTPS 站点上测试添加到主屏幕 (A2HS) 菜单项。
该菜单链接适用于所有网站，而不仅仅是 PWA。
这样做时，用户可以修改图标的名称。

首先
1. 将您的网站部署到 HTTPS 主机（必需）
2. 使用 Chrome Lighthouse 工具验证您是否拥有可安装的 PWA

然后，当用户单击 A2HS 链接时，他们将无法修改名称。

Lighthouse 会给你很多关于如何把事情做好的重要提示。

于 2019-07-12T14:19:37.107 回答