Web Share API Tutorial — The Coolest But Simple

One of the coolest features nowadays on Website World is the Web Share API, this feature provides the ability to share content on a website like we do share action on native applications.

If previously we depend on widgets like AddThis or ShareThis to share a web content, now the widget can already be replaced by this feature. In my personal opinion, the features offered by Web Share API is so much better.

Unfortunately, this feature can only be enjoyed on the Google Chrome platform only, I really hope the future of all browsers can implement this feature on their platform. Here are more details:

Browser compatibility

How To Use Web Share API

1. Your website must be served over HTTPS

If you are in the development process and attempt to use https:// to try out the features you have applied, I recommend using the service from http://serveo.net, with only 1 command in the command line, your website can be directly served with https:// without installation or registration, it is easy enough:

ssh -R 80:localhost:3000 serveo.net

I’m using ngrok already, need to do installation and registration 😭😭😭

2. You can only invoke the API in response to a user action

You can only invoke the API in response to a user action, such as a click (e.g., you can’t call navigator.share as part of the page load).

<button onclick="shareThis()" id="share">Share This</button>

<script>function shareThis() {//call navigation.share();}</script>

/*** jQuery*/$("#share").click(**function**() { shareThis(); });

Invoke Web Share API on Share Button press.

I found a pretty good resource to handle Web Share API:

Web Share API handling

Final Result!

Conclusion

The Web Share API is a cool feature offered by Google Chrome, but it can not be implemented in other browsers like Safari. I suggest you to provide additional features (e.g AddThis, ShareThis, or create manual function) for other browsers, so your website visitors can still share content on your page.