Slide 1

Slide 1 text

WEB SHARING IS WEB CARING @philnash

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Phil Nash @philnash http://philna.sh philnash@twilio.com

Slide 5

Slide 5 text

@philnash

Slide 6

Slide 6 text

SHOULD YOU? @philnash

Slide 7

Slide 7 text

@philnash

Slide 8

Slide 8 text

@philnash

Slide 9

Slide 9 text

USER EXPERIENCE @philnash

Slide 10

Slide 10 text

Page impact: Facebook and Twitter 12 extra requests 5 new origins No significant increase in perf metrics @philnash

Slide 11

Slide 11 text

HIDDEN TRAPS @philnash

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Performance No share buttons Share buttons @philnash

Slide 14

Slide 14 text

Privacy Facebook: 10 cookies Twitter: 20 cookies Both: beacons for events @philnash

Slide 15

Slide 15 text

Design @philnash

Slide 16

Slide 16 text

LEGAL ISSUES(?) @philnash

Slide 17

Slide 17 text

@philnash Source: TechCrunch

Slide 18

Slide 18 text

SOLUTIONS @philnash

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@philnash

Slide 21

Slide 21 text

@philnash

Slide 22

Slide 22 text

THE WEB SHARE API @philnash

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

The Web Share API Requires HTTPS Requires a user input @philnash

Slide 25

Slide 25 text

DEMO @philnash

Slide 26

Slide 26 text

@philnash

Slide 27

Slide 27 text

THE WEB SHARE TARGET API @philnash

Slide 28

Slide 28 text

The Web Share Target API Requires a service worker and web app manifest Needs to be an installable PWA @philnash

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

SUPPORT? @philnash

Slide 32

Slide 32 text

ONE MORE THING... @philnash

Slide 33

Slide 33 text

@philnash

Slide 34

Slide 34 text

share it 01. 02. 03. @philnash

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Thanks! @philnash http://philna.sh philnash@twilio.com