Progressive Web App at Google I/O 2016

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
September 20, 2016
21

Progressive Web App at Google I/O 2016

Summary of Progressive Web App at Google I/O 2016

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

September 20, 2016
Tweet

Transcript

  1. Progressive Web App @ Google I/O 2016

  2. Progressive Web App?

  3. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  4. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  5. - The site begins life as a regular tab. It

    doesn’t have super- powers - The site begins life as a regular tab. It doesn’t have super- powers
  6. But it is but using Progressive App features - Security

    - Responsive Design
  7. But it is but using Progressive App features - Offline

    experience
  8. But it is but using Progressive App features - Re-engaging

    by push notification
  9. The second (or third or fourth) time one visits the

    site - prompt is shown by the browser - Add to home screen Users can decide to keep apps to - the home screen or app launcher - Splash screen - Instant loading
  10. When launched from the home screen, these apps blend into

    their environment - top-level - full-screen
  11. Progressive Web App @ Google I/O 2016

  12. +JimmyMoon @ragingwind Google Developer Expert KOSSLab

  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. “How do you build a great (progressive) web app on

    the mobile … ? > Our answer is to”
  25. http://goo.gl/xU2MMu

  26. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  27. None
  28. None
  29. Using Custom Elements with Platform power for App shell architecture

    Pages are Web Components
  30. http://jonrimmer.github.io/are-we-componentized-yet/

  31. None
  32. - Service Worker - Push notification - Geolocation and More

    Platform APIs - HTTP/2 - Firebase hosting - Brotli HTTPS
  33. None
  34. None
  35. None
  36. None
  37. Our tools become part of our deploy process, but not

    part of our development process
  38. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  39. - Very fast first loading experience - Cached shell load

    instantly - Running on RAIL App shell architecture
  40. None
  41. None
  42. Three components for App shell. Using transform, rAF and …

    layout once FLIP animations
  43. Devtools Time Timeline: https://googlechrome.github.io/ui-element- samples/expand-collapse/

  44. Using Polymer’s <app-layout> for App shell architecture <app-layout>

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. Service Worker - Born to kill the offline- dinosaur -

    Javascript running in background - Full programmatic control of network and cache - IndexedDB - Plugins https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. Lighthouse demo: https://jakearchibald-gcm.appspot.com/

  63. None
  64. Devtools Time Service Worker: https://airhorner.com/

  65. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  66. Handling Offline

  67. None
  68. None
  69. None
  70. Cache

  71. None
  72. None
  73. None
  74. Devtools Time Cache: https://jakearchibald-gcm.appspot.com/

  75. Installable App launch from home screen splash screen

  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. http://app-manifest.firebaseapp.com/

  86. $ npm install -g pwa-manifest

  87. Devtools Time Web Manifest: https://airhorner.com/

  88. Storage

  89. None
  90. IndexedDB It’s the worst API ever designed in the history

    of computer science.
  91. None
  92. None
  93. It was a challenge. Wrap IndexedDB, Stash IDB first, try

    to write it to firebase and then remove that stashed data Stashing IndexedDB and Pushing Firebase
  94. None
  95. None
  96. Devtools Time IndexedDB: https://jakearchibald-gcm.appspot.com/

  97. Sync

  98. None
  99. None
  100. Web Push for Push notification

  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  122. None
  123. None
  124. None
  125. https://github.com/gauntface/simple-push-demo

  126. Pushing for engaging
 on Progressive Web Apps

  127. None
  128. None
  129. None
  130. None
  131. None
  132. Next • All screenshots and video clips come from Google

    IO 2016 Videos for Progressive Web App • Google I/O 2016 Codelabs • Progressive Web App Dev Summit 2016 • Progressive Web App on Google developers site • GDG Meetup • Join GDG slack channel #progressive-webapp