pwaGeolocation() : Demande d'autorisation de la géolocalisation

La fonction pwaGeolocation() permet de proposer à l'utilisateur un bouton pour autoriser la géolocalisation.

• Affiche un bouton indiquant l'état de l'autorisation de la géolocalisation
• Si l'utilisateur n'a ni accepté, ni refusé la géolocalisation, 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-geolocation-btn : bouton de demande d'autorisation de la géolocalisation de la PWA
• pwa-permission-remove : Encart d'explications de révocation de l'autorisation de la géolocalisation de la PWA

<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

On cache les éléments

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

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

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

La fonction

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

Sélection des éléments du DOM

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

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

Demande d'autorisation de la géolocalisation et récupération de la position de l'utilisateur

const pwaGeolocationCurrentPosition = () => {

Pour faire apparaitre le prompt de demande d'autorisation de la géolocalisation, on récupère la position de l'utilisateur

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

On ajoute la classe is-active au bouton

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

Affichage de l'état de l'autorisation

Si l'utilisateur a accepté la géolocalisation

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

On ajoute la classe is-active au bouton

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

Bouton de demande d'autorisation

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

Si l'utilisateur a déjà accepté la géolocalisation

if(pwaPermissionGeolocationBtn.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 en récupérant la position de l'utilisateur

pwaGeolocationCurrentPosition()

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

pwaGeolocation()

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

Code complet de la fonction pwaGeolocation()

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

}

Les fonctions de PWA Bunga!

Enregristrement 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