Add Custom Install Banner (Progressive Web App)

Prerequisites [If you want build the PWA from scratch] (optional)

• https://khan-photon.medium.com/create-a-simple-progressive-web-app-pwa-1685519acef7

Github Link: https://github.com/mp5maker/progresssive-web-app/tree/add-to-your-home-screen

Added a simple button using a bootstrap classes.

<button class="alert alert-success banner">
  <strong>Install PWA App</strong>
</button>
<script src="add-to-your-home-screen.js"></script>

.banner {
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 z-index: 2;
 display: none;
}
.banner.active {
 display: block;
}

• The banner will show only when the banner has a active class
• Be default banner has a active class if the localstorage BANNER_ID do not have a string ‘not-needed’
• We will listen to ‘beforeinstallprompt’ save the promise response to a variable
• The response will have a prompt() function
• Prompt function will be called when the user clicks on the banner.
• If the user successfully install the banner
• We will just remove the banner “active” class and set ‘not-needed’ string to BANNER_ID