Added post about Web Share API

This commit is contained in:
Marcus Noble 2017-10-17 07:07:12 +01:00
parent 9a04d3481d
commit c2402487ab
2 changed files with 41 additions and 0 deletions

BIN
src/images/WebShare.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1,41 @@
---
layout: post.html
title: Simple sharing
date: 2017-10-16
tags:
summary:
---
The line between the web and native applications is becoming more and more blurred. One of the latest goodies to land in browsers that gives our users a consistent, seamless experience is the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) currently only [available in Chrome](https://caniuse.com/#feat=web-share).
There are a couple requirements in order to use the Web Share API. Firstly, as with a lot of the new browser features, your site must be served over HTTPS. Second, you can only trigger the share UI as part of a user interaction, such as a click. You can share any URL you want, it doesn't have to just be the page your user is currently on.
As support is very limited you should use feature detection to make sure the browser supports it before showing the share button to your user.
```javascript
if (navigator.share) {
// We're good to go
useNativeShare();
} else {if (navigator.share) {
// Web Share API isn't supported, we can fall back to classic methods such as a share button for each social platform
useFallbackShare();
}
```
You can trigger the native dialog by calling `navigator.share()` from a user interaction event. You have the option of setting the URL, title and a bit of text to share. All properties are optional but at least one must be provided.
```javascript
function useNativeShare() {
shareButton.addEventListener('click', function(event) {
event.preventDefault();
navigator.share({
url: window.location.href,
title: document.title,
text: "Check this out! You wouldn't believe what happens..."
});
});
}
```
{{> picture url="/images/WebShare.jpg" alt="Example Web Share API Dialog" caption="Native UI" }}
You can read more about the Web Share API from [Google Developers](https://developers.google.com/web/updates/2016/09/navigator-share).