Using the native web share JavaScript API

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Did you know there is a native share function you can invoke with JavaScript?
You might have seen them around on the internet. If not, I've added a video demonstration of how it looks.

Interesting in adding this to your website? Follow me along as we build it together.
It's important to note this method does not work on every browser, it's mainly built for mobile devices, but some desktop variants like Safari also support it.
Remember that you should always create your fallback share method when you use this.
The first thing we need to do is see if the current user has support for the navigator.
We can use the in method to check if the navigator holds the share functionality.
The code to determine it looks like this:
if ('share' in navigator) {
console.log('native share available');
} else {
console.log('provide fallback share');
}
Now we can go ahead and add a button to our webpage that we can attach a click to.
<button id="share-button">Share me</button>
We can then fetch the button by its ID.
const shareButton = document.getElementById('share-button');
And attach a listener to it.
shareButton.addEventListener('click', (event) => {
// Do the share action
});
Inside this function, we can invoke the native share or use our fallback share mechanism.
shareButton.addEventListener('click', (event) => {
if ('share' in navigator) {
navigator
.share({
title: 'Look at this native web share',
url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
})
.then(() => {
console.log('Callback after sharing');
})
.catch(console.error);
} else {
console.log('provide fallback share');
}
});
Let's take a closer look at what's going on here.
As you can see, we can even attach callbacks to our native share API. You might want to use it to thank the user for sharing or logging some analytics event.
If you are interested, you can try it out on this CodePen.
{% codepen https://codepen.io/rebelchris/pen/jOzNadp %}
In our example, we set the title and URL option. Let's see what else we can provide.
The web share API accepts the following options:
In total you could provide a object like this:
const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });
navigator.share({
title: 'Web Share',
text: 'Testing out the web share API',
url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
files: [file],
});
Not all systems support this feature. However, most mobile browsers will support it.
Generally, it's recommended to have a custom fallback modal for the share options.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter