Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started with Progressive Web Apps

072193805185e22e0f42720b3a048149?s=47 Vitor Alencar
February 24, 2017

Getting started with Progressive Web Apps

Getting started with Progressive Web Apps

072193805185e22e0f42720b3a048149?s=128

Vitor Alencar

February 24, 2017
Tweet

Transcript

  1. Getting started with Progressive Web Apps

  2. Photo goes here Vitor Alencar Desenvolvedor com foco em tecnologias

    novas e escaláveis, graduando em sistemas de informação,Co fundador do DEV I/O FOR , Google developer groups organizer e Organizado do Front-in Fortaleza @vitormalencar GURU-CE
  3. flickr.com/photos/monado/4405843023

  4. This amazing software

  5. None
  6. None
  7. None
  8. None
  9. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

    13% 87% Mobile web Apps
  10. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS

    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
  11. Capability Reach

  12. ZERO NUMBER OF APPS AVERAGE USER INSTALLS PER MONTH Source:

    comScore Mobile Metrix, U.S., Age 18+, June 2015
  13. Capability Reach

  14. Capability Reach

  15. are a new level of caring about the quality of

    your user experience Progressive Web Apps
  16. Reliable User experiences need to be...

  17. None
  18. None
  19. None
  20. Lie-Fi

  21. Reliability means never showing the offline dinosaur

  22. Reliable Fast User experiences need to be...

  23. None
  24. None
  25. None
  26. of users abandon sites that take longer than 3 seconds

    to load 53%
  27. Reliable Fast Engaging User experiences need to be...

  28. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging

    Auto-adding to Home Screen Home Screen
  29. ` Web Push Notifications

  30. ` No surprises!

  31. https://wapo.com/pw a https://wapo.com/pw a

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. ` 80ms article page load time in the Progressive Web

    App Poynter article
  39. Reliable Fast Engaging Progressive Web Apps are…

  40. None
  41. None
  42. None
  43. None
  44. How do I get started?

  45. Stay Secure

  46. ` HTTPS: Secure connection between site and users

  47. Trust Is this site who they claim to be? Data

    integrity Has anyone tampered with this page? User privacy Can anyone see my browsing behavior? Keeping Users Safe
  48. Chrome DevTools Security Panel

  49. Search Ranking Guidance bit.ly/https-migration

  50. Use a Service Worker

  51. None
  52. WHAT ??

  53. None
  54. Web server

  55. Service worker Client side proxy (written in JavaScript) Cache Web

    server
  56. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  57. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  58. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  59. Service Worker Life Cycle • Adds app-like lifecycle to a

    page • Wakes up only when the OS says • Only responds to system events Activated Error Idle Active Terminated Install Register
  60. is for the SECOND load. Service Worker

  61. Life Cycle of a Service Worker Installing the Service Worker

    1st Page Load install idle
  62. Life Cycle of a Service Worker Installing the Service Worker

    2nd Page Load activated check for update
  63. Life Cycle of a Service Worker Installing the Service Worker

    Close Page idle terminated activated
  64. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update
  65. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update install idle
  66. Life Cycle of a Service Worker Updating a Service Worker

    Load Page with Service Worker activated check for update install idle
  67. Caching strategies You are in control of the network

  68. Cache, Falling Back to Network

  69. Network, Falling Back to Cache

  70. Cache then Network

  71. Generic Fallback

  72. Cache and Network Race

  73. Caching strategies galore!

  74. Engage Your Users

  75. Add to Home Screen

  76. Add To Home Screen Was Broken

  77. Add To Home Screen Was Broken Required user interaction Buried

    deep in menus
  78. Add To Home Screen Was Broken Required user interaction Buried

    deep in menus Where would it start? Dependent on bookmark
  79. Add To Home Screen Was Broken Required user interaction Buried

    deep in menus Where would it start? Dependent on bookmark Would it work offline? Users didn't expect offline
  80. <link rel="manifest" href="/manifest.json"> { "name": "The Washington Post", "short_name": "Wash

    Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  81. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  82. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  83. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  84. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons":

    [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#000000", "theme_color": "#000000" }
  85. ` Good, but what about prompt to install?

  86. A Promise to the User Consistent Experience Works Offline The

    User is Engaged
  87. ` Web Push Notifications

  88. ` Web Push Notifications The browser doesn’t need to be

    open!
  89. `

  90. ` 38% open rate 9x more conversions on previously abandoned

    carts
  91. Anatomy of a notification I feel I need it and

    it matters right now. when: it's timely
  92. Anatomy of a notification I feel I need it and

    it matters right now. when: it's timely
  93. Anatomy of a notification when: it's timely what: it's precise

    It has specific info that’s good to know or act upon.
  94. Anatomy of a notification when: it's timely what: it's precise

    what & who: it's relevant It’s from people or sources that matter to me, which makes it personal.
  95. Built on Service Workers /* ServiceWorker.js */ onfetch = function(e)

    { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /content.json HTTP/1.1 HOST example.com GET /content.json HTTP/1.1 HOST example.com GET /app.html HTTP/1.1 HOST example.com
  96. Built on Service Workers /* ServiceWorker.js */ onpush = function(event)

    { var data = event.data.json(); var t = data.title; var opt = { body: data.body, icon: data.icon, tag: data.tag }; self.registration .showNotification(t, opt); }; End Point example.co m
  97. Check out the Push code lab

  98. Stay Secure

  99. Use a Service Worker

  100. Engage Your Users

  101. `

  102. ` 2x more page views 74% increase in time spent

  103. ` 2x more page views 74% increase in time spent

    82% more conversions on iOS
  104. are progressive. Progressive Web Apps

  105. are a new level of caring about the quality of

    your user experience Progressive Web Apps
  106. to Establish a Baseline goo.gl/S07woZ Use Lighthouse

  107. ` 98% 1430.2ms First meaningful paint 94% 2069.4ms Time To

    Interactive 96% 1591 Perceptual Speed Index vitormalencar.com
  108. Show me the metrics

  109. Show me the metrics

  110. ` 100% 630.9ms First meaningful paint 99% 1210.8ms Time To

    Interactive 99% 1005 Perceptual Speed Index vitormalencar.com
  111. Show me the metrics

  112. …but not a destination! Lighthouse: Fantastic Tool

  113. None
  114. http://bit.ly/1ksSnNS

  115. http://bit.ly/2mbUaPN

  116. http://bit.ly/2mpN0U2

  117. None
  118. None
  119. Ready-to-rock Preact starter project http://bit.ly/2lKsK2g

  120. https://pwa-directory.appspot.com/

  121. None
  122. +vitormalencar @vitormalencar <thank-you>