Angular - How to create a persistent/permanent "Add to Home screen" button in my web app, just like Google Contribute

Question

How to create a persistent/permanent "Add to Home screen" button in my web app, just like Google Contribute? (see image below)

Background: It's an Angular v5 app with PWA service worker and manifest.json all setup. On landing in the app, a banner will pop-up inviting users to Add to Home Screen. It's all working good.

So how to have a button in my web app like Google Contribute (see image below)?

Answer 1

There is really no standard and no API to do that. That being said, something can still be done.

As specified here:

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

If you app meets certain criteria, Chrome will automatically show a banner to the user.

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).

As alternative for iOS, I suggest the following library:

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

Answer 2

position: sticky ? add that button outside of your router so it remains there not depending on the view ? not sure exactly what you mean. if you try to describe it a little bit more I could help more.

Answer 3

You can achieve this by ng-content. Let's say we have CardComponent, In card.component.html we can have this:

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

In our ContriobuteComponent, we have:

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

The content in div would be injected to ng-content. Similarly,in ReviewsComponent you can inject different contents

Answer 4

Add an add to home screen button in your app.component.html . Use styling to position it according to your need.

for example, if you have a

<router-outlet></router-outlet>

change it to

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