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

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
October 17, 2019

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

October 17, 2019
Tweet

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

  6. None
  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