close-box Documentation

pwaInstall(): Promotion and PWA install button

If the PWA meets the installation criteria, the browser triggers an event to prompt the user to install it.

For example, on Chrome Android, the browser displays a banner offering the installation.

The user may not know the installation process of a PWA, and we will be able to improve this experience by personalizing it.

For this purpose, the function pwaInstall() will:

Demo

HTML

In order for the function to be functional, these elements must be added to the DOM:

Install promotion insert and install button


<div class="pwa-install-promotion">
    <button class="pwa-install-promotion-close">Close</button>
    {{ content }}
    <button class="pwa-install-btn">Install</button>
</div>

Installation confirmation insert


<div class="pwa-install-confirm">
    <button class="pwa-install-confirm-close">Close</button>
    {{ content }}
</div>

Loader


<div class="pwa-loader">
    {{ loader }}
</div>

CSS

If you don't use pwabunga-ui.css, here is the CSS to use:

We hide the elements useful to the function


.pwa-install-promotion,
.pwa-install-confirm,
.pwa-install-btn,
.pwa-loader {
    display: none;
}

If the element has class is-visible, we display it


.pwa-install-promotion.is-visible,
.pwa-install-confirm.is-visible,
.pwa-install-btn.is-visible,
.pwa-loader.is-visible {
    display: block;
}

The function


const pwaInstall = async () => {
    ...
}

Selection of DOM elements

We set the DOM elements to be manipulated as variables


const pwaInstallPromotion      = document.querySelector('.pwa-install-promotion')
const pwaInstallPromotionClose = document.querySelector('.pwa-install-promotion-close')
const pwaInstallBtn            = document.querySelector('.pwa-install-btn')
const pwaInstallConfirm        = document.querySelector('.pwa-install-confirm')
const pwaInstallConfirmClose   = document.querySelector('.pwa-install-confirm-close')
const pwaInstallLoader         = document.querySelector('.pwa-loader')

Display of promotion insert and install button

We initialize deferredPrompt which we will use later to display the installation screen


let deferredPrompt

To display the elements, we use the event beforeinstallprompt


window.addEventListener('beforeinstallprompt', (e) => {

We prevent the appearance of the banner displayed by default by the browser offering the installation 


e.preventDefault()

We store the event that we will use later 


deferredPrompt = e

The installation promotion insert and the installation button are displayed.


pwaInstallPromotion.classList.add('is-visible')
pwaInstallBtn.classList.add('is-visible')

Install button

Now that the install button is displayed if the installation has not been done yet, we make this button functional

Au clic sur le bouton d'installation


pwaInstallBtn.addEventListener('click', () => {

We display the installation request


deferredPrompt.prompt()

We detect if the user has confirmed the installation or not


const { outcome } = await deferredPrompt.userChoice;

deferredPrompt having been used, it can no longer be used


deferredPrompt = null

If the user has accepted the installation, we hide the installation button


if (outcome === 'accepted') {
    pwaInstallBtn.classList.remove('is-visible')
}

Display of the loader and confirmation of the installation

We use the appinstalled event to display the confirmation box. This event is triggered when the installation process is initiated and not when the installation is finished


window.addEventListener("appinstalled", () => {

We hide the installation promotion insert and display the loader


pwaInstallPromotion.classList.remove('is-visible')
pwaInstallLoader.classList.add('is-visible')

The event being triggered at the beginning of the installation, we cannot know when this installation is finished. We therefore simulate the loading time by displaying the loader for 2.5 seconds and then displaying the installation confirmation insert.


setTimeout(() => {
    pwaInstallConfirm.classList.add('is-visible')
    pwaInstallLoader.classList.remove('is-visible')
}, "2500");

Installation promotion insert close button

We hide the promotion insert when the pwaPromotionClose button is clicked


pwaInstallPromotionClose.addEventListener('click', (e) => {
    pwaInstallPromotion.classList.remove('is-visible')
})

Installation confirmation box close button

We hide the installation confirmation box when you click the button pwaInstallConfirmClose


pwaInstallConfirmClose.addEventListener('click', (e) => {
    pwaInstallConfirm.classList.remove('is-visible')
})

Function call

Here is the function call used on pwabunga.js


pwaInstall()

Complete code of the function pwaInstall()


const pwaInstall = async () => {
    
    const pwaInstallPromotion      = document.querySelector('.pwa-install-promotion')
    const pwaInstallPromotionClose = document.querySelector('.pwa-install-promotion-close')
    const pwaInstallBtn            = document.querySelector('.pwa-install-btn')
    const pwaInstallConfirm        = document.querySelector('.pwa-install-confirm')
    const pwaInstallConfirmClose   = document.querySelector('.pwa-install-confirm-close')
    const pwaInstallLoader         = document.querySelector('.pwa-loader')
    
    let deferredPrompt
    
    window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault()
        deferredPrompt = e
        pwaInstallPromotion.classList.add('is-visible')
        pwaInstallBtn.classList.add('is-visible')
    })

    pwaInstallBtn.addEventListener('click', () => {
        deferredPrompt.prompt()
        const { outcome } = await deferredPrompt.userChoice;
        deferredPrompt = null
        if (outcome === 'accepted') {
            pwaInstallBtn.classList.remove('is-visible')
        }
    })

    window.addEventListener("appinstalled", async () => {
        pwaInstallPromotion.classList.remove('is-visible')
        pwaInstallLoader.classList.add('is-visible')
        setTimeout(() => {
            pwaInstallConfirm.classList.add('is-visible')
            pwaInstallLoader.classList.remove('is-visible')
        }, "2500");
    })

    pwaInstallPromotionClose.addEventListener('click', () => {
        pwaInstallPromotion.classList.remove('is-visible')
    })
    
    pwaInstallConfirmClose.addEventListener('click', () => {
        pwaInstallConfirm.classList.remove('is-visible')
    })
    
}

The functions of PWA Bunga!

Service worker registration

Improved user experience

Permissions