close-box Documentation

pwaInstall() : Promotion et bouton d'installation de la PWA

Si la PWA répond aux critères d'installation, le navigateur déclenche un événement pour inviter l'utilisateur à l'installer.

Par exemple, sur Chrome Android, le navigateur affiche un bandeau proposant l'installation.

Il se peut que l'utilisateur ne connaisse pas le processus d'installation d'une PWA, et nous allons pouvoir améliorer cette expérience en le personnalisant.

À cet effet, la fonction pwaInstall() va :

Démo

HTML

Afin que la fonction soit fonctionnelle, il faut ajouter ces éléments au DOM :

Encart de promotion de l'installation et bouton d'installation


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

Encart de confirmation de l'installation


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

Loader


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

CSS

Si vous n'utilisez pas pwabunga-ui.css, voici le CSS à utiliser :

On cache les éléments utiles à la fonction


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

Si l'élément a la classe is-visible, on l'affiche


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

La fonction


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

Sélection des éléments du DOM

Nous mettons en variable les éléments du DOM à manipuler


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

Affichage de l'encart de promotion et du bouton d'installation

On initialise deferredPrompt que l'on utilisera par la suite pour afficher l'écran d'installation


let deferredPrompt

Pour afficher les éléments, on utilise l'événement beforeinstallprompt


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

On empêche l'apparition du bandeau affiché par défaut par le navigateur proposant l'installation 


e.preventDefault()

On stock l'événement qu'on utilisera plus tard 


deferredPrompt = e

On affiche l'encart de promotion de l'installation et le bouton d'installation.


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

Bouton d'installation

Maintenant que le bouton d'installation est affiché si l'installation n'a pas été encore effectuée, on rend fonctionnel ce bouton

Au clic sur le bouton d'installation


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

On affiche la demande d'installation


deferredPrompt.prompt()

On détecte si l'utilisateur a confirmé l'installation ou non


const { outcome } = await deferredPrompt.userChoice;

deferredPrompt ayant été utilisé, il ne peut plus l'être


deferredPrompt = null

Si l'utilisateur a accepté l'installation, on cache le bouton d'installation


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

Affichage du loader et confirmation de l'installation

On utilise l'événement appinstalled pour afficher l'encart de confirmation. Cet évènement est déclenché au moment où le processus d'installation est engagé et non au moment où l'installation est terminée


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

On cache le l'encart de promotion de l'installation et on affiche le loader


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

L'événement étant déclenché au début de l'installation, on ne peut pas savoir à quel moment cette installation est terminée. On simule donc le temps de chargement en affichant le loader 2,5 secondes puis on affiche l'encart de confirmation de l'installation.


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

Bouton de fermeture de l'encart de promotion de l'installation

On cache l'encart de promotion au click du bouton pwaPromotionClose


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

Bouton de fermeture de l'encart de confirmation de l'installation

On cache l'encart de confirmation de l'installation au click du bouton pwaInstallConfirmClose


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

Appel de la fonction

Voici l'appel de la fonction utilisé sur pwabunga.js


pwaInstall()

Code complet de la fonction 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', async () => {
        deferredPrompt.prompt()
        const { outcome } = await deferredPrompt.userChoice;
        deferredPrompt = null
        if (outcome === 'accepted') {
            pwaInstallBtn.classList.remove('is-visible')
        }
    })

    window.addEventListener("appinstalled", () => {
        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')
    })
    
}

Les fonctions de PWA Bunga!

Enregistrement du Service worker

Amélioration de l'expérience utilisateur

Autorisations