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. 6.
  2. 9.

    The bad old days var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame

    || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash
  3. 10.
  4. 12.
  5. 13.
  6. 18.

    Origin Trials • Fixed time limit • Canceled if usage

    > 0.5% • Feature may or may not ship @philnash
  7. 22.
  8. 24.
  9. 25.
  10. 27.

    Page impact: Facebook and Twitter 12 extra requests 5 new

    origins No significant increase in perf metrics @philnash
  11. 34.
  12. 35.
  13. 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
  14. 40.
  15. 42.

    The Web Share Target API Requires a service worker and

    web app manifest Needs to be an installable PWA @philnash
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 60.
  24. 61.
  25. 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
  26. 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
  27. 69.

    Native File System API const getFileHandle = async function() {

    return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash
  28. 70.

    Native File System API const getFileTextContents = async function(fileHandle) {

    const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash
  29. 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
  30. 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
  31. 76.

    Shape Detection API async function getFaces() { const faces =

    await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash