Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. WHAT EVEN IS
    PROJECT FUGU?

    @philnash

    View full-size slide

  5. API DESIGN
    @philnash

    View full-size slide

  6. PRIVACY & SECURITY
    @philnash

    View full-size slide

  7. VENDOR PREFIXES
    @philnash

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. BUT
    @philnash

    View full-size slide

  11. ORIGIN TRIALS
    @philnash

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. GET ON WITH THE

    @philnash

    View full-size slide

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

    View full-size slide

  17. WAKE LOCK
    @philnash

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. RELEASING THE
    LOCK
    @philnash

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. CONTACT PICKER API
    @philnash

    View full-size slide

  24. PRIVATE DATA
    @philnash

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. DEMO
    @philnash

    View full-size slide

  29. 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 full-size slide

  30. IT LAUNCHED

    CHROME 80
    @philnash

    View full-size slide

  31. NATIVE FILE SYSTEM
    API
    @philnash

    View full-size slide

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

    View full-size slide

  33. Native File System API
    Save
    @philnash

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. DEMO
    @philnash

    View full-size slide

  38. PERMISSIONS
    @philnash

    View full-size slide

  39. 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 full-size slide

  40. SHAPE DETECTION
    API
    @philnash

    View full-size slide

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

    View full-size slide

  42. DEMO
    @philnash

    View full-size slide

  43. 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 full-size slide

  44. THE WEB HAS A LOT
    TO OFFER
    @philnash

    View full-size slide

  45. WE NEED TO GET IT
    RIGHT
    @philnash

    View full-size slide

  46. EXPERIMENT!
    @philnash

    View full-size slide

  47. FEEDBACK!
    @philnash

    View full-size slide

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

    View full-size slide