Posted about 3 years ago. Visible to the public. Repeats. Linked content.

JavaScript: Sharing content with the native share dialog

Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an Android or iOS phone. Some desktop OSs like Windows or MacOS also support native share dialogs. See Can I Use Archive for a detailed support matrix.

When clicking a share button using this API, the browser will automatically show all installed applications that support content sharing, such as Whatsapp, Facebook, Twitter, e-mail etc.

The API is extremely simple to use:

Copy
if (typeof navigator.share === 'function') { let data = { url: '<url to share>', title: '<title to share>', text: '<text to share>', } element.addEventListener('click', (event) => { navigator.share(data) event.preventDefault() }) }

If you require feedback, navigator.share will return a promise that resolves or rejects, depending on whether the sharing was completed.

Note that this will only work on https pages, so to test it in development, you will have to start your development server with SSL.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Tobias Kraze
Last edit:
5 days ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more