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.

of

Uncovering Secrets of Progressive Web Apps Slide 1 Uncovering Secrets of Progressive Web Apps Slide 2 Uncovering Secrets of Progressive Web Apps Slide 3 Uncovering Secrets of Progressive Web Apps Slide 4 Uncovering Secrets of Progressive Web Apps Slide 5 Uncovering Secrets of Progressive Web Apps Slide 6 Uncovering Secrets of Progressive Web Apps Slide 7 Uncovering Secrets of Progressive Web Apps Slide 8 Uncovering Secrets of Progressive Web Apps Slide 9 Uncovering Secrets of Progressive Web Apps Slide 10 Uncovering Secrets of Progressive Web Apps Slide 11 Uncovering Secrets of Progressive Web Apps Slide 12 Uncovering Secrets of Progressive Web Apps Slide 13 Uncovering Secrets of Progressive Web Apps Slide 14 Uncovering Secrets of Progressive Web Apps Slide 15 Uncovering Secrets of Progressive Web Apps Slide 16 Uncovering Secrets of Progressive Web Apps Slide 17 Uncovering Secrets of Progressive Web Apps Slide 18 Uncovering Secrets of Progressive Web Apps Slide 19 Uncovering Secrets of Progressive Web Apps Slide 20 Uncovering Secrets of Progressive Web Apps Slide 21 Uncovering Secrets of Progressive Web Apps Slide 22 Uncovering Secrets of Progressive Web Apps Slide 23 Uncovering Secrets of Progressive Web Apps Slide 24 Uncovering Secrets of Progressive Web Apps Slide 25 Uncovering Secrets of Progressive Web Apps Slide 26 Uncovering Secrets of Progressive Web Apps Slide 27 Uncovering Secrets of Progressive Web Apps Slide 28 Uncovering Secrets of Progressive Web Apps Slide 29 Uncovering Secrets of Progressive Web Apps Slide 30 Uncovering Secrets of Progressive Web Apps Slide 31 Uncovering Secrets of Progressive Web Apps Slide 32 Uncovering Secrets of Progressive Web Apps Slide 33 Uncovering Secrets of Progressive Web Apps Slide 34 Uncovering Secrets of Progressive Web Apps Slide 35 Uncovering Secrets of Progressive Web Apps Slide 36 Uncovering Secrets of Progressive Web Apps Slide 37 Uncovering Secrets of Progressive Web Apps Slide 38 Uncovering Secrets of Progressive Web Apps Slide 39 Uncovering Secrets of Progressive Web Apps Slide 40 Uncovering Secrets of Progressive Web Apps Slide 41 Uncovering Secrets of Progressive Web Apps Slide 42 Uncovering Secrets of Progressive Web Apps Slide 43 Uncovering Secrets of Progressive Web Apps Slide 44 Uncovering Secrets of Progressive Web Apps Slide 45 Uncovering Secrets of Progressive Web Apps Slide 46 Uncovering Secrets of Progressive Web Apps Slide 47 Uncovering Secrets of Progressive Web Apps Slide 48 Uncovering Secrets of Progressive Web Apps Slide 49 Uncovering Secrets of Progressive Web Apps Slide 50 Uncovering Secrets of Progressive Web Apps Slide 51 Uncovering Secrets of Progressive Web Apps Slide 52 Uncovering Secrets of Progressive Web Apps Slide 53 Uncovering Secrets of Progressive Web Apps Slide 54 Uncovering Secrets of Progressive Web Apps Slide 55 Uncovering Secrets of Progressive Web Apps Slide 56 Uncovering Secrets of Progressive Web Apps Slide 57 Uncovering Secrets of Progressive Web Apps Slide 58 Uncovering Secrets of Progressive Web Apps Slide 59 Uncovering Secrets of Progressive Web Apps Slide 60 Uncovering Secrets of Progressive Web Apps Slide 61 Uncovering Secrets of Progressive Web Apps Slide 62 Uncovering Secrets of Progressive Web Apps Slide 63 Uncovering Secrets of Progressive Web Apps Slide 64 Uncovering Secrets of Progressive Web Apps Slide 65 Uncovering Secrets of Progressive Web Apps Slide 66 Uncovering Secrets of Progressive Web Apps Slide 67 Uncovering Secrets of Progressive Web Apps Slide 68 Uncovering Secrets of Progressive Web Apps Slide 69 Uncovering Secrets of Progressive Web Apps Slide 70 Uncovering Secrets of Progressive Web Apps Slide 71 Uncovering Secrets of Progressive Web Apps Slide 72 Uncovering Secrets of Progressive Web Apps Slide 73 Uncovering Secrets of Progressive Web Apps Slide 74 Uncovering Secrets of Progressive Web Apps Slide 75 Uncovering Secrets of Progressive Web Apps Slide 76 Uncovering Secrets of Progressive Web Apps Slide 77 Uncovering Secrets of Progressive Web Apps Slide 78 Uncovering Secrets of Progressive Web Apps Slide 79 Uncovering Secrets of Progressive Web Apps Slide 80 Uncovering Secrets of Progressive Web Apps Slide 81 Uncovering Secrets of Progressive Web Apps Slide 82 Uncovering Secrets of Progressive Web Apps Slide 83 Uncovering Secrets of Progressive Web Apps Slide 84 Uncovering Secrets of Progressive Web Apps Slide 85 Uncovering Secrets of Progressive Web Apps Slide 86 Uncovering Secrets of Progressive Web Apps Slide 87 Uncovering Secrets of Progressive Web Apps Slide 88 Uncovering Secrets of Progressive Web Apps Slide 89 Uncovering Secrets of Progressive Web Apps Slide 90 Uncovering Secrets of Progressive Web Apps Slide 91 Uncovering Secrets of Progressive Web Apps Slide 92 Uncovering Secrets of Progressive Web Apps Slide 93 Uncovering Secrets of Progressive Web Apps Slide 94 Uncovering Secrets of Progressive Web Apps Slide 95 Uncovering Secrets of Progressive Web Apps Slide 96 Uncovering Secrets of Progressive Web Apps Slide 97 Uncovering Secrets of Progressive Web Apps Slide 98 Uncovering Secrets of Progressive Web Apps Slide 99 Uncovering Secrets of Progressive Web Apps Slide 100 Uncovering Secrets of Progressive Web Apps Slide 101 Uncovering Secrets of Progressive Web Apps Slide 102 Uncovering Secrets of Progressive Web Apps Slide 103 Uncovering Secrets of Progressive Web Apps Slide 104 Uncovering Secrets of Progressive Web Apps Slide 105 Uncovering Secrets of Progressive Web Apps Slide 106 Uncovering Secrets of Progressive Web Apps Slide 107 Uncovering Secrets of Progressive Web Apps Slide 108 Uncovering Secrets of Progressive Web Apps Slide 109 Uncovering Secrets of Progressive Web Apps Slide 110 Uncovering Secrets of Progressive Web Apps Slide 111 Uncovering Secrets of Progressive Web Apps Slide 112 Uncovering Secrets of Progressive Web Apps Slide 113 Uncovering Secrets of Progressive Web Apps Slide 114 Uncovering Secrets of Progressive Web Apps Slide 115 Uncovering Secrets of Progressive Web Apps Slide 116 Uncovering Secrets of Progressive Web Apps Slide 117 Uncovering Secrets of Progressive Web Apps Slide 118 Uncovering Secrets of Progressive Web Apps Slide 119 Uncovering Secrets of Progressive Web Apps Slide 120 Uncovering Secrets of Progressive Web Apps Slide 121 Uncovering Secrets of Progressive Web Apps Slide 122 Uncovering Secrets of Progressive Web Apps Slide 123 Uncovering Secrets of Progressive Web Apps Slide 124 Uncovering Secrets of Progressive Web Apps Slide 125 Uncovering Secrets of Progressive Web Apps Slide 126 Uncovering Secrets of Progressive Web Apps Slide 127 Uncovering Secrets of Progressive Web Apps Slide 128 Uncovering Secrets of Progressive Web Apps Slide 129 Uncovering Secrets of Progressive Web Apps Slide 130 Uncovering Secrets of Progressive Web Apps Slide 131 Uncovering Secrets of Progressive Web Apps Slide 132
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Uncovering Secrets of Progressive Web Apps

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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>
  • LindseyManuel1

    Nov. 27, 2021

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.

Views

Total views

556

On Slideshare

0

From embeds

0

Number of embeds

47

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×