Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Sharing is Web Caring

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
September 10, 2019

Web Sharing is Web Caring

Third party JavaScript, tracking scripts, iframes! What are you doing with all those share buttons on your site?

The Web Share API is here and you should know about it! It's not just a new API though, it brings benefits to your users you may not have thought of.

What if you want to have things shared to your site though? Then you need to know how to become a Web Share Target. We'll check that out too.

Let's investigate how the web platform is solving problems you didn't know you had and making sharing a more caring part of the web.


The Web Share API: https://philna.sh/blog/2017/03/14/the-web-share-api/
Register as a Web Share Target: https://developers.google.com/web/updates/2018/12/web-share-target
Use the Web Share API easily with web components: https://philna.sh/blog/2018/04/25/web-share-api-with-web-components/
<web-share-wrapper>: https://github.com/philnash/web-share-wrapper


Phil Nash

September 10, 2019

More Decks by Phil Nash

Other Decks in Programming



  2. None
  3. None
  4. Phil Nash @philnash http://philna.sh philnash@twilio.com

  5. @philnash

  6. SHOULD YOU? @philnash

  7. @philnash

  8. @philnash

  9. USER EXPERIENCE @philnash

  10. Page impact: Facebook and Twitter 12 extra requests 5 new

    origins No significant increase in perf metrics @philnash
  11. HIDDEN TRAPS @philnash

  12. Performance Extra data: 244KB (916KB uncompressed) @philnash

  13. Performance No share buttons Share buttons @philnash

  14. Privacy Facebook: 10 cookies Twitter: 20 cookies Both: beacons for

    events @philnash
  15. Design @philnash

  16. LEGAL ISSUES(?) @philnash

  17. @philnash Source: TechCrunch

  18. SOLUTIONS @philnash

  19. Solutions https://twitter.com/intent/tweet https://www.facebook.com/sharer/sharer.php @philnash

  20. @philnash

  21. @philnash

  22. THE WEB SHARE API @philnash

  23. The Web Share API navigator.share({ title: pageTitle, url: url, text:

    shareText }) .then(() => console.log("Share success!")) .catch(() => console.log("Share failure!")); 01. 02. 03. 04. 05. @philnash
  24. The Web Share API Requires HTTPS Requires a user input

  25. DEMO @philnash

  26. @philnash

  27. THE WEB SHARE TARGET API @philnash

  28. The Web Share Target API Requires a service worker and

    web app manifest Needs to be an installable PWA @philnash
  29. The Web Share Target API "share_target": { "action": "/share-target/", "params":

    { "title": "title", "text": "text", "url": "url" } } 01. 02. 03. 04. 05. 06. 07. 08. @philnash
  30. The Web Share Target API window.addEventListener('DOMContentLoaded', () => { const

    parsedUrl = new URL(window.location); console.log('Title shared: ' + parsedUrl.searchParams.get('title')); console.log('Text shared: ' + parsedUrl.searchParams.get('text')); console.log('URL shared: ' + parsedUrl.searchParams.get('url')); }); 01. 02. 03. 04. 05. 06. @philnash
  31. SUPPORT? @philnash

  32. ONE MORE THING... @philnash

  33. <web-share-wrapper> @philnash

  34. <web-share-wrapper> <web-share-wrapper text="share it"> <a href="https://twitter.com/intent/tweet">share it</a> </web-share-wrapper> 01. 02.

    03. @philnash
  35. Web Share API: Links The Web Share API: https://philna.sh/blog/2017/03/14/the-web-share-api/ Registering

    as a web share target: https://developers.google.com/web/updates/2018/12/web-share-target The Web Share API with web components: https://philna.sh/blog/2018/04/25/web-share-api-with-web-components/ @philnash
  36. Thanks! @philnash http://philna.sh philnash@twilio.com