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

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

Web Share API:
https://philna.sh/blog/2017/03/14/the-web-share-api/
https://developers.google.com/web/updates/2018/12/web-share-target
https://philna.sh/blog/2018/04/25/web-share-api-with-web-components/

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

Native File System API:
https://developers.google.com/web/updates/2019/08/native-file-system
https://googlechromelabs.github.io/text-editor/

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

Transcript

1. WHAT'S GOING ON WITH PROJECT FUGU? @philnash
2. Phil Nash @philnash http://philna.sh philnash@twilio.com
3. WHAT'S GOING ON WITH PROJECT FUGU? @philnash
4. WHAT EVEN IS PROJECT FUGU? @philnash
5. @philnash
7. PRIVACY & SECURITY @philnash
8. VENDOR PREFIXES @philnash
9. The bad old days var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash
10. @philnash
11. Flags #enable-experimental-web-platform-features @philnash
12. @philnash
13. @philnash
14. BUT @philnash
15. ORIGIN TRIALS @philnash
16. Origin Trials https://developers.chrome.com/origintrials @philnash
17. 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
18. Origin Trials • Fixed time limit • Canceled if usage > 0.5% • Feature may or may not ship @philnash
19. GET ON WITH THE @philnash
20. WEB SHARE WAKE LOCK CONTACT PICKER NATIVE FILESYSTEM SHAPE DETECTION @philnash
21. WEB SHARE API @philnash
22. @philnash
23. SHOULD YOU? @philnash
24. @philnash
25. @philnash
26. USER EXPERIENCE @philnash
27. Page impact: Facebook and Twitter 12 extra requests 5 new origins No significant increase in perf metrics @philnash
28. Performance Extra data: 244KB (916KB uncompressed) @philnash
29. Performance No share buttons Share buttons @philnash
30. Privacy Facebook: 10 cookies Twitter: 20 cookies Both: beacons for events @philnash
31. Design @philnash
32. SOLUTIONS @philnash
33. Solutions https://twitter.com/intent/tweet https://www.facebook.com/sharer/sharer.php @philnash
34. @philnash
35. @philnash
36. THE WEB SHARE API @philnash
37. 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
38. The Web Share API Requires HTTPS Requires a user input @philnash
39. DEMO @philnash
40. @philnash
41. THE WEB SHARE TARGET API @philnash
42. The Web Share Target API Requires a service worker and web app manifest Needs to be an installable PWA @philnash
43. 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
44. 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
45. DEMO @philnash
46. SUPPORT? @philnash
47. <web-share-wrapper> @philnash
48. <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
49. 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
50. WAKE LOCK @philnash
51. Wake Lock screen or system system doesn't work yet @philnash
52. DEMO @philnash
53. ABORTING REQUESTS @philnash
54. Aborting requests const abortController = new AbortController(); WakeLock.request('screen', { signal: abortController.signal }); Some time later abortController.abort(); // carry on 01. 02. 01. 02. @philnash
55. 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
56. 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
57. 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
58. CONTACT PICKER API @philnash
59. PRIVATE DATA @philnash
60. @philnash
61. Contact Picker API const supported = ('contacts' in navigator && 'ContactsManager' in window); @philnash
62. 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
63. Contact Picker API const contact = getContact() // => { // "email": [], // "name": ["Phil Nash"], // "tel": ["+61 455 123456", "+44 7712 345678"] // } 01. 02. 03. 04. 05. 06. @philnash
64. DEMO @philnash
65. 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
66. NATIVE FILE SYSTEM API @philnash
67. Native File System API No file chosen Choose file @philnash
68. Native File System API <a download href="blob:...">Save</a> @philnash
69. Native File System API const getFileHandle = async function() { return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash
70. Native File System API const getFileTextContents = async function(fileHandle) { const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash
71. 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
72. DEMO @philnash
73. PERMISSIONS @philnash
74. Native File System API: Links Native File System API introduction: https://developers.google.com/web/updates/2019/08/native-file-system Native File System demo: https://googlechromelabs.github.io/text-editor/ @philnash
75. SHAPE DETECTION API @philnash
76. Shape Detection API async function getFaces() { const faces = await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash
77. DEMO @philnash
78. 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
79. THE WEB HAS A LOT TO OFFER @philnash
80. WE NEED TO GET IT RIGHT @philnash
81. EXPERIMENT! @philnash
82. Thanks! @philnash http://philna.sh philnash@twilio.com