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

Project Fugu: Unlocking new capabilities for the Web

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.

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

November 23, 2019
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. Project Fugu Unlocking new capabilities for the Web Arnelle Balane

    Software Developer, Newlogic
  2. Arnelle Balane Software Developer at Newlogic Google Developers Expert for

    Web Technologies I write about Web stuff on my blog, arnellebalane.com @arnellebalane
  3. Static “Static” and “Dynamic” illustrations from undraw.co

  4. “Static” and “Dynamic” illustrations from undraw.co Static Dynamic

  5. “Static” and “Dynamic” illustrations from undraw.co Static Dynamic Fast Reliable

    Engaging
  6. App Gap Photo by Cody Hiscox on Unsplash

  7. Bridging the gap between native and Web capabilities Project Fugu

  8. Discover and communicate with nearby Bluetooth Low Energy (BLE) devices

    Web Bluetooth
  9. Batmobile image from lego.com GATT Server Service Service Characteristic Characteristic

    Characteristic Characteristic
  10. const device = await navigator.bluetooth.requestDevice({...}); Connecting to BLE device

  11. const device = await navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }]

    }); Connecting to BLE device
  12. None
  13. Getting a characteristic const device = await navigator.bluetooth.requestDevice({...}); const server

    = await device.gatt.connect();
  14. Getting a characteristic const device = await navigator.bluetooth.requestDevice({...}); const server

    = await device.gatt.connect(); const service = await server.getPrimaryService('battery_service');
  15. 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');
  16. const characteristic = ...; const batteryLevel = await characteristic.readValue(); Reading

    characteristic value
  17. const characteristic = ...; const newValue = Uint8Array.of(1); await characteristic.writeValue(newValue);

    Writing characteristic value
  18. const characteristic = ...; await characteristic.startNotifications(); Subscribing to value changes

  19. const characteristic = ...; await characteristic.startNotifications(); characteristic.oncharacteristicvaluechanged = handleCharacteristicValueChanged; Subscribing

    to value changes
  20. Web Bluetooth API ✅ Chrome 56 ✅ Samsung Internet 6.2

  21. None
  22. googlechrome.github.io/samples/web-bluetooth

  23. chrome://bluetooth-internals

  24. BLE Peripheral Simulator

  25. Interact with NFC devices Web NFC

  26. const reader = new NDEFReader(); const decoder = new TextDecoder();

    Reading from NFC tag
  27. Reading from NFC tag const reader = new NDEFReader(); const

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

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

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

  31. Writing to NFC tag const writer = new NDEFWriter(); writer.push({

    records: [{ recordType: 'text', data: 'Hello world!' }] });
  32. Web NFC API Chrome 78 - Behind a flag chrome://flags#enable-webnfc

  33. None
  34. web-nfc-demo.glitch.me

  35. Communicate with microcontrollers and other serial devices Web Serial

  36. const port = await navigator.serial.requestPort(); Opening a serial port

  37. None
  38. const port = await navigator.serial.requestPort(); await port.open(); Opening a serial

    port
  39. const decoder = new TextDecoderStream(); port.readable.pipeTo(decoder.writable); Reading data from serial

    device
  40. Reading data from serial device const decoder = new TextDecoderStream();

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

    device
  42. Writing data to serial device const encoder = new TextEncoderStream();

    encoder.readable.pipeTo(port.writable); const writer = encoder.writable.getWriter(); await writer.write('Hello world!');
  43. Chrome 77 - Behind a flag chrome://flags#enable-experimental -web-platform-features Web Serial

    API
  44. codelabs.developers.google.com/codelabs/web-serial

  45. Prevent the device from turning off its screen or going

    to sleep Wake Lock
  46. const wakeLock = await navigator.wakeLock.request('screen'); Requesting a lock

  47. const wakeLock = await navigator.wakeLock.request('screen'); Requesting a lock screen system

  48. wakeLock.release(); wakeLock = null; Releasing a lock

  49. Releasing a lock wakeLock.release(); wakeLock = null; wakeLock.onrelease = handleRelease;

  50. Chrome 77 - Behind a flag chrome://flags#enable-experimental -web-platform-features Chrome 79

    - Origin trial Wake Lock API
  51. web.dev/wakelock

  52. Read and save files and folders directly on the user’s

    device Native File System
  53. const fileHandle = await window.chooseFileSystemEntries({ type: 'openFile' }); Opening a

    file
  54. openDirectory saveFile const fileHandle = await window.chooseFileSystemEntries({ type: 'openFile' });

    Opening a file openFile
  55. None
  56. const fileHandle = ...; const file = await fileHandle.getFile(); const

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

    file content
  58. const fileHandle = ...; const writer = await fileHandle.createWriter(); await

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

    chrome://flags#enable-experimental -web-platform-features Chrome 78 - Origin trial for desktop
  61. googlechromelabs.github.io/text-editor

  62. web.dev/native-file-system

  63. Allow users to select and share details from their contacts

    lists to our app Contact Picker
  64. None
  65. const properties = ['name', 'name', 'email']; const options = {multiple:

    true}; Asking for user contacts
  66. Asking for user contacts const properties = ['name', 'name', 'email'];

    const options = {multiple: true}; const contacts = await navigator.contacts.select( properties, options );
  67. Asking for user contacts [{ name: ['Arnelle Balane'], email: ['arnellebalane@gmail.com'],

    tel: ['0919 123 4567'] }]
  68. Contact Picker API Chrome 77 - Behind a flag chrome://flags#enable-experimental

    -web-platform-features Chrome 77 - Origin trial
  69. contact-picker.glitch.me

  70. Be notified when specially-formatted messages are received by the device

    SMS Receiver
  71. None
  72. const sms = await navigator.sms.receive(); Waiting for SMS to be

    received
  73. Waiting for SMS to be received const sms = await

    navigator.sms.receive(); sms.content; // "For: https://arnelle.me/otp=123456&EvsSSj4C6vl"
  74. SMS Format For: https://arnelle.me/otp=123456&EvsSSj4C6vl

  75. SMS Format For: https://arnelle.me/otp=123456&EvsSSj4C6vl always start with “For:” the origin

    that invoked the API the OTP browser APK hash string
  76. SMS Receiver API Chrome 77 - Behind a flag chrome://flags#enable-experimental

    -web-platform-features Chrome 78 - Origin trial
  77. sms-receiver-demo.glitch.me

  78. youtu.be/WxXF17k1dko

  79. None
  80. Enable certain APIs for your users without making them enable

    browser flags Origin Trials
  81. developers.chrome.com/origintrials

  82. Origin Trials Request an origin trial token for your origin

    Add origin trial meta tag <meta http-equiv="origin-trial" content="TOKEN">
  83. Have a suggestion for a capability? File a feature request

    at goo.gl/qWhHXU
  84. Thank you! Project Fugu: Unlocking new capabilities for the Web

    Arnelle Balane Software Developer, Newlogic