A presentation about the Future of the Web at the Cold Front conference in Copenhagen, Denmark, Sep 1 2016.

1. The Future of the Web
@robertnyman

2. I'm from Sweden
Credit: https://www.flickr.com/photos/stephenbove/184201987

3. I'm from Sweden
Credit: https://www.pinterest.com/pin/313352086545358825/

4. Web life
Web developer since
1999
Mozilla community
from 2009
Mozilla employee
2011-2014

9. The web as of today

10. Web declared dead in 2010

11. Web declared dead in 2010

12. Web very much alive in 2016!

13. Nov 2015, 800 Million users

14. May 2016, 1 Billion users

15. The web is dead?

16. Apps
Credit: http://imgs.xkcd.com/comics/app.png

17. Apps

18. Web is all browsers

19. The web & Chrome

20. Web as of today => Progressive Web Apps

21. Instant Loading
Service Workers
Both for offline and poor
network situations

22. Add to Home Screen
Shortcut on Homescreen
Install banners

23. Push Notifications
Re-engagement
Relevant, timely, and contextual
notifications

24. Fast
Smooth animations, scrolling
and navigation

25. Secure
HTTPS

26. Responsive
Adapting content to any screen size

27. Service workers allow
for offline caching
and instant loading.
Smooth animations,
scrolling and
navigations keep the
experience silky
smooth.
Push notifications
and add to
homescreen help
users re-engage.
HTTPS secures the
connection between you
and your users.
Reliable Fast Engaging Secure
Progressive Web Apps, today

28. We've come a long way

29. The web is almighty powerful

30. It's just the beginning
What we do now is the beginning
What's needed to play
Table stakes

31. What about the future?
Credit: https://www.flickr.com/photos/mssarakelly/9422242223

33. Things we'll talk about today
Knowing who the user is
Credentials Management
Paying for things on the web
Connecting with hardware
Physical Web
WebVR

34. Knowing who the user is
Credit: https://commons.wikimedia.org/wiki/File:Steal_password.jpg

35. Title Text
Password
Forgot password?
Login
LOGIN
Don’t have an account? Sign up!
Did I use that?
$%&§”%$?!
Hm?
Most likely!
Yes, but which one?Email address

36. It's hard to type on a mobile device

37. Most popular password in 2015
123456

38. 2nd most popular password in 2015
password

39. Smart Lock for passwords

40. sign-ins assisted per month
8 billion

41. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text">
<input name="phone" type="text">
<input name="email" type="text">
<input name="password" type="password">
<input type="submit" value="Sign Up!">
</form>
Friendly name?
Identifier?
Idunno?

42. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text" autocomplete="name">
<input name="phone" type="text" autocomplete="home tel">
<input name="email" type="text" autocomplete="username">
<input name="password" type="password">
<input type="submit" value="Sign Up!">
</form>
Aha!

43. Sign In Form
<form id="login" action="login.php" method="post">
<input name="username" type="text" autocomplete="username">
<input name="password" type="password" autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>

44. Sign Up Form
<form id="signup" action="signup.php" method="post">
<input name="display-name" type="text" autocomplete="name">
<input name="phone" type="text" autocomplete="home tel">
<input name="email" type="text" autocomplete="username">
<input name="password" type="password" autocomplete="new-password">
<input type="submit" value="Sign Up!">
</form>

45. password

46. auto-generated password
7nUvA8jyowEk44

47. the Credentials Management API
Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg

48. Automatic Sign-in

49. navigator.credentials.get({
"password": true, "unmediated":
true
}).then(c => {
if (!c) return;
// Hooray, we have a credential!
signInToYourApplication(c);
});

50. Automatic Sign-in
Chrome will offer automatic sign-in if and only if:
✓Automatic sign-in is enabled
✓Only one credential is saved for the site

51. Automatic Sign-in
✓navigator.credentials is
restricted to secure contexts
✓Passwords are not directly
exposed to JavaScript
✓fetch() will only submit
credentials to same-site endpoint

52. function signInToYourApplication(c) {
fetch("/signin", {
"method": "POST", "credentials": c
}).then(r => {
if (r.status == 200)
renderSignedInExperience(r);
else
renderUsefulErrorMessage();
});
}

53. One-tap Sign-in

54. navigator.credentials.get({
"password": true
}).then(c => {
if (!c) return;
// Hooray, we have a credential!
signInToYourApplication(c);
});

55. Storing credentials

56. var f =
document.querySelector("#form");
var c = new PasswordCredential(f);
navigator.credentials.store(c)
.then(_ => {
// ...
});

57. Federated log-ins

58. var c = new FederatedCredential({
"id": "username",
"provider": "https://
accounts.google.com"
});
navigator.credentials.store(c)
.then(_ => {
// ...
});

59. navigator.credentials
.requireUserMediation()
.then(_ => {
// Sign the user
out.
});
Logging out

61. Paying for things on the web
Credit: http://www.publicdomainpictures.net/view-image.php?image=149197

62. 66%
of purchases on
mobile are on web

65. 66%Fewer conversions on
mobile websites vs. desktop

66. Have you ever
abandoned a purchase
because of the
checkout form?

67. Manual Tedious Slow N-taps
Checkout forms today

68. Autofill
Fill web forms
with a single click

69. Card and address
saved to Chrome
Automatic form
detection
95% ACCURACY
Form filled
automatically
How Autofill works
XYZ

70. 25 Increase in conversion
rate from Autofill
%

71. Manual Tedious Slow N-taps
Checkout with Autofill
Automatic Simple

72. Imagine a world
without forms...

