What's going on with Project Fugu? at DevFest Melbourne

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

API DESIGN @philnash

Slide 8

Slide 8 text

PRIVACY & SECURITY @philnash

Slide 9

Slide 9 text

VENDOR PREFIXES @philnash

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@philnash

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@philnash

Slide 14

Slide 14 text

@philnash

Slide 15

Slide 15 text

BUT @philnash

Slide 16

Slide 16 text

ORIGIN TRIALS @philnash

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

GET ON WITH THE @philnash

Slide 21

Slide 21 text

WAKE LOCK CONTACT PICKER NATIVE FILESYSTEM SHAPE DETECTION @philnash

Slide 22

Slide 22 text

WAKE LOCK @philnash

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

DEMO @philnash

Slide 25

Slide 25 text

RELEASING THE LOCK @philnash

Slide 26

Slide 26 text

Releasing the lock - the old way const abortController = new AbortController(); const signal = abortController.signal; navigator.wakeLock.request('screen', { signal }); // some time later abortController.abort(); // carry on 01. 02. 03. 01. 02. 03. @philnash

Slide 27

Slide 27 text

Aborting fetch 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 28

Slide 28 text

Releasing the lock let wakeLock; try { wakeLock = await navigator.wakeLock.request('screen'); wakeLock.addEventListener('release', () => { console.log('WakeLock released!'); }); } catch(e) { console.log('Could not attach WakeLock'); } window.setTimeout(() => wakeLock.release(), 5000); 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash

Slide 29

Slide 29 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 30

Slide 30 text

CONTACT PICKER API @philnash

Slide 31

Slide 31 text

PRIVATE DATA @philnash

Slide 32

Slide 32 text

@philnash

Slide 33

Slide 33 text

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

Slide 34

Slide 34 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 35

Slide 35 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 36

Slide 36 text

DEMO @philnash

Slide 37

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

Slide 38 text

NATIVE FILE SYSTEM API @philnash

Slide 39

Slide 39 text

Native File System API No file chosen Choose file @philnash

Slide 40

Slide 40 text

Native File System API Save @philnash

Slide 41

Slide 41 text

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

Slide 42

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

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

Slide 44 text

DEMO @philnash

Slide 45

Slide 45 text

PERMISSIONS @philnash

Slide 46

Slide 46 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 47

Slide 47 text

SHAPE DETECTION API @philnash

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

DEMO @philnash

Slide 50

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