The version 61 of Chrome for Android has brought a pleasant innovation to all those who, for business or pleasure, create web applications for the mobile environment: Web Share APIs. This feature allows, within a web app, to take advantage of the device’s native sharing mechanisms.
Before the introduction of Web Share APIs, the user was forced to use the classic copy and paste mechanism to share a link with a friend via WhatsApp or similar apps or to send a mobile number via SMS.
Web Share APIs provide a native and already familiar method to share URLs and texts of a web application through the various applications installed on your device, further improving the integration between web applications and mobile devices.
In order to use Web Share APIs there are two requirements to be met:
- The application must be served via HTTPS protocol. The HTTPS is a protocol for the sure communication that allows to protect the privacy of the interlocutors and to guarantee the integrity of the exchanged data.
- They can only be invoked in response to a user action. A call to Share APIs is therefore allowed when, for example, the user clicks on a button, but it is not possible to launch them automatically when the web page is loaded.
Now let’s see how it is possible to create a simple application that, at the click of a button, allows the sharing of a text and a URL. We create a simple HTML file that contains a button:
We then create an index.js file where to insert the code for the implementation of the sharing functions.
The first operation to do is to listen to the event of clicking on the button. To do this, we can use the following code:
// Recupero il riferimento al bottone e lo salvo in una variabile
var button = document.getElementById('share-button');
// Aggiungo un listener che resta in ascolto del click
// ed esegue la funzione specificata
button.addEventListener('click', function(evt){
evt.preventDefault();
// Qui inserisco il codice per lo share
})
After listening to the click we can proceed with the code to share the desired content.
Given the constant evolution of the web and the lack of support that browsers have for Web Share APIs, it is advisable, as a first step, to check if this feature is supported. To do this we can insert an instruction if like the following:
if (navigator.share !== undefined){
// Qui scriveremo l'effettivo codice per lo share
} else {
// Here I have to decide what to do in case the browser does not support the functionality
}
Web Share API provides a single method sharethat returns a Promise. The method shareis expected as a parameter an object that contains one or more of the following properties: title, text, url. If the promise is fulfilled, the code inside the block is executed then; otherwise, what is specified within the block is performed catch:
navigator.share ({
title: 'Web Share API',
text: 'Read the new HTML.it article',
url: 'http://www.html.it/'
})
.then (// callback call if the share is successful)
.catch (// callback call if an error occurs);
Once the method is invoked, the device will show a native picker for selecting the application to use for sharing information.
A complete code example is available on GitHub. It is also possible to test the code by connecting to this link.
Trying to summarize the information presented, we can say that Web Share APIs facilitate the sharing function on mobile devices by exploiting the native features within a web application. It is necessary to pay particular attention to the constraints (HTTPS, explicit action of the user) and to the lack of support that the browsers currently provide.
