There are a lot of really new and exciting APIs that
navigator exposes. I just came across
navigator.share() that lets you share data like
files by triggering the native share mechanism on the device that you're running this on.
So you call it in your Web Apps and what you get in return are amazing native experiences like this:
Looks great, right? The specification of this Web Share API is still in the draft stage at the moment, and could change in the near future.
The browser support isn't that great either. At the time of writing this article, it's just supported by Desktop Browsers like Edge and Safari, and Mobile Browsers like Chrome and Opera for Android, Safari for iOS, and Samsung Internet.
That being said, you can still try it out and implement it in one of your Web Apps without breaking the world. Let's see how we can do that in some of the most used front-end frameworks(in Alphabatical order 😬) at the moment: Angular, React, Svete, and Vue.
So we'll see implementation of a very simple form that let's the user fill in things like title, url, text, and files, and then depending on whether something is supported by the browser or not, we'll either trigger a native share intent that share just title, url, and text; or something that shares a title, url, and files or just an alert saying the browser doesn't support this.
type="file". And then a function that actually handles the form submission and invokes native share by calling
Since files are involved, we will first have to check if the files that we're trying to share could be shared or not. For that, we'll just use
navigator.canShare(). We'll share the files instead of a
url if it returns
true. Else we'll just share the
url along with
NOTE: For the sake of simplicity, I've implemented things in just one single component. I'm also not explaining things step by step as I usually do to keep it brief. In case you have any trouble understanding anything, please do let me know in the comments below.
You can find a working source for all the mentioned technologies below:
AmbientLightSensor to determine the lighting conditions that the device is being used in, in order to automatically switch themes from Dark to Light or vice-versa. Check it out here:
Hope you found this article interesting/helpful. In case you did, give it a like and share it with your peers who might find this useful. Also comment below mentioning use cases, where you find this useful or if you already have some ideas where you'd use this in your web apps.
Until next time! ✌🏻