pwaGeolocation(): Geolocation authorization request

The pwaGeolocation() function offers the user a button to authorize geolocation.

• Displays a button indicating the status of the geolocation authorization
• If the user has neither accepted nor refused the geolocation, 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-geolocation-btn: PWA geolocation permission request button
• pwa-permission-remove: PWA Geolocation Permission Revocation Explanation Insert

<button class="pwa-permission-geolocation-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-geolocation-btn,
.pwa-permission-remove {
     display: none;
}

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

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

The function

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

Selection of DOM elements

We set the DOM elements to be manipulated as variables

const pwaPermissionGeolocationBtn = document.querySelector('.pwa-permission-geolocation-btn')
const pwaPermissionRemove = document.querySelector('.pwa-permission-remove')

Request for geolocation authorization and recovery of the user's position

const pwaGeolocationCurrentPosition = () => {

To display the geolocation authorization request prompt, we retrieve the user's position

navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude:' + position.coords.latitude);
    console.log('Longitude:' + position.coords.longitude);

We add the is-active class to the button

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

Display authorization status

If the user has accepted geolocation

const permissionStatus = await navigator.permissions.query({ name: 'geolocation' })
if (permissionStatus.state === "granted") {

We add the is-active class to the button

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

Authorization request button

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

If the user has already accepted geolocation

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

Display the permission revocation explanation insert

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

Otherwise, we ask for authorization by retrieving the position of the user

pwaGeolocationCurrentPosition()

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

pwaGeolocation()

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

Complete code of the pwaGeolocation() function

const pwaGeolocation = async () => {

    const pwaPermissionGeolocationBtn = document.querySelector('.pwa-permission-geolocation-btn')
    const pwaPermissionRemove         = document.querySelector('.pwa-permission-remove')

    const pwaGeolocationCurrentPosition = () => {
        navigator.geolocation.getCurrentPosition(function(position) {
            console.log('Latitude:' + position.coords.latitude);
            console.log('Longitude:' + position.coords.longitude);
            pwaPermissionGeolocationBtn.classList.add('is-active')
        })
    }

    const permissionStatus = await navigator.permissions.query({ name: 'geolocation' });
    if (permissionStatus.state === "granted") {
        pwaPermissionGeolocationBtn.classList.add('is-active')
    }


    pwaPermissionGeolocationBtn.addEventListener('click', () => {
        if(pwaPermissionGeolocationBtn.classList.contains('is-active')) {
            pwaPermissionRemove.classList.add('is-visible')
        } else {
            pwaGeolocationCurrentPosition()
        }
    })

    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