What's going on with Project Fugu? at MelbJS

The fugu, or pufferfish, is a toxic, potentially lethal delicacy that, prepared correctly, is a culinary masterpiece.

The web platform is less deadly, but still requires careful preparation when incubating new features. Project Fugu is the Chrome team's initiative to bring more power to the platform. Many of the experiments are trials or behind flags to ensure they are being prepared correctly.

In this session we'll investigate the features that are coming out of the Fugu kitchen, have a taste of some that are nearly ready and take a peek into the future to see what's in store for 2020. By the end you'll be equipped with the features to make your web application a masterpiece too.

---

Links:

All the open Origin Trials: https://developers.chrome.com/origintrials/#/trials/active

Wake Lock API:
https://web.dev/wakelock/
https://wake-lock-demo.glitch.me
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Contact Picker API:
https://web.dev/contact-picker/
https://contact-picker.glitch.me/

Native File System API:
https://web.dev/native-file-system/
https://googlechromelabs.github.io/text-editor/

Shape Detection API:
https://web.dev/shape-detection/
https://shape-detection-demo.glitch.me

Transcript

1. WHAT'S GOING ON WITH PROJECT FUGU? @philnash
2. Phil Nash @philnash https://philna.sh philnash@twilio.com
3. WHAT'S GOING ON WITH PROJECT FUGU? @philnash
4. WHAT EVEN IS PROJECT FUGU? @philnash
6. @philnash
7. API DESIGN @philnash
8. PRIVACY & SECURITY @philnash
9. VENDOR PREFIXES @philnash
10. The bad old days var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash
11. @philnash
12. Flags #enable-experimental-web-platform-features @philnash
13. @philnash
14. @philnash
15. BUT @philnash
16. ORIGIN TRIALS @philnash
17. Origin Trials https://developers.chrome.com/origintrials @philnash
18. Origin Trials <meta http-equiv="origin-trial" data-feature="Web Share" data-expires="2017-04-17" content="AvAvrNEtWccBI18wmx2kSi..." > 01. 02. 03. 04. 05. 06. @philnash
19. Origin Trials • Fixed time limit • Canceled if usage > 0.5% • Feature may or may not ship @philnash
20. GET ON WITH THE @philnash
21. WAKE LOCK CONTACT PICKER NATIVE FILESYSTEM SHAPE DETECTION @philnash
22. WAKE LOCK @philnash
23. Wake Lock screen or system system doesn't work yet @philnash
24. DEMO @philnash
25. RELEASING THE LOCK @philnash
26. 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
27. 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
28. 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
29. Wake Lock: Links Wake Lock introduction: https://web.dev/wakelock/ Wake Lock demo: https://wake-lock-demo.glitch.me/ AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController @philnash
30. CONTACT PICKER API @philnash
31. PRIVATE DATA @philnash
32. @philnash
33. Contact Picker API const supported = ('contacts' in navigator && 'ContactsManager' in window); @philnash
34. 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
35. Contact Picker API const contact = getContact() // => { // "email": [], // "name": ["Phil Nash"], // "tel": ["+61 455 123456", "+44 7712 345678"] // } 01. 02. 03. 04. 05. 06. @philnash
36. DEMO @philnash
37. Contact Picker API: Links Contact Picker API introduction: https://web.dev/contact-picker/ Contact Picker demo: https://contact-picker.glitch.me/ @philnash
38. IT LAUNCHED CHROME 80 @philnash
39. NATIVE FILE SYSTEM API @philnash
40. Native File System API No file chosen Choose file @philnash
41. Native File System API <a download href="blob:...">Save</a> @philnash
42. Native File System API const getFileHandle = async function() { return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash
43. Native File System API const getFileTextContents = async function(fileHandle) { const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash
44. 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
45. DEMO @philnash
46. PERMISSIONS @philnash
47. Native File System API: Links Native File System API introduction: https://web.dev/native-file-system/ Native File System demo: https://googlechromelabs.github.io/text-editor/ @philnash
48. SHAPE DETECTION API @philnash
49. Shape Detection API async function getFaces() { const faces = await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash
50. DEMO @philnash
51. Shape Detection API: Links Shape Detection API introduction: https://web.dev/shape-detection/ Shape Detection API demo: https://shape-detection-demo.glitch.me/ @philnash
52. THE WEB HAS A LOT TO OFFER @philnash
53. WE NEED TO GET IT RIGHT @philnash
54. EXPERIMENT! @philnash
55. FEEDBACK! @philnash
56. Thanks! @philnash https://philna.sh philnash@twilio.com