Merge pull request #9 from AverageMarcus/post/webshare

Post/webshare

.gitignore

@@ -4,3 +4,4 @@ npm-debug.log
 .DS_store
 .travis/*.key*
 !.travis/deploy.key.enc
+package-lock.json

src/posts/2017-10-16-simple-sharing.md

@@ -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).

templates/post.html

@@ -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();