close-box Documentation

pwaShare() : Utilisation du partage natif de l'appareil

Afin d'offrir une expérience immersive comme le font les applications natives, on affiche la PWA en fullscreen ou standalone.

Le problème avec ces 2 modes d'affichage est que l'on n'as plus le bouton de partage que propose l'appareil (il reste présent en définissant l'affichage de l'application avec la valeur minimal-ui).

Afin d'améliorer l'expérience utilisateur et le partage de l'application sur les réseaux sociaux, PWA Bunga! propose la fonction pwaShare() qui utilise l'API Web Share.

Démo

HTML

Afin que la fonction soit fonctionnelle, il faut ajouter cet élément au DOM :


<button class="pwa-share-btn">Share</button>

CSS

On cache l élément


.pwa-share-btn {
    display: none;
}

Si l'élément a la classe is-visible, on l'affiche


.pwa-share-btn.is-visible {
    display: block;
}

La fonction


const pwaShare = async (options = {}) => {
    ...
}

Options de la fonction

Cette fonction prend un objet d'options facultatif qui permet de personnaliser le titre, le texte et l'URL partagés.


pwaShare({
    title: 'Mon titre personnalisé',
    text: 'Mon texte personnalisé',
    url: 'https://www.example.com'
});

Sélection de l'élément du DOM

Nous mettons en variable l'élément du DOM à manipuler


const pwaBtnShare = document.querySelector('.pwa-share-btn')

Récupération des données du fichier webmanifest

On fait une requête sur le fichier webmanifest et on stocke la réponse dans une variable


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

On Convertit la réponse de JSON en un objet JavaScript et la stocke dans une variable


const webmanifest = await webmanifestResponse.json()

Attribution des données pour l'API Share

On définit le titre de partage avec le paramètre en option de la fonction, ou avec la propriété name du fichier Webmanifest, ou avec la balise meta title du document


const title = options.title || webmanifest.name || document.title

On définit le texte de partage avec le paramètre en option de la fonction, ou avec la propriété de description du fichier Webmanifest, ou vide


const text = options.text || webmanifest.description || ''

l'URL de partage avec le paramètre en option de la fonction, ou avec l'URL de la page


const url = options.url || location.origin + location.pathname;

Affichage du bouton de partage

On vérifie si la PWA fonctionne en mode standalone


const isStandalone = window.matchMedia('(display-mode: standalone)').matches

On vérifie si la PWA fonctionne en mode fullscreen


const isFullscreen = window.matchMedia('(display-mode: fullscreen)').matches

On vérifie si la PWA fonctionne en mode standalone sur iOS


const isStandaloneIOS = window.navigator.standalone

Si la PWA est en mode standalone ou fullscreen, on affiche le bouton de partage


if (isStandalone || isFullscreen || isStandaloneIOS) {
    pwaShareBtn.classList.add('is-visible')
}

Partage du lien

Au clic sur le bouton de partage


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

Si le navigateur supporte l'API Web Share


if ('share' in navigator) {

On définit un objet appelé data qui contient le titre, le texte et l'url de la page à partager


let data = { title, text, url }

On ouvre le module de partage natif de l'appareil avec les données à partager


await navigator.share(data)

Si le navigateur ne supporte pas l'api Share


else {  
    location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + url
}

Appel de la fonction

Voici l'appel de la fonction utilisé sur pwabunga.js


pwaShare()

Code complet de la fonction pwaShare


const pwaShare = async (options = {}) => {

    try {
    
        const pwaShareBtn = document.querySelector('.pwa-share-btn')
    
        const webmanifestResponse = await fetch(new Request(document.querySelector('link[rel="manifest"]').href))
        const webmanifest = await webmanifestResponse.json()
    
        const title = options.title || webmanifest.name || document.title
        const text  = options.text || webmanifest.description || ''
        const url   = options.url || location.origin + location.pathname;
    
        const isStandalone = window.matchMedia('(display-mode: standalone)').matches
        const isFullscreen = window.matchMedia('(display-mode: fullscreen)').matches
        const isStandaloneIOS = window.navigator.standalone
    
        if (isStandalone || isFullscreen || isStandaloneIOS) {
            pwaShareBtn.classList.add('is-visible')
        }
    
        pwaShareBtn.addEventListener('click', async () => {
            if ('share' in navigator) {
                let data = { title, text, url }
                try {
                    await navigator.share(data)
                } catch (error) {
                    console.error('Error sharing:', error)
                }
            } else {
                console.warn('Share API not supported')
                location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + url
            }
        })
    
    } catch (error) {
        console.error('Error initializing pwaShare:', error)
    }
    
}

Les fonctions de PWA Bunga!

Enregistrement du Service worker

Amélioration de l'expérience utilisateur

Autorisations