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

Project Fugu: Unlocking new capabilities for th...

Project Fugu: Unlocking new capabilities for the Web

The Web is cool! It allows us to deliver content to everyone in the world regardless of their device, platform, or browser of choice. But despite this openness and accessibility, up until now there is still a gap between what the native platform can do and how much of it is available on the Web. This limited access to native capabilities makes certain types of apps difficult, if not impossible, to build on the Web.

Project Fugu aims to change that. This project brings new, powerful, and standardized APIs that will unlock new capabilities for the Web, thus allowing us to develop more amazing experiences. All this while preserving what's already great about the Web.

Learn more about Project Fugu and the different Web platform APIs that come with it in this talk.

Arnelle Balane

November 23, 2019
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. Arnelle Balane Software Developer at Newlogic Google Developers Expert for

    Web Technologies I write about Web stuff on my blog, arnellebalane.com @arnellebalane
  2. Getting a characteristic const device = await navigator.bluetooth.requestDevice({...}); const server

    = await device.gatt.connect(); const service = await server.getPrimaryService('battery_service');
  3. Getting a characteristic const device = await navigator.bluetooth.requestDevice({...}); const server

    = await device.gatt.connect(); const service = await server.getPrimaryService('battery_service'); const characteristic = await service.getCharacteristic('battery_level');
  4. Reading from NFC tag const reader = new NDEFReader(); const

    decoder = new TextDecoder(); await reader.scan();
  5. Reading from NFC tag const reader = new NDEFReader(); const

    decoder = new TextDecoder(); await reader.scan(); reader.onreading = handleNFCReading;
  6. Reading from NFC tag function handleNFCReading(event) { for (const record

    of event.messages.record) { const data = decoder.decode(record.data); // Do something with data } }
  7. Writing to NFC tag const writer = new NDEFWriter(); writer.push({

    records: [{ recordType: 'text', data: 'Hello world!' }] });
  8. Reading data from serial device const decoder = new TextDecoderStream();

    port.readable.pipeTo(decoder.writable); const reader = decoder.readable.getReader(); const data = await reader.read();
  9. Writing data to serial device const encoder = new TextEncoderStream();

    encoder.readable.pipeTo(port.writable); const writer = encoder.writable.getWriter(); await writer.write('Hello world!');
  10. const fileHandle = ...; const file = await fileHandle.getFile(); const

    content = await file.text(); Reading file contents
  11. const fileHandle = ...; const writer = await fileHandle.createWriter(); await

    writer.write(0, 'Hello world!'); await writer.close(); Writing file content
  12. Native File System API Chrome 77 - Behind a flag

    chrome://flags#enable-experimental -web-platform-features Chrome 78 - Origin trial for desktop
  13. Asking for user contacts const properties = ['name', 'name', 'email'];

    const options = {multiple: true}; const contacts = await navigator.contacts.select( properties, options );
  14. Waiting for SMS to be received const sms = await

    navigator.sms.receive(); sms.content; // "For: https://arnelle.me/otp=123456&EvsSSj4C6vl"
  15. Origin Trials Request an origin trial token for your origin

    Add origin trial meta tag <meta http-equiv="origin-trial" content="TOKEN">
  16. Thank you! Project Fugu: Unlocking new capabilities for the Web

    Arnelle Balane Software Developer, Newlogic