How to get started with the Physical Web and Web Bluetooth

1. Getting Physical
with Web Bluetooth
in the browser
Dan Jenkins
@dan_jenkins

2. @dan_jenkins
Dan Jenkins
@dan_jenkins
nimblea.pe
dan@nimblea.pe
@nimbleapeltd

3. @dan_jenkins
Wouldn't it be
cool to interact
with real life
using JavaScript
In the Browser?

4. @dan_jenkins
Imagine
walking up to
something...

5. @dan_jenkins
And being
able to use it.
With the Web.

6. @dan_jenkins
Drones, BB8,
Fitbits, Adult toys...
Bluetooth Low
Energy

7. @dan_jenkins
Let's take a
step back

8. @dan_jenkins
What is this magic?

9. @dan_jenkins
Physical Web

10. @dan_jenkins
Web Bluetooth

11. @dan_jenkins
Getting
Physical
Physical

12. @dan_jenkins
Ever wished you could "click"
on things in real life and find
out more about them?

13. @dan_jenkins
Been
somewhere
that had
these?

14. @dan_jenkins
They're
everywhere!

15. @dan_jenkins
But there are
many other
places where
we want to
interact with
something
around us

16. @dan_jenkins
The Physical Web

17. @dan_jenkins

18. @dan_jenkins

19. @dan_jenkins
How do I use this magic?

20. @dan_jenkins
Seeing
Physical Web
Notifications

21. @dan_jenkins
Android or
iOS

22. @dan_jenkins
Android iOS
• Location & Bluetooth turned on
• Android "Nearby" enabled (default)
https://android.googleblog.com/2016/06/introducing-nearby-new-way-to-discover.html
• Bluetooth turned on
• Chrome Notifications enabled
(Allow the Chrome widget in
Notification Center)
https://docs.pushmote.com/docs/how-to-enable-chromes-physical-web-extension-on-the-ios

23. @dan_jenkins
Android caveat
They've just rolled back to Chrome doing the Physical
Web notifications in latest Chrome for Android
https://goo.gl/MrAXUw
https://goo.gl/PMwBY2

24. @dan_jenkins
Android caveat
But that'll only be for 6 or so weeks...

25. @dan_jenkins

26. @dan_jenkins
Transmitting
Physical
Web URLs

27. @dan_jenkins
Beacons

28. @dan_jenkins
Apps

29. @dan_jenkins
Anything that can emit using
Bluetooth Low Energy

30. @dan_jenkins
What makes up the Physical Web?

31. @dan_jenkins
Eddystone
•
Open Message Format
•
Eddystone URLs have 18 bytes worth of data that
can be broadcast
•
https://developers.google.com/beacons/eddystone

32. @dan_jenkins
Chrome•
Chrome on iOS and Nearby on Android scans for BLE beacons with
Eddystone URLs
•
Chrome only supports HTTPS URLs
•
Chrome then sends those URLs up to Google's Proxy service
(does some extra magic)
•
The Proxy service then sends those URLs back to Chrome
•
Chrome/Nearby shows a notification
All of this doesn't work unless you have data & location turned on

33. @dan_jenkins

34. @dan_jenkins
And they're being used
today

35. @dan_jenkinshttp://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/

36. @dan_jenkinshttp://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/

37. @dan_jenkins
And there are beacons
here today

38. @dan_jenkins
And you don't have to
use Chrome to get
them
https://www.phy.net/physical-web-browsers/

39. @dan_jenkins
That's great for
linking the
Physical World
to your Phone

40. @dan_jenkins
BUT,
There's more...

41. @dan_jenkins
Web
Bluetooth

42. @dan_jenkins
Your browser can
connect to
Bluetooth Low Energy
(BLE) devices directly

43. @dan_jenkins
Using JavaScript, we
can now connect to
physical devices using
BLE and control them

44. @dan_jenkins

45. @dan_jenkins
BLE (not just toys)
45

46. @dan_jenkins
BLE (not just toys)
46

47. @dan_jenkins
BLE (okay... a fair few toys)
47

48. @dan_jenkins
Stepping back, what is BLE?
•
Low Bandwidth
•
Bluetooth v4 - Bluetooth Low Energy (0.3 Mbps)
•
Bluetooth v3 (54 Mbps)
•
A set of Standard Services
•
But you can also build your own services

49. @dan_jenkins
BLE GATT Server
Gatt Server
Custom ServiceBattery Service
Battery Level
Characteristic
Custom
Characteristic #1
Custom
Characteristic #1

50. @dan_jenkins
Let's take a look at the
Web Bluetooth API

51. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

52. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

53. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

54. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

55. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

56. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

57. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', boop);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function boop(event) { console.log(event.target.value); }

58. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

59. @dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }

60. @dan_jenkins
But what if the device was
broadcasting a URL
where it can be controlled
from?

61. @dan_jenkins

62. @dan_jenkins
Today, there's no way to
bypass that device
selection
Which kinda sucks

63. @dan_jenkins
But that's changing soon too
var referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) {
referringDevice.gatt.connect()
.then(server => { ... })
.catch(error => { console.log(error); });
}

64. @dan_jenkins
But that's changing soon too
var referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) {
referringDevice.gatt.connect()
.then(server => { ... })
.catch(error => { console.log(error); });
}

65. @dan_jenkins
Where can I play with Web
Bluetooth today?
In short.... Chrome/Chromium on...
Android
M & N
ChromeOS Linux
Android L with Chromium
OSX
(Chrome 53)
Windows (a little)

66. @dan_jenkins
But for more info...
https://goo.gl/rDu2UT

67. @dan_jenkins
And you have to enable it...
chrome://flags

68. @dan_jenkins
But there is a Google
Chrome Origin Trial ongoing
https://goo.gl/hzczDR

69. @dan_jenkins
And the Chrome team has
announced their intent to ship in 56
https://goo.gl/KMmjda

70. @dan_jenkins
Oh and only on
Localhost & HTTPS...
There are quite a few hoops!

71. @dan_jenkins
Loads of demos out there
https://webbluetoothcg.github.io/demos/

72. @dan_jenkins
And you can make your own peripherals
BBC micro:bit
Arduino
Tessel
Raspberry Pi 3

73. @dan_jenkins
Developing for Web
Bluetooth has become
easier, for sure; eh.

74. @dan_jenkins
Unless you're
developing on
Windows... but that's
changing too

75. @dan_jenkins
Hardware with BLE is
cheap

76. @dan_jenkins
Your dev environment
just needs to have BLE
(Bluetooth 4)

77. @dan_jenkins
One last
demo

78. @dan_jenkins
Build things
with the Web

79. @dan_jenkins
There are less
and less
reasons to build
native apps

80. @dan_jenkins
goo.gl/7uAtkY
3 great Google I/O videos
about the Physical Web
and Web Bluetooth

81. @dan_jenkins
Thanks!
@dan_jenkins