close-box Documentation

pwaShare(): Using device native sharing

In order to offer an immersive experience like native applications do, the PWA is displayed in fullscreen or standalone.

The problem with these 2 display modes is that we no longer have the sharing button offered by the device (it remains present by setting the app's display to minimal-ui).

In order to improve the user experience and the sharing of the application on social networks, PWA Bunga! offers the pwaShare() function which uses the Web Share API.

Demo

HTML

In order for the function to be functional, this element must be added to the DOM:


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

CSS

We hide the element


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

If the element has class is-visible, we display it


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

The function


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

Function options

This function takes an optional options object that allows customization of the shared title, text, and URL.

> 

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

DOM element selection

We set the DOM element to handle as a variable


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

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

We convert the response from JSON to a JavaScript object and store it in a variable


const webmanifest = await webmanifestResponse.json()

Data attribution for the Share API

We define the share title with the optional parameter of the function, or with the name property of the Webmanifest file, or with the title meta tag of the document


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

We define the split text with the optional parameter of the function, or with the description property of the Webmanifest file, or empty


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

the share URL with the optional parameter of the function, or with the URL of the page


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

Showing the share button

We check if the PWA works in standalone mode


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

We check if the PWA works in fullscreen mode


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

We check if the PWA works in standalone mode on iOS


const isStandaloneIOS = window.navigator.standalone

If the PWA is in standalone or fullscreen mode, the share button is displayed


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

Link sharing

When you click on the share button


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

If the browser supports the Web Share API


if ('share' in navigator) {

We define an object called data which contains the title, the text and the url of the page to share


let data = { title, text, url }

We open the native sharing module of the device with the data to be shared


await navigator.share(data)

If the browser does not support the Share API


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

Function call

Here is the function call used on pwabunga.js


pwaShare()

Complete code of pwaShare function


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

The functions of PWA Bunga!

Service worker registration

Improved user experience

Permissions