73. PaymentRequest
A W3C API to eliminate
checkout forms for users and
standardize payment
collection for sites

74. Designing PaymentRequest at W3C
Cross-browser

75. Designing PaymentRequest at W3C
Cross-browser Open ecosystemCross-platform

76. N-tapsSlowManual Tedious
Checkout with PaymentRequest
Automatic Simple Fast 1-tap

77. new PaymentRequest(
[“visa“, “mastercard“, “amex“, “discover“], {
items: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" }, // $55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" }, // $5.00
},
{
id: "total", label: "Total excluding shipping",
amount: { currencyCode: "USD", value: "60.00" }, // $60.00
}
]
},
{
requestShipping: true
}
).show().then(response => { /* process payment */ }).catch(error => { /* handle */ });

78. new PaymentRequest(
[“visa“, “mastercard“, “amex“, “discover“], {
items: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" }, // $55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" }, // $5.00
},
{
id: "total", label: "Total excluding shipping",
amount: { currencyCode: "USD", value: "60.00" }, // $60.00
}
]
},
{
requestShipping: true
}
).show().then(response => { /* process payment */ }).catch(error => { /* handle */ });

81. var request = new PaymentRequest(
[“visa”, ..., “https://android.com/pay”], // add Android Pay as supported
{
items: [...]
},
{
requestShipping: true
},
{
// add Android Pay application specific parameters
"https://android.com/pay": {
"gateway": "stripe",
"stripe:publishableKey": "put_your_stripe_publishable_key_here",
"stripe:version": "2015-10-16 (latest)"
}
}
);

82. PaymentRequest with
Autofill cards in
Chrome Dev Android
PaymentRequest
available in Chrome
Beta on mobile;
Android Pay
Support for all
platforms & 3rd party
payment apps
May 2016 Aug 2016 Early 2017
When can I use PaymentRequest?

84. Connecting with hardware
Credit: Kenneth Rohde Christiansen

86. The evolution of transfer rates
Wi-Fi (Mbps)
802.11: 2
802.11b: 11
802.11g: 54
802.11n: 135
Ethernet (Mbps)
802.3i: 10
802.3u: 100
802.3ab: 1000
802.3an: 10000
Bluetooth (Mbps)
1.1: 1
2.0: 3
3.0: 54
4.0: 0.3

91. Demo time!
https://webbluetoothcg.github.io/demos/playbulb-candle/

92. Basic BLE terms to know...
“Central” device (my phone)
“Peripheral” device (candle)
GATT (Generic ATTribute profile)

93. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log(device.name);
...
})
.catch(error => { console.log(error); });

94. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => { ... })
.catch(error => { console.log(error); });

95. var options = { filters: [{ services: [’battery_service'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(’battery_service’))
.then(service => service.getCharacteristic(’battery_level’))
.then(characteristic => characteristic.readValue())
.then(value => {
console.log(’Battery percentage is ’ + value.getUint8(0));
})
.catch(error => { console.log(error); });

96. var options = { filters: [{ services: [CANDLE_SERVICE_UUID] }],
optionalServices: ['battery_service'] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(CANDLE_SERVICE_UUID))
.then(service => service.getCharacteristic(CANDLE_COLOR_UUID))
.then(characteristic => {
let data = [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00];
return characteristic.writeValue(new Uint8Array(data));
})
.catch(error => { console.log(error); });

97. Android Developer Options

98. var options = { filters: [{ services: [CANDLE_SERVICE_UUID] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(CANDLE_SERVICE_UUID))
.then(service =>
service.getCharacteristic(CANDLE_BLOW_NOTIFICATIONS_UUID))
.then(characteristic => {
characteristic.addEventListener(’characteristicvaluechanged’, blow);
return characteristic.startNotifications(); })
.catch(error => { console.log(error); });
function blow(event) { console.log(event.target.value); }

99. WebNFC

100. navigator.nfc.watch((message) => {
for (let record of message.data) {
let article =/[aeio]/.test(record.data.title) ? "an" : "a";
console.log(
`$(record.data.name) is $(article) $(record.data.title)`
);
}
}, { url: document.baseURI, recordType: "json" });

101. Your local hero

102. Generic Sensors

103. let sensor = new DirectTirePressureSensor({ position: "rear", side: "left" });
sensor.onchange = event => console.log(event.reading.pressure);

104. try { // No need to feature detect thanks to try..catch block.
let sensor = new GeolocationSensor({});
sensor.start();
sensor.onerror = error => gracefullyDegrade(error);
sensor.onchange = event => updatePosition(event.reading.coords);
} catch(error) {
gracefullyDegrade(error);
}

105. The Physical Web
http://www.physical-web.org
Credit: https://en.wikipedia.org/wiki/Spider_web

107. /* Awesomeness to come */
var referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) {
referringDevice.gatt.connect()
.then(server => { ... })
.catch(error => { console.log(error); });
}

109. Virtual Reality, WebVR

110. WebVR API 1.0 progress!
Landing in browsers:
Firefox Nightly 2 weeks ago
Chrome later this year

111. Daydream

112. Daydream

113. https://aframe.io/

114. VR View

115. Oculus CEO & co-founder

116. Tell us what you need
Report bug
https://crbug.com
Feature status
https://chromestatus.com
Slack
https://goo.gl/jCWx5m
Videos
https://www.youtube.com/user/
ChromeDevelopers
@ChromiumDev

117. Credit: https://github.com/alrra/browser-logos

118. Working together on making the web better Credit: https://twitter.com/simonnricketts/
status/699198327338987520

119. The Future of the Web

120. Robert Nyman
robertnyman.com
nyman@google.com
Google
@robertnyman