pwaParams() : Encart des paramètres de la PWA

Toujours dans l'optique d'offrir une expérience utilisateur la plus proche possible des applications natives, la fonction pwaParams() va permettre de proposer à l'utilisateur un encart de configuration permettant d'afficher la version de la PWA, ainsi qu'une gestion des autorisations.

Cette fonction nécessite la présence des fonctions pwaNotifications() et pwaGeolocation(), qui vont permettre de gérer les boutons d'autorisations de l'encart paramètres.

Paramètres de la fonction

Cette fonction prend 3 paramètres :

• version : Affiche / Cache la version de la PWA dans l'encart de paramètres (Booléen, valeur par défaut : true)
• notifications : Affiche / Cache le bouton d'autorisation des notifications dans l'encart de paramètres (Booléen, valeur par défaut : true)
• geolocation : Affiche / Cache le bouton d'autorisation de la géolocalisation dans l'encart de paramètres (Booléen, valeur par défaut : true)

const pwaParams = async (version = true, notifications = true, geolocation = true) 

Démo

HTML

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

• pwa-params : conteneur de l'encart des paramètres de la PWA
• pwa-params-btn : bouton d'ouverture de l'encart des paramètres de la PWA
• pwa-params-close-btn : bouton de fermeture de l'encart des paramètres de la PWA
• pwa-params-version : conteneur du bloc de la version de la PWA
• pwa-params-permission : conteneur du bloc des permissions de la PWA
• pwa-params-permission-notification : conteneur de la permission de notifications
• pwa-params-permission-geolocation : conteneur de la permission de géolocalisation
• pwa-name : conteneur du nom de la PWA
• pwa-version : conteneur du la version de la PWA
• pwa-permission-notifications-btn : bouton de permission des notifications
• pwa-permission-geolocation-btn : bouton de permission de la géolocalisation
• pwa-permission-remove : conteneur de la révocation des permissions

<button class="pwa-params-btn">
    Params
</button>

<div class="pwa-params">

    <div class="pwa-params-version">
        <p>Version</p>
        <p>
            <span class="pwa-name"></span> 
            <span class="pwa-version"></span>
        </p>
    </div>

    <div class="pwa-params-permission">
        <p>Permissions</p>
        <ul>
            <li class="pwa-params-permission-notification">
                <button class="pwa-permission-notifications-btn">
                </button>
                <span>I authorize to receive notifications</span>
            </li>
            <li class="pwa-params-permission-geolocation">
                <button class="pwa-permission-geolocation-btn">
                </button>
                <span>I authorize geolocation</span>
            </li>
        </ul>
        <div class="pwa-permission-remove">
            To remove permission, please go to your device or browser settings
        </div>
    </div>

    <button class="pwa-params-close-btn">
        Close
     </button>

</div>	

CSS

On cache les éléments

.pwa-params,
.pwa-params-btn,
.pwa-params-version,
.pwa-params-permission,
.pwa-params-permission-notification,
.pwa-params-permission-geolocation,
.pwa-permission-remove {
    display: none;
}

Si les éléments ont la classe is-visible, on les affichent

.pwa-params.is-visible,
.pwa-params-btn.is-visible,
.pwa-params-version.is-visible,
.pwa-params-permission.is-visible,
.pwa-params-permission-notification.is-visible,
.pwa-params-permission-geolocation.is-visible,
.pwa-permission-remove.is-visible {
    display: block;
}

La fonction

const pwaParams = async (
    version = true, 
    notifications = true, 
    geolocation = true
) => {
    ...
}

Sélection des éléments du DOM

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

const pwaParams                       = document.querySelector('.pwa-params')
const pwaParamsButton                 = document.querySelector('.pwa-params-btn')
const pwaParamsButtonClose            = document.querySelector('.pwa-params-close-btn')
const pwaParamsVersion                = document.querySelector('.pwa-params-version')
const pwaParamsPermission             = document.querySelector('.pwa-params-permission')
const pwaParamsPermissionNotification = document.querySelector('.pwa-params-permission-notification')
const pwaParamsPermissionGeolocation  = document.querySelector('.pwa-params-permission-geolocation')
const pwaAddName                      = document.querySelector('.pwa-name')
const pwaAddVersion                   = document.querySelector('.pwa-version')

Serviceworker

On met en variable l'instance du serviceworker de l'application, qui va nous servir à récupérer la version de la PWA

const registration = await navigator.serviceWorker.getRegistration()

Récupération des données du fichier webmanifest

On fait une requête sur le fichier webmanifest et on stocke la réponse dans une variable

const webmanifestResponse = await fetch(new Request(document.querySelector('link[rel="manifest"]').href))

On Convertit la réponse de JSON en un objet JavaScript et la stocke dans une variable

const webmanifest = await webmanifestResponse.json()

Affichage du bouton des paramètres

On récupère la valeur du paramètre 'utm_source' de la chaîne de l'URL de la page en cours

const utm_source = new URLSearchParams(window.location.search).get('utm_source')

Si le paramètre utm_source dans l'URL est égal à 'homescreen', on affiche le bouton

if(utm_source == 'homescreen') {
    pwaParamsButton.classList.add('is-visible')
}

Récupération de la version de la PWA

