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 ？ 在路由器外添加该按钮，以便它不依赖于视图？ 不确定你究竟是什么意思。 如果你试着多说一点，我可以帮助更多。

Answer 3

您可以通过ng-content实现此目的。 假设我们有CardComponent ，在card.component.html中我们可以这样：

<div class="card">
  <ng-content></ng-content>
</div>

在我们的ContriobuteComponent ，我们有：

<card>
  <div class="card-block">
    <a href="#" class="btn btn-primary">Add to Home Screen</a>
   <h2>{{username | uppercase }}</h2>
  </div>
</card>

div的内容将被注入ng-content 。 同样，在ReviewsComponent您可以注入不同的内容

Answer 4

在app.component.html中添加添加到主屏幕按钮。 使用样式根据需要定位。

例如，如果你有

<router-outlet></router-outlet>

改为

       <button class = "add-to-home-screen" 
             (click) = "addToHomeScreenClicked()"> add to home screen</button>
        <router-outlet></router-outlet>

Answer 5

Personnaly我会将它添加到app组件或在路由器外部创建一个组件，我将在固定的div块中显示它。 你需要角度方面或html / css的帮助吗？ 适用于app中的角度组件

<app-fixedFav [inputFav]="favList"></app-fixedNav>
<app-guide (addToFav)="updateFavList($event)"></app-guide>

然后在您的指南中，当有人向收藏夹添加地点时，会使用EventEmitter发出收藏列表，并在您的应用程序组件中运行更新功能。 然后在您的固定导航中创建一个输入，如我的示例或应用程序组件中的ViewChild，以更新您的固定内容。

Answer 6

您可以创建包含按钮的ParentComponent。

然后将每个新组件扩展（继承）到此ParentComponent。