The Future of Progressive Web Apps - View Source conference, Berlin 2016
3 likes14,123 views
The document discusses the future of the web, covering topics like user identification, payments, connecting with hardware, virtual reality, and more. It notes that user identification will improve with autofill and smart lock passwords. Payments will be simplified through the Payment Request API. Connecting with hardware like Bluetooth devices and NFC will allow interaction with physical objects. Virtual reality on the web is progressing with the WebVR API landing in browsers. Overall, the web continues advancing in powerful ways.
![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 */ });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-79-320.jpg)
![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 */ });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-80-320.jpg)
![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)"
}
}
);](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-83-320.jpg)
![var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log(device.name);
...
})
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-95-320.jpg)
![var options = { filters: [{ services: [’battery_service’] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => { ... })
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-96-320.jpg)
![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); });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-97-320.jpg)
![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); });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-98-320.jpg)
![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); }](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-100-320.jpg)
![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" });](https://image.slidesharecdn.com/thefutureofprogressivewebappsviewsource-160914152928/85/The-Future-of-Progressive-Web-Apps-View-Source-conference-Berlin-2016-102-320.jpg)
The Future of Progressive Web Apps - View Source conference, Berlin 2016
- 1. The Future of the Web @robertnyman
- 3. I'm from Sweden Credit: https://www.flickr.com/photos/stephenbove/184201987
- 4. I'm from Sweden Credit: https://www.pinterest.com/pin/313352086545358825/
- 5. Web life Web developer since 1999 Mozilla community from 2009 Mozilla employee 2011-2014
- 10. The web as of today
- 11. Web declared dead in 2010
- 12. Web declared dead in 2010
- 13. Web very much alive in 2016!
- 14. Nov 2015, 800 Million users
- 15. May 2016, 1 Billion users
- 16. The web is dead?
- 17. Apps Credit: http://imgs.xkcd.com/comics/app.png
- 18. Apps
- 19. Web is all browsers
- 20. The web & Chrome
- 21. Web as of today => Progressive Web Apps
- 22. Instant Loading Service Workers Both for offline and poor network situations
- 23. Add to Home Screen Shortcut on Homescreen Install banners
- 24. Push Notifications Re-engagement Relevant, timely, and contextual notifications
- 25. Fast Smooth animations, scrolling and navigation
- 26. Secure HTTPS
- 27. Secure
- 28. Responsive Adapting content to any screen size
- 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
- 30. We've come a long way
- 31. The web is almighty powerful
- 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
- 37. 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
- 38. It's hard to type on a mobile device
- 39. Most popular password in 2015 123456
- 40. 2nd most popular password in 2015 password
- 41. Smart Lock for passwords
- 42. sign-ins assisted per month 8 billion
- 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>
- 47. password
- 49. the Credentials Management API Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg
- 51. navigator.credentials.get({ "password": true, "unmediated": true }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
- 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
- 53. 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
- 54. function signInToYourApplication(c) { fetch("/signin", { "method": "POST", "credentials": c }).then(r => { if (r.status == 200) renderSignedInExperience(r); else renderUsefulErrorMessage(); }); }
- 55. One-tap Sign-in
- 56. navigator.credentials.get({ "password": true }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
- 58. var f = document.querySelector("#form"); var c = new PasswordCredential(f); navigator.credentials.store(c) .then(_ => { // ... });
- 60. var c = new FederatedCredential({ "id": "username", "provider": "https:// accounts.google.com" }); navigator.credentials.store(c) .then(_ => { // ... });
- 61. navigator.credentials .requireUserMediation() .then(_ => { // Sign the user out. }); Logging out
- 63. Paying for things on the web Credit: http://www.publicdomainpictures.net/view-image.php?image=149197
- 64. 66% of purchases on mobile are on web
- 67. 66%Fewer conversions on mobile websites vs. desktop
- 68. Have you ever abandoned a purchase because of the checkout form?
- 69. Manual Tedious Slow N-taps Checkout forms today
- 70. Autofill Fill web forms with a single click
- 71. Card and address saved to Chrome Automatic form detection 95% ACCURACY Form filled automatically How Autofill works XYZ
- 72. 25 Increase in conversion rate from Autofill %
- 73. Manual Tedious Slow N-taps Checkout with Autofill Automatic Simple
- 74. Imagine a world without forms...
- 75. PaymentRequest A W3C API to eliminate checkout forms for users and standardize payment collection for sites
- 76. Designing PaymentRequest at W3C Cross-browser
- 77. Designing PaymentRequest at W3C Cross-browser Open ecosystemCross-platform
- 78. N-tapsSlowManual Tedious Checkout with PaymentRequest Automatic Simple Fast 1-tap
- 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?
- 86. Connecting with hardware Credit: Kenneth Rohde Christiansen
- 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); }
- 101. WebNFC
- 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" });
- 103. Danish hero Kenneth Christiansen - @kennethrohde
- 104. Generic Sensors
- 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); }
- 107. The Physical Web http://www.physical-web.org Credit: https://en.wikipedia.org/wiki/Spider_web
- 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
- 113. Daydream
- 114. Daydream
- 116. VR View
- 117. Oculus CEO & co-founder
- 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
- 119. Credit: https://github.com/alrra/browser-logos
- 120. Working together on making the web better Credit: https://twitter.com/simonnricketts/ status/699198327338987520
- 121. The Future of the Web