pwaParams(): PWA parameters insert

Always with the aim of offering a user experience as close as possible to native applications, the pwaParams() function will allow the user to be offered a configuration insert to display the version of the PWA, as well as authorization management.

This function requires the presence of the pwaNotifications() and pwaGeolocation() functions, which will allow you to manage the authorization buttons of the settings insert.

Function parameters

This function takes 3 parameters:

• version: Shows/Hides the version of the PWA in the parameter box (Boolean, default value: true)
• notifications: Shows / Hides the notification authorization button in the parameters box (Boolean, default value: < code>true)
• geolocation: Shows / Hides the geolocation authorization button in the parameters box (Boolean, default value: true)

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

Demo

HTML

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

• pwa-params: container of the PWA parameters insert
• pwa-params-btn: button for opening the PWA parameters insert
• pwa-params-close-btn: button to close the PWA settings box
• pwa-params-version: PWA version block container
• pwa-params-permission: PWA permissions block container
• pwa-params-permission-notification: notification permission container
• pwa-params-permission-geolocation: geolocation permission container
• pwa-name: PWA name container
• pwa-version: PWA version container
• pwa-permission-notifications-btn: notifications permission button
• pwa-permission-geolocation-btn: geolocation permission button
• pwa-permission-remove: permission revocation container

<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

We hide the elements

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

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

.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;
}

The function

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

Selection of DOM elements

We set the DOM elements to be manipulated as variables

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

Service worker

We set the instance of the serviceworker of the application as a variable, which will be used to retrieve the version of the PWA

const registration = await navigator.serviceWorker.getRegistration()

Retrieving data from webmanifest file

We make a request on the webmanifest file and we store the response in a variable

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

On Convert the response from JSON to a JavaScript object and store it in a variable

const webmanifest = await webmanifestResponse.json()

Display settings button

We retrieve the value of the 'utm_source' parameter from the URL string of the current page

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

If the utm_source parameter in the URL is equal to 'homescreen', the button is displayed

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

PWA version retrieval

const pwaVersion = async () => {

We send a message to the active Service Worker requesting the PWA version

registration.active.postMessage('GET_VERSION')

When the Service Worker receives a message

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

If the message contains data, the value received is injected into the dom

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

PWA version retrieval

const pwaVersion = async () => {

We send a message to the active Service Worker requesting the PWA version

registration.active.postMessage('GET_VERSION')

When the Service Worker receives a message

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

If the message contains data, the value received is injected into the dom

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

Display of the PWA version

If the 'version' parameter of the function is true

if(version) {

Display the version container

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

We define the name of the PWA with the data from the Webmanifest file

pwaAddName.innerText = webmanifest.name

We define the version of the PWA with the Service Worker data

pwaVersion()

Display permissions container

If the 'notifications' and 'geolocation' parameters are both false, we hide the permissions container

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

Otherwise, we display it

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

Display of notification authorization container

If the 'notifications' parameter is true

if (notifications) {

We display the container and the notification authorization

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

And we call the notification authorization request function

pwaNotifications()

Geolocation authorization container display

If the 'notifications' parameter is true

if (geolocation) {

We display the container and the geolocation authorization

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

And we call the geolocation authorization request function

pwaGeolocation()

PWA settings button

On click on the PWA settings button

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

Display the PWA settings container

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

PWA settings container close button

On click on the close button of the PWA settings container

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

We hide the PWA settings container

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

Function call

Here is the function call used on pwabunga.js

pwaParams()

Complete code of the pwaParams function

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

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