$30 off During Our Annual Pro Sale. View Details »

What's going on with Project Fugu? at DevTalks Reimagined

What's going on with Project Fugu? at DevTalks Reimagined

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

Contact Picker API:
https://www.twilio.com/blog/web-contact-picker-api
https://github.com/philnash/contact-picker-twilio-client
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

Phil Nash

June 10, 2020
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. WHAT'S GOING ON
    WITH PROJECT
    FUGU?
    @philnash

    View Slide

  2. Phil Nash
    @philnash
    https://philna.sh
    [email protected]

    View Slide

  3. WHAT'S GOING ON
    WITH PROJECT
    FUGU?
    @philnash

    View Slide

  4. WHAT EVEN IS
    PROJECT FUGU?

    @philnash

    View Slide

  5. @philnash

    View Slide

  6. View Slide

  7. API DESIGN
    @philnash

    View Slide

  8. PRIVACY & SECURITY
    @philnash

    View Slide

  9. VENDOR PREFIXES
    @philnash

    View Slide

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

    View Slide


  11. @philnash

    View Slide

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

    View Slide

  13. @philnash

    View Slide


  14. @philnash

    View Slide

  15. BUT
    @philnash

    View Slide

  16. ORIGIN TRIALS
    @philnash

    View Slide

  17. Origin Trials
    https://developers.chrome.com/origintrials
    https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/
    @philnash

    View Slide

  18. Origin Trials
    http-equiv="origin-trial"
    data-feature="Web Share"
    data-expires="2017-04-17"
    content="AvAvrNEtWccBI18wmx2kSi..."
    >
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash

    View Slide

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

    View Slide

  20. GET ON WITH THE

    @philnash

    View Slide

  21. WAKE LOCK
    CONTACT PICKER
    NATIVE FILESYSTEM
    SHAPE DETECTION
    @philnash

    View Slide

  22. WAKE LOCK
    @philnash

    View Slide

  23. Wake Lock
    screen
    Plans for a system lock are on hold
    @philnash

    View Slide

  24. Acquiring a lock
    let wakeLock;
    try {
    wakeLock = await navigator.wakeLock.request('screen');
    } catch(e) {
    console.log('Could not attach WakeLock');
    }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash

    View Slide

  25. RELEASING THE
    LOCK
    @philnash

    View Slide

  26. 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

    View Slide

  27. Wake Lock: Links
    Wake Lock introduction:
    https://web.dev/wakelock/
    Wake Lock demo:
    https://wake-lock-demo.glitch.me/
    @philnash

    View Slide

  28. CONTACT PICKER API
    @philnash

    View Slide

  29. PRIVATE DATA
    @philnash

    View Slide

  30. @philnash

    View Slide

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

    View Slide

  32. 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

    View Slide

  33. Contact Picker API
    const contact = getContact()
    // => {
    // "email": [],
    // "name": ["Phil Nash"],
    // "tel": ["+61 455 123456", "+44 7712 345678"]
    // }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash

    View Slide

  34. DEMO
    @philnash

    View Slide

  35. Contact Picker API: Links
    Make phone calls with the Contact Picker API:
    https://www.twilio.com/blog/web-contact-picker-api
    Contact Picker API introduction:
    https://web.dev/contact-picker/
    Contact Picker demo:
    https://contact-picker.glitch.me/
    @philnash

    View Slide

  36. IT LAUNCHED

    CHROME 80
    @philnash

    View Slide

  37. NATIVE FILE SYSTEM
    API
    @philnash

    View Slide

  38. Native File System API
    No file chosen
    Choose file
    @philnash

    View Slide

  39. Native File System API
    Save
    @philnash

    View Slide

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

    View Slide

  41. Native File System API
    const getFileTextContents = async function(fileHandle) {
    const file = await fileHandle.getFile();
    return await file.text();
    }
    01.
    02.
    03.
    04.
    @philnash

    View Slide

  42. Native File System API
    async function getNewFileHandle() {
    const opts = {
    type: 'save-file',
    accepts: [{
    extensions: ['txt'],
    mimeTypes: ['text/plain'],
    }],
    };
    return await window.chooseFileSystemEntries(opts);
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    10.
    @philnash

    View Slide

  43. DEMO
    @philnash

    View Slide

  44. PERMISSIONS
    @philnash

    View Slide

  45. 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

    View Slide

  46. SHAPE DETECTION
    API
    @philnash

    View Slide

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

    View Slide

  48. DEMO
    @philnash

    View Slide

  49. Shape Detection API: Links
    Shape Detection API introduction:
    https://web.dev/shape-detection/
    Shape Detection API demo:
    https://shape-detection-demo.glitch.me/
    @philnash

    View Slide

  50. THE WEB HAS A LOT
    TO OFFER
    @philnash

    View Slide

  51. WE NEED TO GET IT
    RIGHT
    @philnash

    View Slide

  52. EXPERIMENT!
    @philnash

    View Slide

  53. FEEDBACK!
    @philnash

    View Slide

  54. Thanks!
    @philnash
    https://philna.sh
    [email protected]

    View Slide