pwaNotifications(): Notification authorization request

The pwaNotifications() function offers the user a button to authorize the sending of notifications.

• Displays a button indicating the status of authorization to send notifications
• If the user has neither accepted nor refused the sending of notifications, displays the authorization request
• If the user has accepted, the button displays an explanation box to revoke the authorization

HTML

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

• pwa-permission-notifications-btn: PWA notifications permission request button
• pwa-permission-remove: PWA notification permission revocation explanation insert

<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

We hide the elements

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

If the elements have the class is-visible, we display them

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

The function

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

Selection of DOM elements

We set the DOM elements to be manipulated as variables

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

Display authorization status

If the user has accepted the sending of notifications, we add the class is-active to the button

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

Otherwise we remove the is-active class from the button

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

Request for authorization to send notifications

const pwaNotificationsPermission = async () => {

If the user has not refused the sending of notifications

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

The user is asked for permission

const permission = await Notification.requestPermission()

If the user accepts

if(permission == "granted"){

We add the is-active class to the button

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

Authorization request button

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

If the user has already accepted the sending of notifications

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

Display the permission revocation explanation insert

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

Otherwise, we ask for permission

pwaNotificationsPermission()

Closing the permission revocation explanation insert

If you click on the insert

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

Hide permission revocation explanation insert

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

Function call

pwaNotifications()

On pwabunga.js, the pwaNotifications() function is called in the pwaParams() function

Complete code of the pwaNotifications() function

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

The functions of PWA Bunga!

Service worker registration

• pwaRegister(): Service worker registration

Improved user experience

• pwaInstall(): Promotion and PWA install button
• pwaUpdate(): Application update
• pwaShare(): Using device native sharing
• pwaParams(): PWA parameters insert

Permissions

• pwaNotification(): Request authorization to send notifications
• pwaGeolocation(): Geolocation authorization request