Angular - 如何在我的网络应用程序中创建持久/永久 "Add to Home screen"按钮，就像 Google Contribute 一样

Question

如何在我的网络应用程序中创建一个持久/永久的“添加到主屏幕”按钮，就像 Google Contribute 一样？ (见下图)

背景:这是一个 Angular v5 应用程序，具有 PWA 服务 worker 和 manifest.json 全部设置。登陆应用程序后，会弹出一个横幅，邀请用户添加到主屏幕。一切正常。

那么如何在我的网络应用程序中添加一个按钮，例如 Google Contribute(见下图)？

Answer 1

确实没有标准，也没有 API 可以做到这一点。尽管如此，仍然可以做一些事情。

此处指定:

https://developers.google.com/web/fundamentals/app-install-banners/

如果您的应用符合特定条件，Chrome 会自动向用户显示横幅。

Has a web app manifest file with:
    a short_name (used on the home screen)
    a name (used in the banner)
    a 192x192 png icon (the icon declarations must include a mime type of image/png)
    a start_url that loads
Has a service worker registered on your site.
Is served over HTTPS (a requirement for using service worker).
Meets a site engagement heuristic defined by Chrome (this is regularly being changed).

作为 iOS 的替代方案，我建议使用以下库:

http://cubiq.org/add-to-home-screen ( https://github.com/cubiq/add-to-homescreen )