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 - Google for Indonesia

7,923 views

Published on

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

Published in: Technology

The Future of Progressive Web Apps - Google for Indonesia

  1. Robert Nyman Developer Relations Program Manager @robertnyman
  2. Apa kabar?
  3. Future of Progressive Web Apps
  4. I'm from Sweden
  5. I'm from Sweden Credit: https://www.flickr.com/photos/stephenbove/184201987
  6. I'm from Sweden Credit: https://www.pinterest.com/pin/313352086545358825/
  7. Selamat Datang di Swedia!
  8. 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
  9. We've come a long way
  10. The web is almighty powerful
  11. It's just the beginning What we do now is the beginning What's needed to play Table stakes
  12. What about the future? Credit: https://www.flickr.com/photos/mssarakelly/9422242223
  13. Things we'll talk about today Knowing who the user is Credentials Management Paying for things on the web Connecting with hardware Physical Web
  14. Knowing who the user is Credit: https://commons.wikimedia.org/wiki/File:Steal_password.jpg
  15. 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
  16. It's hard to type on a mobile device
  17. Most popular password in 2015 123456
  18. 2nd most popular password in 2015 password
  19. Smart Lock for passwords
  20. sign-ins assisted per month 8 billion
  21. 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?
  22. 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!
  23. 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>
  24. 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>
  25. password
  26. auto-generated password 7nUvA8jyowEk44
  27. the Credentials Management API Credit: https://commons.wikimedia.org/wiki/File:Michael_de_la_Force_Leaders_Magazine_Press_Credentials_2013.jpg
  28. Automatic Sign-in
  29. navigator.credentials.get({
 "password": true, "unmediated": true
 }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
  30. 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
  31. 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
  32. function signInToYourApplication(c) {
 fetch("/signin", { "method": "POST", "credentials": c }).then(r => { if (r.status == 200) renderSignedInExperience(r); else renderUsefulErrorMessage(); }); }
  33. One-tap Sign-in
  34. navigator.credentials.get({
 "password": true }).then(c => { if (!c) return; // Hooray, we have a credential! signInToYourApplication(c); });
  35. Storing credentials
  36. var f = document.querySelector("#form"); var c = new PasswordCredential(f); navigator.credentials.store(c) .then(_ => { // ... });
  37. Federated log-ins
  38. var c = new FederatedCredential({ "id": "username", "provider": "https:// accounts.google.com" }); navigator.credentials.store(c) .then(_ => { // ... });
  39. navigator.credentials .requireUserMediation() .then(_ => { // Sign the user out. }); Logging out
  40. Paying for things on the web Credit: http://www.publicdomainpictures.net/view-image.php?image=149197
  41. 66% of purchases on mobile are on web
  42. The web is dead?
  43. 66%Fewer conversions on mobile websites
  44. Have you ever abandoned a purchase because of the checkout form?
  45. Manual Tedious Slow N-taps Checkout forms today
  46. Autofill Fill web forms 
 with a single click
  47. Card and address saved to Chrome Automatic form detection 95+ ACCURACY Form filled automatically How Autofill works XYZ
  48. 25 Increase in conversion rate from Autofill %
  49. Manual Tedious Slow N-taps Checkout with Autofill Automatic Simple
  50. Imagine a world
 without forms...
  51. PaymentRequest A W3C API to eliminate checkout forms for users and standardize payment collection for sites
  52. Designing PaymentRequest at W3C Cross-browser
  53. Designing PaymentRequest at W3C Cross-browser Open ecosystemCross-platform
  54. N-tapsSlowManual Tedious Checkout with PaymentRequest Automatic Simple Fast 1-tap
  55. 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 */ });
  56. 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 */ });
  57. 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)"
 }
 }
 );
  58. 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?
  59. Connecting with hardware Credit: https://en.wikipedia.org/wiki/Open-source_hardware
  60. 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
  61. Demo time! https://webbluetoothcg.github.io/demos/playbulb-candle/
  62. Basic BTLE terms to know... “Central” device (my phone) “Peripheral” device (candle) GATT (Generic ATTribute profile)
  63. var options = { filters: [{ services: [’battery_service’] }] }; navigator.bluetooth.requestDevice(options) .then(device => { console.log(device.name); ... }) .catch(error => { console.log(error); });
  64. var options = { filters: [{ services: [’battery_service’] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { ... }) .catch(error => { console.log(error); });
  65. 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); });
  66. 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); });
  67. Android Developer Options
  68. 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); }
  69. The Physical Web http://www.physical-web.org Credit: https://en.wikipedia.org/wiki/Spider_web
  70. /* Awesomeness to come */ var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
  71. 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
  72. Robert Nyman @robertnyman Terima kasih!

×