Add to Home Screen (A2HS)
‹ BackBy default, all Add to Home Screen functionality is disabled.
There are two steps you need to take in order to create a custom UI for add to homescreen.
First, open up register-service-worker.js
and enable the flag showA2HSUI
.
Now in your application any element you add the attribute data-a2hs
to, will appear when the add to homescreen requirements have been met. Any element that has data-a2hs-button
will act as the trigger button. This allows you to have accompanying content along with the action. If all you need is a button simply add both attributes to the element.
<div class="a2hs-button spacing-xxx-tight" data-a2hs> <p>Hey check this out!</p> <button class="button" data-a2hs-button>Add to homescreen</button> </div>