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.

Uncovering Secrets of Progressive Web Apps

98 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Uncovering Secrets of Progressive Web Apps

  1. 1. Maximiliano Firtman @firt Uncovering the Secrets of Progressive Web Apps
  2. 2. Progressive Web Apps
  3. 3. An innovative new way to create applications for mobile devices
  4. 4. you write apps that look and behave exactly like apps on the phone
  5. 5. Just put them on an internet server.
  6. 6. Instant distribution. Easy to update
  7. 7. 3years ago
  8. 8. 11years ago
  9. 9. 19years ago
  10. 10. 0years ago
  11. 11. #YearOfPWA
  12. 12. Ideal for all those apps that are just consuming web content or web services
  13. 13. State of the Platform
  14. 14. Every Web Browser 🤔
  15. 15. App Support - Mobile OS iOS 11.3+ Only from store Only from store
  16. 16. Careful with Social Network Browsing 🤔
  17. 17. App Support - Desktop OS Only from store
  18. 18. Secrets
  19. 19. Secrets Installation
  20. 20. Web App Banner PWA Criteria Engagement?
  21. 21. Installation Add or Install? Badging
  22. 22. Installation
  23. 23. Installation
  24. 24. Installation
  25. 25. Installation
  26. 26. Installation
  27. 27. Installation
  28. 28. Installation
  29. 29. Installation
  30. 30. Installation
  31. 31. Installation
  32. 32. Installation
  33. 33. Installation
  34. 34. Badging 🤨
  35. 35. Install Custom Action
  36. 36. Install Custom Action 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
  37. 37. Install Custom Action 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
  38. 38. Install Custom Action 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
  39. 39. Install Custom Action 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript
  40. 40. Install Custom Action 
 buttonInstall.addEventListener("click", e => { installPrompt.prompt(); }); JavaScript
  41. 41. Secrets Dev Tools
  42. 42. Testing and Debugging
  43. 43. iOS Simulator
  44. 44. iOS Simulator
  45. 45. Android Emulator
  46. 46. Android Emulator
  47. 47. Android Emulator
  48. 48. Localhost on Android
  49. 49. Localhost on Android
  50. 50. Localhost on Android
  51. 51. Localhost on Android
  52. 52. Localhost on Android
  53. 53. Chromebook Emulator
  54. 54. Chromebook Emulator https://developer.android.com/topic/arc/emulator
  55. 55. Chromebook Emulator
  56. 56. Secrets LifeCycle & Storage
  57. 57. Persistent Storage API 
 if (navigator.storage && navigator.storage.persist) { navigator.storage.persist(); } JavaScript
  58. 58. PWA LifeCycle First Visit Browser Loading
  59. 59. PWA LifeCycle First Visit SW Installation ⚡install ⚡activate Browser Loading
  60. 60. PWA LifeCycle First Visit SW Installation User installs PWA ⚡install ⚡activate Browser Loading ⚡appinstalled
  61. 61. PWA LifeCycle Second visit App Loading ❓display-mode ❓start_url
  62. 62. PWA LifeCycle Second visit App goes background App Loading ⚡visibilitychange ❓display-mode ❓start_url
  63. 63. PWA LifeCycle Second visit App goes background App is terminated on iOS App Loading ⚡visibilitychange ❓display-mode ❓start_url 😣
  64. 64. PWA LifeCycle Second visit App goes background App might be suspended App Loading ⚡visibilitychange ❓display-mode ❓start_url ⚡freeze 🆕
  65. 65. 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
  66. 66. 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
  67. 67. Secrets User Interface
  68. 68. Pull to Refresh
  69. 69. Pull to Refresh body {   /* Disables pull-to-refresh */   overscroll-behavior-y: contain; } CSS
  70. 70. Avoid App Translation
  71. 71. Avoid App Translation <meta name="google" content="notranslate"> HTML
  72. 72. Avoid App Translation 
 if (matchMedia('(display-mode: standalone)').matches) {
 document.querySelector("head").innerHTML += '<meta name="google" content="notranslate">'; 
 } JavaScript
  73. 73. Secrets Fighting Challenges
  74. 74. WebAPK Link Capturing (Intents)
  75. 75. Careful with Link Capturing
  76. 76. 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
  77. 77. Save state Use Page Visibility API Restore state
  78. 78. Use Cache Storage Standalone PWASafari Web Storage IndexedDB Cookies Web Storage IndexedDB Cookies
  79. 79. Use Cache Storage Standalone PWASafari Web Storage IndexedDB Cookies Web Storage IndexedDB Cookies Cache Storage
  80. 80. Launch Images
  81. 81. 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
  82. 82. Launch Images
  83. 83. Launch Images
  84. 84. Launch Images
  85. 85. Launch Images
  86. 86. Remove support for iOS
  87. 87. Remove support for iOS
  88. 88. Secrets App Stores
  89. 89. App Store
  90. 90. App Store WebView and LOT of native code
  91. 91. App Store Trusted Web Activities coming on Chrome 69 later this year
  92. 92. App Store APK Icons 
 PWA Certified URL TWA Standalone mode
  93. 93. Store Distribution Microsoft Store kaiOS store coming Play Store coming with TWA App Store?
  94. 94. PWAs are great
  95. 95. Let’s use a critical eye
  96. 96. Remember our Goals
  97. 97. Goals A good,
  98. 98. Goals accessible,
  99. 99. Goals and performant
  100. 100. Goals User Experience
  101. 101. uee> <blink>@firt - firt.mobi</blink>

×