What's going on with Project Fugu? at NDC Sydney

Slide 1

Slide 1 text

WHAT'S GOING ON WITH PROJECT FUGU? @philnash

Slide 2

Slide 2 text

Phil Nash @philnash http://philna.sh [email protected]

Slide 3

Slide 3 text

WHAT'S GOING ON WITH PROJECT FUGU? @philnash

Slide 4

Slide 4 text

WHAT EVEN IS PROJECT FUGU? @philnash

Slide 5

Slide 5 text

@philnash

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

PRIVACY & SECURITY @philnash

Slide 8

Slide 8 text

VENDOR PREFIXES @philnash

Slide 9

Slide 9 text

The bad old days var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash

Slide 10

Slide 10 text

@philnash

Slide 11

Slide 11 text

Flags #enable-experimental-web-platform-features @philnash

Slide 12

Slide 12 text

@philnash

Slide 13

Slide 13 text

@philnash

Slide 14

Slide 14 text

BUT @philnash

Slide 15

Slide 15 text

ORIGIN TRIALS @philnash

Slide 16

Slide 16 text

Origin Trials https://developers.chrome.com/origintrials @philnash

Slide 17

Slide 17 text

Origin Trials 01. 02. 03. 04. 05. 06. @philnash

Slide 18

Slide 18 text

Origin Trials • Fixed time limit • Canceled if usage > 0.5% • Feature may or may not ship @philnash

Slide 19

Slide 19 text

GET ON WITH THE @philnash

Slide 20

Slide 20 text

WEB SHARE WAKE LOCK CONTACT PICKER NATIVE FILESYSTEM SHAPE DETECTION @philnash

Slide 21

Slide 21 text

WEB SHARE API @philnash

Slide 22

Slide 22 text

@philnash

Slide 23

Slide 23 text

SHOULD YOU? @philnash

Slide 24

Slide 24 text

@philnash

Slide 25

Slide 25 text

@philnash

Slide 26

Slide 26 text

USER EXPERIENCE @philnash

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Performance No share buttons Share buttons @philnash

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Design @philnash

Slide 32

Slide 32 text

SOLUTIONS @philnash

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@philnash

Slide 35

Slide 35 text

@philnash

Slide 36

Slide 36 text

THE WEB SHARE API @philnash

Slide 37

Slide 37 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 38

Slide 38 text

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

Slide 39

Slide 39 text

DEMO @philnash

Slide 40

Slide 40 text

@philnash

Slide 41

Slide 41 text

THE WEB SHARE TARGET API @philnash

Slide 42

Slide 42 text

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

Slide 43

Slide 43 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 44

Slide 44 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 45

Slide 45 text

DEMO @philnash

Slide 46

Slide 46 text

SUPPORT? @philnash

Slide 47

Slide 47 text

@philnash

Slide 48

Slide 48 text

share it 01. 02. 03. @philnash

Slide 49

Slide 49 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 50

Slide 50 text

WAKE LOCK @philnash

Slide 51

Slide 51 text

Wake Lock screen or system system doesn't work yet @philnash

Slide 52

Slide 52 text

DEMO @philnash

Slide 53

Slide 53 text

ABORTING REQUESTS @philnash

Slide 54

Slide 54 text

Aborting requests const abortController = new AbortController(); WakeLock.request('screen', { signal: abortController.signal }); Some time later abortController.abort(); // carry on 01. 02. 01. 02. @philnash

Slide 55

Slide 55 text

Aborting requests const abortController = new AbortController(); let wakeLock = true; WakeLock.request('screen', { signal: abortController.signal }) .catch(e => { if (e.name === 'AbortError') { wakeLock = false; } }); 01. 02. 03. 04. 05. 06. 07. 08. @philnash

Slide 56

Slide 56 text

Aborting requests const abortController = new AbortController(); fetch(url, { signal: abortController.signal }) .then(res => res.json()) .catch(e => { if (e.name === 'AbortError') { // fetch was aborted } }); 01. 02. 03. 04. 05. 06. 07. 08. @philnash

Slide 57

Slide 57 text

Wake Lock: Links Wake Lock introduction: https://developers.google.com/web/updates/2018/12/wakelock Wake Lock demo: https://wake-lock-demo.glitch.me/ AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController @philnash

Slide 58

Slide 58 text

CONTACT PICKER API @philnash

Slide 59

Slide 59 text

PRIVATE DATA @philnash

Slide 60

Slide 60 text

@philnash

Slide 61

Slide 61 text

Contact Picker API const supported = ('contacts' in navigator && 'ContactsManager' in window); @philnash

Slide 62

Slide 62 text

Contact Picker API async function getContact() { const props = ['name', 'tel', 'email']; const opts = { multiple: false }; const contacts = await navigator.contacts.select(props, opts); return contacts[0]; } 01. 02. 03. 04. 05. 06. @philnash

Slide 63

Slide 63 text

Contact Picker API const contact = getContact() // => { // "email": [], // "name": ["Phil Nash"], // "tel": ["+61 455 123456", "+44 7712 345678"] // } 01. 02. 03. 04. 05. 06. @philnash

Slide 64

Slide 64 text

DEMO @philnash

Slide 65

Slide 65 text

Contact Picker API: Links Contact Picker API introduction: https://developers.google.com/web/updates/2019/08/contact-picker Contact Picker demo: https://contact-picker.glitch.me/ @philnash

Slide 66

Slide 66 text

NATIVE FILE SYSTEM API @philnash

Slide 67

Slide 67 text

Native File System API No file chosen Choose file @philnash

Slide 68

Slide 68 text

Native File System API Save @philnash

Slide 69

Slide 69 text

Native File System API const getFileHandle = async function() { return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash

Slide 70

Slide 70 text

Native File System API const getFileTextContents = async function(fileHandle) { const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash

Slide 71

Slide 71 text

Native File System API async function getNewFileHandle() { const opts = { type: 'saveFile', accepts: [{ extensions: ['txt'], mimeTypes: ['text/plain'], }], }; return await window.chooseFileSystemEntries(opts); } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. @philnash

Slide 72

Slide 72 text

DEMO @philnash

Slide 73

Slide 73 text

PERMISSIONS @philnash

Slide 74

Slide 74 text

Native File System API: Links Native File System API introduction: https://developers.google.com/web/updates/2019/08/native-ﬁle-system Native File System demo: https://googlechromelabs.github.io/text-editor/ @philnash

Slide 75

Slide 75 text

SHAPE DETECTION API @philnash

Slide 76

Slide 76 text

Shape Detection API async function getFaces() { const faces = await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash

Slide 77

Slide 77 text

DEMO @philnash

Slide 78

Slide 78 text

Shape Detection API: Links Shape Detection API introduction: https://developers.google.com/web/updates/2019/01/shape-detection Shape Detection API demo: https://shape-detection-demo.glitch.me/ @philnash