服务工作者允许应用程序名称以角度 7 更改答案

【问题标题】：Service worker allowing app name to change in angular 7服务工作者允许应用程序名称以角度 7 更改
【发布时间】：2019-11-22 02:46:10
【问题描述】：

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

Manifest.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"
    }
  ]
}

【问题讨论】：

你能分享你的manifest.json吗？
@PatrykPanek Manifest.json 共享
可能scope 是个问题。尝试从 manifest.json 中删除该属性。更多关于你可以在这里阅读developer.mozilla.org/en-US/docs/Web/Manifest/scope
@PantryPanek 即使在删除范围属性后它也不起作用
您的应用程序是否部署在某个地方？可能它与服务工作者或清单目录有关，但我不确定。 Service Worker 可能无法正确初始化，或者应用程序以某种方式缺少 manifest.json。要测试 Service Worker，您需要像 Angular Docs (angular.io/guide/service-worker-getting-started) 中描述的那样托管您的应用程序。 编辑：如果您可以更改应用名称，则意味着 PWA 根本不起作用。

标签： angular progressive-web-apps angular-service-worker angular-pwa

【解决方案1】：

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

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

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

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

【讨论】：

如果您还没有 HTTPS 主机，glitch.com 是快速测试的绝佳免费选择。
@PalashAgrawal 如果你这样做，它会按你期望的方式工作吗？
感谢您的回答。我发布的图片是出于代表性目的，我的实际应用程序仅在 https 上。其次，我在同样的情况下运行了灯塔测试，它给出了错误 - “此页面由服务人员控制，但是 start_url 不在服务人员的范围内”。
修复网站上的所有灯塔错误并且它是 PWA 后，A2HS 快捷方式将被锁定。您是否正在使用子域、端口或子文件夹进行测试？如果是，那么您可能需要更改清单文件中的“start_url”：“/”值以匹配。