Ornament

By 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>