Uncovering Secrets of Progressive Web Apps
•
1 like•609 views
Slides for a talk at Web Directions 2018 in Melbourne, Australia. The current state of PWAs as August 2018 and the challenges and problems we have, and how to deal with them.
Report
Share
Uncovering Secrets of Progressive Web Apps
- 1. Maximiliano Firtman @firt Uncovering the Secrets of Progressive Web Apps
- 8. An innovative new way to create applications for mobile devices
- 9. you write apps that look and behave exactly like apps on the phone
- 10. Just put them on an internet server.
- 11. Instant distribution. Easy to update
- 12. 3years ago
- 19. 11years ago
- 22. 19years ago
- 25. 0years ago
- 26. #YearOfPWA
- 27. Ideal for all those apps that are just consuming web content or web services
- 30. State of the Platform
- 32. App Support - Mobile OS iOS 11.3+ Only from store Only from store
- 33. Careful with Social Network Browsing 🤔
- 36. App Support - Desktop OS Only from store
- 41. Secrets
- 43. Web App Banner PWA Criteria Engagement?
- 45. Installation
- 46. Installation
- 47. Installation
- 48. Installation
- 49. Installation
- 50. Installation
- 51. Installation
- 52. Installation
- 53. Installation
- 54. Installation
- 55. Installation
- 56. Installation
- 57. Badging 🤨
- 59. Install Custom Action let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
- 60. Install Custom Action let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
- 61. Install Custom Action let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
- 62. Install Custom Action let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
- 63. Install Custom Action buttonInstall.addEventListener("click", e => { installPrompt.prompt(); }); JavaScript
- 66. iOS Simulator
- 67. iOS Simulator
- 68. Android Emulator
- 69. Android Emulator
- 70. Android Emulator
- 80. Persistent Storage API if (navigator.storage && navigator.storage.persist) { navigator.storage.persist(); } JavaScript
- 81. PWA LifeCycle First Visit Browser Loading
- 82. PWA LifeCycle First Visit SW Installation ⚡install ⚡activate Browser Loading
- 83. PWA LifeCycle First Visit SW Installation User installs PWA ⚡install ⚡activate Browser Loading ⚡appinstalled
- 84. PWA LifeCycle Second visit App Loading ❓display-mode ❓start_url
- 85. PWA LifeCycle Second visit App goes background App Loading ⚡visibilitychange ❓display-mode ❓start_url
- 86. PWA LifeCycle Second visit App goes background App is terminated on iOS App Loading ⚡visibilitychange ❓display-mode ❓start_url 😣
- 87. PWA LifeCycle Second visit App goes background App might be suspended App Loading ⚡visibilitychange ❓display-mode ❓start_url ⚡freeze 🆕
- 88. PWA LifeCycle Second visit App goes background App will be suspended App Loading ⚡visibilitychange ❓display-mode ❓start_url ⚡freeze 🆕 User goes back to App ⚡resume 🆕 ⚡visibilitychange App in memory
- 89. PWA LifeCycle Second visit App goes background App will be suspended App Loading ⚡visibilitychange ❓display-mode ❓start_url ⚡freeze 🆕 User goes back to App ❓document.wasDiscarded 🆕 ⚡load App was discarded
- 91. Pull to Refresh
- 92. Pull to Refresh body { /* Disables pull-to-refresh */ overscroll-behavior-y: contain; } CSS
- 94. Avoid App Translation <meta name="google" content="notranslate"> HTML
- 95. Avoid App Translation if (matchMedia('(display-mode: standalone)').matches) { document.querySelector("head").innerHTML += '<meta name="google" content="notranslate">'; } JavaScript
- 98. Careful with Link Capturing
- 105. Use environment margins body { margin-top: env(safe-area-inset-top); margin-left: env(safe-area-inset-left); margin-bottom: env(safe-area-inset-bottom); margin-right: env(safe-area-inset-right); } CSS <meta name="viewport" content="..., viewport-fit: cover" /> HTML
- 107. Save state Use Page Visibility API Restore state
- 109. Use Cache Storage Standalone PWASafari Web Storage IndexedDB Cookies Web Storage IndexedDB Cookies
- 110. Use Cache Storage Standalone PWASafari Web Storage IndexedDB Cookies Web Storage IndexedDB Cookies Cache Storage
- 111. Launch Images
- 112. Launch Images <link rel="apple-touch-startup-image" src="image-screen-size.png"> <link rel="apple-touch-startup-image" src="launch-iphonex.png" sizes="1125x2436"> HTML
- 113. Launch Images
- 114. Launch Images
- 115. Launch Images
- 116. Launch Images
- 117. Remove support for iOS
- 118. Remove support for iOS
- 119. Secrets App Stores
- 120. App Store
- 121. App Store WebView and LOT of native code
- 122. App Store Trusted Web Activities coming on Chrome 69 later this year
- 124. Store Distribution Microsoft Store kaiOS store coming Play Store coming with TWA App Store?
- 125. PWAs are great
- 126. Let’s use a critical eye
- 127. Remember our Goals
- 128. Goals A good,
- 129. Goals accessible,
- 130. Goals and performant