添加到屏幕不显示答案

【问题标题】：Add to screen not showing up添加到屏幕不显示
【发布时间】：2018-06-07 10:42:06
【问题描述】：

角度应用程序中 manifest.json 中的 start_url 应该是什么。

{
  "name": "dummy",
  "short_name": "dummy",
  "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"
    }
  ]
}

应该是“/”还是“。”或“/index.html” 我需要为服务人员收听“安装提示之前”事件吗？或任何其他，如果我错过任何东西。提前致谢！

【问题讨论】：

标签： angular service-worker manifest.json angular-service-worker pwa

【解决方案1】：

添加到主屏幕后，当您单击 PWA 的图标时，开始 URL 将成为您应用的主页。如果你在项目的根目录下有一个 index.html 并且在同一个路径下有一个 manifest，你可以给 “/index.html” 或者你也可以给一个完全限定的 uRL 域名像 “https://www.example.com/

您需要收听 beforeinstallprompt 以使用它来显示“添加到主屏幕”安装横幅。无论您如何处理此事件，您都可以从 chrome 菜单添加到主屏幕。此事件用于页面内安装横幅。

【讨论】：

感谢 Anand 的回复，我已经找到了 Angular 应用程序，我们可以提供简单的“/”或相对路径。此外，默认情况下，所有浏览器都会显示 pwa 安装的弹出窗口，根据谷歌文档，我们需要 68 及以上版本的 beforeinstallprompt 事件。
起始 URL 与 Angular 或任何特定框架无关。重要的是您的构建文件夹的外观以及您的 Web 应用程序如何将起始 URL 解析为页面。如果可以，那就万事大吉了。如果您给出一个简单的“/”，则相当于给出“example.com”，在这种情况下，您可以将您的主页设置为 index.html 或 index2.html 或者只要它响应主页并且当您给出“/index.html” 相当于“example.com/index.html” .. 是的，它是合格 URL 构建的相关路径。
yupp 同意 start_url 与角度无关。我只是在 spa 的上下文中举例说明路径应该是相对的
我知道你有 /index.html 工作..我想说的是，这不是唯一可以不管框架的值。只是想解释一下 start url 一般是如何工作的。我在工作之间添加了 cmets，我猜你在两者之间添加了。
在安装提示之前，它从 chrome 版本 45 开始支持。只是 chrome 强制使用它来触发最近版本的安装横幅，因为他们发现更多用户没有使用添加到如果他们一进入网站就显示主屏幕。在开发人员认为用户会喜欢我们网站的屏幕中显示会更合适。这更像是一种强制性的良好实践，因此您可以拥有旧版本的事件逻辑和生成。如果它解决了您的问题，请接受答案。