More Related Content Similar to The Future of Progressive Web Apps - View Source conference, Berlin 2016 (20) More from Robert Nyman (20) The Future of Progressive Web Apps - View Source conference, Berlin 201623. Add to Home Screen
Shortcut on Homescreen
Install banners
29. 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
32. It's just the beginning
What we do now is the beginning
What's needed to play
Table stakes
33. What about the future?
Credit: https://www.flickr.com/photos/mssarakelly/9422242223
35. 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
36. Knowing who the user is
Credit: https://commons.wikimedia.org/wiki/File:Steal_password.jpg
43. 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?
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">
<input type="submit" value="Sign Up!">
</form>
Aha!
45. 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>
46. 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>
49. the Credentials Management API
Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg
52. 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
60. var c = new FederatedCredential({
"id": "username",
"provider": "https://
accounts.google.com"
});
navigator.credentials.store(c)
.then(_ => {
// ...
});
63. Paying for things on the web
Credit: http://www.publicdomainpictures.net/view-image.php?image=149197
71. Card and address
saved to Chrome
Automatic form
detection
95% ACCURACY
Form filled
automatically
How Autofill works
XYZ
79. 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 */ });
80. 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 */ });
83. 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)"
}
}
);
84. 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?
88. 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
94. Basic BLE terms to know...
“Central” device (my phone)
“Peripheral” device (candle)
GATT (Generic ATTribute profile)
95. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log(device.name);
...
})
.catch(error => { console.log(error); });
96. var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => { ... })
.catch(error => { console.log(error); });
97. 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); });
98. 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); });
100. 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); }
102. 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" });
105. let sensor = new DirectTirePressureSensor({ position: "rear", side: "left" });
sensor.onchange = event => console.log(event.reading.pressure);
106. 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);
}
109. /* Awesomeness to come */
var referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) {
referringDevice.gatt.connect()
.then(server => { ... })
.catch(error => { console.log(error); });
}
112. WebVR API 1.0 progress!
Landing in browsers:
Firefox Nightly 2 weeks ago
Chrome later this year
Edge has begun development
118. 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
120. Working together on making the web better Credit: https://twitter.com/simonnricketts/
status/699198327338987520