On the Web Share API

The Web Share API is awesome! (See our report). Simply put, it takes advantage of the native sharing capabilities of your platform (if the platform supports it).

I like it far better than other methods:

Why?

• The Web Share API requires only a few lines of code and is very simple! There is no need for images, lengthy JavaScript or iframes, and there is no risk of being outdated (ahem, Google).
• The UI that users see will be customized according to their platform, and may even be customized by users themselves, including what they want.

Good web standards!

But not all platforms support it. For example, I'm writing this blog post in Chrome and it doesn't work in desktop Chrome, but it does in desktop Safari!

So if I'm going to use it, I'd rather test the support situation before putting the button on the page. This is very easy:

 if (navigator.share) {
  // Code here}

Here is an example, if the API is supported, I would add a button to the post:

This JavaScript code will be processed a little bit, obtaining the title and the first paragraph of the article for use in the API. I like how Jeremy Keith handles it at the page level:

 if (navigator.share) {
  navigator.share({
    title: document.querySelector('title').textContent,
    text: document.querySelector('meta[name="description"]').getAttribute('content'),
    url: document.querySelector('link[rel="canonical"]').getAttribute('href')
  });
}

You can also pass strings directly to these values. This just shows how to do things dynamically on any page.

Jeremy has also been advocating for an optional JavaScript version of the Web Share API, which he believes can work like this:

 <button onclick="navigator.share(...)">Share</button>

Then, used to specify the title and text:

 <button data-title="..." data-text="...">Share</button>

I think this is a bit strange, using commas. What if the title contains a comma? So what if you specify a URL? Can we split them all into properties? I think I know what Jeremy would say: This is a simple declarative version. If you want to change the default behavior, this is what JavaScript is for.

But, should it exist if the browser does not support it? Of course, if you use polyfill:

This polyfill will turn the button into a mailto: experience without support. This is very clever. I think if I'm in a production environment, I'd probably add the buttons only if the feature is really supported.

The above is the detailed content of On the Web Share API. For more information, please follow other related articles on the PHP Chinese website!