const pwaVersion = async () => {

On envoie un message au Service Worker actif demandant la version PWA

registration.active.postMessage('GET_VERSION')

Lorsque le Service Worker reçoit un message

navigator.serviceWorker.addEventListener('message', function(event) {

Si le message contient des données, on injecte dans le dom la valeur reçue

if (event.data) {
    pwaAddVersion.innerText = event.data
}

Affichage de la version de la PWA

Si le paramètre 'version' de la fonction a la valeur true

if(version) {

On affiche le conteneur de la version

pwaParamsVersion.classList.add('is-visible')

On définit le nom de la PWA avec les données du fichier Webmanifest

pwaAddName.innerText = webmanifest.name

On définit la version de la PWA avec les données du Service Worker

pwaVersion()

Affichage du conteneur des autorisations

Si les paramètres 'notifications' et 'géolocalisation' sont tous les deux à false, on cache le conteneur des autorisations

if (!(notifications) && !(geolocation)) { 
    pwaParamsPermission.classList.remove('is-visible')

Sinon, on l'affiche

} else {
    pwaParamsPermission.classList.add('is-visible')
}

Affichage du conteneur de l'autorisation des notifications

Si le paramètre 'notifications' est à true

if (notifications) {

On affiche le conteneur e l'autorisation des notifications

pwaParamsPermissionNotification.classList.add('is-visible')

Et on appelle la fonction de demande de d'autorisation des notifications

pwaNotifications()

Affichage du conteneur de l'autorisation de la géolocalisation

Si le paramètre 'notifications' est à true

 if (geolocation) {

On affiche le conteneur e l'autorisation de la géolocalisation

pwaParamsPermissionGeolocation.classList.add('is-visible')

Et on appelle la fonction de demande de d'autorisation de la géolocalisation

pwaGeolocation()

Bouton des paramètres de la PWA

Au clic sur le bouton des paramètres de la PWA

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

On affiche le conteneur des paramètres de la PWA

pwaParams.classList.add('is-visible')

Bouton de fermeture du conteneur des paramètres de la PWA

Au clic sur le bouton de fermeture du conteneur des paramètres de la PWA

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

On cache le conteneur des paramètres de la PWA

pwaParams.classList.remove('is-visible')

Appel de la fonction

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

pwaParams()

Code complet de la fonction pwaParams

const pwaParams = async (
    version = true, 
    notifications = true, 
    geolocation = true
) => {
    
    const pwaParams = document.querySelector('.pwa-params')
    const pwaParamsButton = document.querySelector('.pwa-params-btn')
    const pwaParamsButtonClose = document.querySelector('.pwa-params-close-btn')
    const pwaParamsVersion = document.querySelector('.pwa-params-version')
    const pwaParamsPermission = document.querySelector('.pwa-params-permission')
    const pwaParamsPermissionNotification = document.querySelector('.pwa-params-permission-notification')
    const pwaParamsPermissionGeolocation = document.querySelector('.pwa-params-permission-geolocation')
    const pwaAddName = document.querySelector('.pwa-name')
    const pwaAddVersion = document.querySelector('.pwa-version')
    
    const registration = await navigator.serviceWorker.getRegistration()
    
    const webmanifestResponse = await fetch(new Request(document.querySelector('link[rel="manifest"]').href))
    const webmanifest = await webmanifestResponse.json()
    
    const utm_source = new URLSearchParams(window.location.search).get('utm_source')
    
    if(utm_source == 'homescreen') {
        pwaParamsButton.classList.add('is-visible')
    }
    
    const pwaVersion = async () => {
        registration.active.postMessage('GET_VERSION')
        navigator.serviceWorker.addEventListener('message', function(event) {
            if (event.data) {
                pwaAddVersion.innerText = event.data
            }
        })
    }
    
    if(version) {
        pwaParamsVersion.classList.add('is-visible')
        pwaAddName.innerText = webmanifest.name
        pwaVersion()
    } 
    
    if (!(notifications) && !(geolocation)) {
        pwaParamsPermission.classList.remove('is-visible')
    } else {
        pwaParamsPermission.classList.add('is-visible')
    }
    
    if (notifications) {
        pwaParamsPermissionNotification.classList.add('is-visible')
        pwaNotifications()
    }
    
    if (geolocation) {
        pwaParamsPermissionGeolocation.classList.add('is-visible')
        pwaGeolocation()
    }
    
    pwaParamsButton.addEventListener('click', () => {
        pwaParams.classList.add('is-visible')
    })
    
    pwaParamsButtonClose.addEventListener('click', () => {
        pwaParams.classList.remove('is-visible')
    })
    
}

Les fonctions de PWA Bunga!

Enregistrement du Service worker

• pwaRegister() : Enregistrement du Service worker

Amélioration de l'expérience utilisateur

• pwaInstall() : Promotion et bouton d'installation de la PWA
• pwaUpdate() : Mise à jour de l'application
• pwaShare() : Utilisation du partage natif de l'appareil
• pwaParams() : Encart des paramètres de la PWA

Autorisations

• pwaNotification() : Demande d'autorisation de l'envoi des notifications
• pwaGeolocation() : Demande d'autorisation de la géolocalisation