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.

Links:

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

Transcript

1. WEB SHARING IS WEB CARING @philnash
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 @philnash
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