commit
29a68de8a2
1
.gitignore
vendored
1
.gitignore
vendored
@ -4,3 +4,4 @@ npm-debug.log
|
||||
.DS_store
|
||||
.travis/*.key*
|
||||
!.travis/deploy.key.enc
|
||||
package-lock.json
|
||||
|
BIN
src/images/WebShare.jpg
Normal file
BIN
src/images/WebShare.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 45 KiB |
41
src/posts/2017-10-16-simple-sharing.md
Normal file
41
src/posts/2017-10-16-simple-sharing.md
Normal 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).
|
@ -57,7 +57,7 @@
|
||||
</script>
|
||||
<script>
|
||||
if (navigator.share) {
|
||||
[...document.querySelectorAll('.share')].forEach(function(shareButton) {
|
||||
[].slice.call(document.querySelectorAll('.share')).forEach(function(shareButton) {
|
||||
shareButton.classList.add('show');
|
||||
shareButton.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
|
Loading…
Reference in New Issue
Block a user