Introduction to the Web Share API: Usage, Syntax, and Browser Support

The Web Share API is a simple interface that allows web pages to invoke the operating system's native sharing component, enabling users to share titles, text, and URLs directly from a website to other apps.

It provides a single method, navigator.share() , which returns a Promise and accepts an object containing at least one of the fields title , text , or url . Currently only plain‑text sharing is supported, with future plans for images and binary files.

When a user clicks a share button on the page, the browser displays the native share sheet at the bottom of the screen, matching the interaction style of iOS and Android platforms.

The syntax is straightforward: navigator.share(options) . The options object must include one or more of the following properties: title (string), text (string), and url (string, defaults to the current page URL if empty).

The method returns a Promise that resolves on successful sharing and rejects if the user cancels, the parameters are invalid, or the data cannot be transferred to the target application.

Example code (ES6): shareButton.addEventListener('click', () => { if (navigator.share) { navigator.share({ title: 'Web Share Test', text: 'Some text', url: 'https://www.test.com/' }) .then(() => console.log('Successful share')) .catch(error => console.log('Error sharing', error)); } });

Browser support is limited: it works on Android Chrome version 61+; iOS Chrome and all desktop browsers do not support it yet, making it primarily a mobile‑only feature.

To use the API, the site must be served over HTTPS, the call must be triggered by a user gesture, and only URLs within the same site or plain text can be shared. Developers should perform feature detection before invoking the API.

For a live demo, visit https://hospodarets.com/demos/web-share-api/ . If the page shows a message that the API is unsupported, the browser does not yet support Web Share.

In conclusion, the Web Share API offers a simple way to add native sharing to H5 pages, enhancing user experience on mobile devices. Future articles may explore receiving shared data from other apps.

Additional resources: https://wicg.github.io/web-share/ https://philna.sh/blog/2017/03/14/the-web-share-api/ https://philna.sh/blog/2018/04/25/web-share-api-with-web-components/