Presentation about the Future of Progressive Web Apps at the Google for Indonesia event in Jakarta, August 2016.

2. Robert Nyman
Developer Relations Program Manager
@robertnyman

3. Apa kabar?

4. Future of Progressive
Web Apps

5. I'm from Sweden

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

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

8. Selamat Datang di Swedia!

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

10. We've come a long way

11. The web is almighty powerful

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

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

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

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

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

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

18. Most popular password in 2015
123456

19. 2nd most popular password in 2015
password

20. Smart Lock for passwords

21. sign-ins assisted per month
8 billion

22. 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?

23. 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!

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

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

26. password

27. auto-generated password
7nUvA8jyowEk44

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

29. Automatic Sign-in

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

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

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

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

34. One-tap Sign-in

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

36. Storing credentials

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

38. Federated log-ins

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

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

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

43. 66%
of purchases on
mobile are on web

44. The web is dead?

45. 66%Fewer conversions on
mobile websites

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

47. Manual Tedious Slow N-taps
Checkout forms today

48. Autofill
Fill web forms
with a single click

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

50. 25 Increase in conversion
rate from Autofill
%

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

52. Imagine a world
without forms...

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

54. Designing PaymentRequest at W3C
Cross-browser

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

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

57. 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 */ });

58. 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 */ });

60. 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)"
}
}
);

61. 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?

63. Connecting with hardware
Credit: https://en.wikipedia.org/wiki/Open-source_hardware

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

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

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

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

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

74. 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); });

75. 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); });

76. Android Developer Options

77. 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); }

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

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

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

83. Robert Nyman
@robertnyman
Terima kasih!