Angular - 如何在我的网络应用程序中创建持久/永久的"添加到主屏幕"按钮,就像Google Contribute一样

Question

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

背景:这是一个带有PWA服务工作者和manifest.json所有设置的Angular v5应用程序.在应用程序中登陆时,将弹出一个横幅,邀请用户添加到主屏幕.这一切都很好.

那么如何在我的网络应用程序中有一个按钮,如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)

Answer 2

position: sticky？将该按钮添加到路由器外部，以便它保留在那里而不取决于视图？不确定你的意思。如果您尝试更多地描述它，我可以提供更多帮助。