Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Future of Progressive Web Apps - View Source conference, Berlin 2016

7,142 views

Published on

Keynote from the View Source conference in Berlin, Sep 14th 2016.

Published in: Technology
  • Be the first to comment

The Future of Progressive Web Apps - View Source conference, Berlin 2016

  1. The Future of the Web @robertnyman
  2. Willkommen nach Deutschland
  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
  6. The web as of today
  7. Web declared dead in 2010
  8. Web declared dead in 2010
  9. Web very much alive in 2016!
  10. Nov 2015, 800 Million users
  11. May 2016, 1 Billion users
  12. The web is dead?
  13. Apps Credit: http://imgs.xkcd.com/comics/app.png
  14. Apps
  15. Web is all browsers
  16. The web & Chrome
  17. Web as of today => Progressive Web Apps
  18. Instant Loading Service Workers Both for offline and poor
 network situations
  19. Add to Home Screen Shortcut on Homescreen Install banners
  20. Push Notifications Re-engagement Relevant, timely, and contextual notifications
  21. Fast Smooth animations, scrolling 
 and navigation
  22. Secure HTTPS
  23. Secure
  24. Responsive Adapting content to any screen size
  25. 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
  26. We've come a long way
  27. The web is almighty powerful
  28. It's just the beginning What we do now is the beginning What's needed to play Table stakes
  29. What about the future? Credit: https://www.flickr.com/photos/mssarakelly/9422242223
  30. 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
  31. Knowing who the user is Credit: https://commons.wikimedia.org/wiki/File:Steal_password.jpg
  32. 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
  33. It's hard to type on a mobile device
  34. Most popular password in 2015 123456
  35. 2nd most popular password in 2015 password
  36. Smart Lock for passwords
  37. sign-ins assisted per month 8 billion
  38. 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?
  39. 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!
  40. 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>
  41. 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>
  42. password
  43. auto-generated password 7nUvA8jyowEk44
  44. the Credentials Management API Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg
  45. Automatic Sign-in
  46. navigator.credentials.get({
 "password": true, "unmediated": true
 }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
  47. 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
  48. 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
  49. function signInToYourApplication(c) {
 fetch("/signin", { "method": "POST", "credentials": c }).then(r => { if (r.status == 200) renderSignedInExperience(r); else renderUsefulErrorMessage(); }); }
  50. One-tap Sign-in
  51. navigator.credentials.get({
 "password": true }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
  52. Storing credentials
  53. var f = document.querySelector("#form"); var c = new PasswordCredential(f); navigator.credentials.store(c) .then(_ => { // ... });
  54. Federated log-ins
  55. var c = new FederatedCredential({ "id": "username", "provider": "https:// accounts.google.com" }); navigator.credentials.store(c) .then(_ => { // ... });
  56. navigator.credentials .requireUserMediation() .then(_ => { // Sign the user out. }); Logging out
  57. Paying for things on the web Credit: http://www.publicdomainpictures.net/view-image.php?image=149197
  58. 66% of purchases on mobile are on web
  59. 66%Fewer conversions on mobile websites vs. desktop
  60. Have you ever abandoned a purchase because of the checkout form?
  61. Manual Tedious Slow N-taps Checkout forms today
  62. Autofill Fill web forms 
 with a single click
  63. Card and address saved to Chrome Automatic form detection 95% ACCURACY Form filled automatically How Autofill works XYZ
  64. 25 Increase in conversion rate from Autofill %
  65. Manual Tedious Slow N-taps Checkout with Autofill Automatic Simple
  66. Imagine a world
 without forms...
  67. PaymentRequest A W3C API to eliminate checkout forms for users and standardize payment collection for sites
  68. Designing PaymentRequest at W3C Cross-browser
  69. Designing PaymentRequest at W3C Cross-browser Open ecosystemCross-platform
  70. N-tapsSlowManual Tedious Checkout with PaymentRequest Automatic Simple Fast 1-tap
  71. 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 */ });
  72. 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 */ });
  73. 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)"
 }
 }
 );
  74. 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?
  75. Connecting with hardware Credit: Kenneth Rohde Christiansen
  76. 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
  77. Demo time! https://webbluetoothcg.github.io/demos/playbulb-candle/
  78. Basic BLE terms to know... “Central” device (my phone) “Peripheral” device (candle) GATT (Generic ATTribute profile)
  79. var options = { filters: [{ services: [’battery_service’] }] }; navigator.bluetooth.requestDevice(options) .then(device => { console.log(device.name); ... }) .catch(error => { console.log(error); });
  80. var options = { filters: [{ services: [’battery_service’] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { ... }) .catch(error => { console.log(error); });
  81. 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); });
  82. 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); });
  83. Android Developer Options
  84. 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); }
  85. WebNFC
  86. 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" });
  87. Danish hero Kenneth Christiansen - @kennethrohde
  88. Generic Sensors
  89. let sensor = new DirectTirePressureSensor({ position: "rear", side: "left" }); sensor.onchange = event => console.log(event.reading.pressure);
  90. 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); }
  91. The Physical Web http://www.physical-web.org Credit: https://en.wikipedia.org/wiki/Spider_web
  92. /* Awesomeness to come */ var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
  93. Virtual Reality, WebVR
  94. WebVR API 1.0 progress! Landing in browsers: Firefox Nightly 2 weeks ago
 Chrome later this year Edge has begun development
  95. Daydream
  96. Daydream
  97. https://aframe.io/
  98. VR View
  99. Oculus CEO & co-founder
  100. 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
  101. Credit: https://github.com/alrra/browser-logos
  102. Working together on making the web better Credit: https://twitter.com/simonnricketts/ status/699198327338987520
  103. The Future of the Web
  104. Robert Nyman robertnyman.com nyman@google.com Google @robertnyman

×