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.

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