Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Simple Sharing on the Web With Navigator.Share

DZone's Guide to

Simple Sharing on the Web With Navigator.Share

A Google Developer Advocate breaks news on a new API from the Chrome team that could connect sites with native apps and enable multiple types of sharing.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Many of you know that I am passionate about inter-app communications, specifically the action of sharing. One of the things that I have encouraged anyone who wants to do the next version of Web Intents to do is focus on a very small and specific use case.

Image title

Well Good News Everybody. Matt Giuca on the Chrome team has been working on a simple API (Web Share) that has the potential to connect websites with native apps and it is in Chrome Dev Channel on Android to test. The great thing is that Matt and the team have also been working on making it possible for your own web site or service to be registered as a native share receiver thus enabling web->app sharing, app->web sharing and web->web sharing.

It’s all still in the early stages, but I think it is worth testing out and giving us as much feedback as possible while this is getting developed. You can get all the relevant information at ChromeStatus, but to save you a click here are the important links:

I am incredibly excited by this API. It opens an entirely new part of the ecosystem up to web developers, and if the Sharing API works well then the model can be extended to other app to app interactions.

How to Get This Working

  1. Get Chrome Dev Channel on Android.
  2. Go to any page on my blog and click the share button at the end of each article.
  3. Share.
 navigator.share({title: document.title, text: window.location.href, url: window.location.href})
          .then(() => console.log('Successful share'),
           error => console.log('Error sharing:', error));

Here Is How I Have Integrated It Into My Blog

  1. Check to see if the API is available, if not fallback to my existing solution (https://paul.kinlan.me/sharing-natively-on-android-from-the-web/).
  2. Wait for the content to be available and then find the sharing element.
  3. Intercept and consume the click.
  4. navigator.share()
if(navigator.share !== undefined) {
    document.addEventListener('DOMContentLoaded', e => {
      var shareBtn = document.querySelector('div.share a');
      shareBtn.addEventListener('click', clickEvent => {
        clickEvent.preventDefault();
        navigator.share({title: document.title, text: window.location.href, url: window.location.href})
          .then(() => console.log('Successful share'),
           error => console.log('Error sharing:', error));
      });
    });
}

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
google ,chrome ,api ,sharing

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}