pwaNotifications() : Demande d'autorisation des notifications

La fonction pwaNotifications() permet de proposer à l'utilisateur un bouton pour autoriser l'envoi de notifications.

• Affiche un bouton indiquant l'état de l'autorisation de l'envoi des notifications
• Si l'utilisateur n'a ni accepté, ni refusé l'envoi des notifications, affiche la demande d'autorisation
• Si l'utilisateur a accepté, le bouton affiche un encart d'explications pour révoquer l'autorisation

HTML

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

• pwa-permission-notifications-btn : bouton de demande d'autorisation des notifications de la PWA
• pwa-permission-remove : Encart d'explications de révocation de l'autorisation des notifications de la PWA

<button class="pwa-permission-notifications-btn">
    {...}
</button>

<div class="pwa-permission-remove">
    To remove permission, please go to your device or browser settings
</div>	

CSS

On cache les éléments

.pwa-permission-notifications-btn,
.pwa-permission-remove {
    display: none;
}

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

.pwa-permission-notifications-btn.is-visible,
.pwa-permission-remove.is-visible {
    display: block;
}

La fonction

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

Sélection des éléments du DOM

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

const pwaPermissionNotificationsBtn = document.querySelector('.pwa-permission-notifications-btn')
const pwaPermissionRemove = document.querySelector('.pwa-permission-remove')

Affichage de l'état de l'autorisation

Si l'utilisateur a accepté l'envoi des notifications, on ajoute la classe is-active au bouton

if (Notification.permission === 'granted') { 
    pwaPermissionNotificationsBtn.classList.add('is-active')
}

Sinon on enlève la classe is-active au bouton

else {
    pwaPermissionNotificationsBtn.classList.remove('is-active')
}

Demande d'autorisation de l'envoi des notifications

const pwaNotificationsPermission = async () => {

Si l'utilisateur n'a pas refusé l'envoi des notifications

if (Notification.permission !== 'denied') { 

On demande l'autorisation à l'utilisateur

const permission = await Notification.requestPermission()

Si l'utilisateur accepte

if(permission == "granted"){ 

On ajoute la classe is-active au bouton

pwaPermissionNotificationsBtn.classList.add('is-active')

Bouton de demande d'autorisation

pwaPermissionNotificationsBtn.addEventListener('click', async () => {

Si l'utilisateur a déjà accepté l'envoi des notifications

if(pwaPermissionNotificationsBtn.classList.contains('is-active')) {

On affiche l'encart d'explications de révocation de l'autorisation

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

Sinon, on demande l'autorisation

pwaNotificationsPermission()

Fermeture de l'encart d'explications de révocation de l'autorisation

Si on clique sur l'encart

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

On cache l'encart d'explications de révocation de l'autorisation

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

Appel de la fonction

pwaNotifications()

Sur pwabunga.js, la fonction pwaNotifications() est appelé dans la fonction pwaParams()

Code complet de la fonction pwaNotifications()

const pwaNotifications = async () => {
    
    const pwaPermissionNotificationsBtn = document.querySelector('.pwa-permission-notifications-btn')
    const pwaPermissionRemove           = document.querySelector('.pwa-permission-remove')
    
    if (Notification.permission === 'granted') { 
        pwaPermissionNotificationsBtn.classList.add('is-active')
    } else {
        pwaPermissionNotificationsBtn.classList.remove('is-active')
    }

    const pwaNotificationsPermission = async () => {
        if (Notification.permission !== 'denied') { 
            const permission = await Notification.requestPermission()
            if(permission == "granted"){ 
                pwaPermissionNotificationsBtn.classList.add('is-active')
            } 
        } 
    }
    
    pwaPermissionNotificationsBtn.addEventListener('click', async () => {
        if(pwaPermissionNotificationsBtn.classList.contains('is-active')) {
            pwaPermissionRemove.classList.add('is-visible')
        } else {
            pwaNotificationsPermission()
        }
    })

    pwaPermissionRemove.addEventListener('click', () => {
        pwaPermissionRemove.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