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.

The modern PWA Cheat Sheet

1,309 views

Published on

Slides for the session at JSConfEU in Berlin June 2019. How to create Progressive Web Apps.

Published in: Technology
  • Nine Signs Wealth is Coming Your Way... ♣♣♣ http://ishbv.com/manifmagic/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The modern PWA Cheat Sheet

  1. 1. Maximiliano Firtman @firt The modern PWA Cheat Sheet
  2. 2. App Ecosystem is broken
  3. 3. Progressive Web Apps
  4. 4. Web App
  5. 5. Web App Web App Service Workers
  6. 6. Web AppWeb App Web App Service Workers Distribution
  7. 7. PWA Support - Mobile Only from stores
  8. 8. PWA Support - Mobile Only from stores
  9. 9. PWA Support - Desktop OS Win 7 / 8.x
  10. 10. Modern Cheat Sheet
  11. 11. Understand App Lifecycle
  12. 12. PWA LifeCycle App Loading
  13. 13. PWA LifeCycle App goes background App Loading ⚡visibilitychange
  14. 14. App goes background App might be suspended App Loading ⚡visibilitychange ⚡freeze 🆕 PWA LifeCycle
  15. 15. PWA LifeCycle App goes background App will be suspended App Loading ⚡visibilitychange ⚡freeze 🆕 User goes back to AppApp in memory
  16. 16. PWA LifeCycle App goes background App will be suspended App Loading ⚡visibilitychange ⚡freeze 🆕 User goes back to App ⚡resume 🆕 ⚡visibilitychange App in memory
  17. 17. PWA LifeCycle App goes background App will be suspended App Loading ⚡visibilitychange ⚡freeze 🆕 App was discarded
  18. 18. PWA LifeCycle App goes background App will be suspended App Loading ⚡visibilitychange ⚡freeze 🆕 User goes back to AppApp was discarded ❓document.wasDiscarded 🆕 ⚡load
  19. 19. Not on iOS!!!
  20. 20. Not on iOS!!!
  21. 21. Not on iOS!!!
  22. 22. For iOS at least • Provide a reload action within your UI • Provide full navigation apart from gestures
  23. 23. App Resources by SW
  24. 24. 
 if (navigator.storage && navigator.storage.persist) { navigator.storage.persist(); } JavaScript Persistent Storage API
  25. 25. Progressive Experience
  26. 26. One App for All • Devices • Connection Latency • Battery Level
  27. 27. YouTube mental model
  28. 28. Know about context with APIs • Network Information • Performance Observers • Device Memory
  29. 29. Reporting API • Report-To header with a server endpoint • Browser will send you reports
  30. 30. Consistent Experience • Change SW’s cache policy • SSR vs CSR • Reduce amount of loaded data
  31. 31. Platform Integration
  32. 32. Web Authentication
  33. 33. Web Authentication
  34. 34. Web Share API Share content from your App
  35. 35. <code> navigator.share({ title: 'Checkout this funny photo', text: '', url: window.location.href }); JAVASCRIPT
  36. 36. Web Share API
  37. 37. Web Share Target API
  38. 38. Web APK APK Icons PWA Certified URL Cloud-based Generation
  39. 39. WebAPK now available on Samsung Signed by Samsung Apps
  40. 40. Desktop multiple window
  41. 41. Desktop multiple window
  42. 42. Desktop multiple window • Use the Service Worker and messages to control • Future looks promising
  43. 43. Installation Experience
  44. 44. Web AppWeb App Web App Service Workers Distribution
  45. 45. Web App Manifest
  46. 46. Web App Manifest
  47. 47. Web App Manifest
  48. 48. Web App Manifest
  49. 49. Installation UI
  50. 50. 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript Installation UI
  51. 51. 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript Installation UI
  52. 52. 
 let installPrompt; window.addEventListener("beforeinstallprompt", e => { //TODO: enable Install button e.preventDefault(); installPrompt = e; }); JavaScript Installation UI
  53. 53. 
 buttonInstall.addEventListener("click", e => { installPrompt.prompt(); }); JavaScript Installation UI
  54. 54. Web App Manifest iOS 
 Meta data
  55. 55. Web App Manifest iOS 
 Meta data App 
 Launcher
  56. 56. APPX Generation App Launcher for Windows
  57. 57. Packaged App Generation App Launcher for kaiOS/Jio
  58. 58. Play Store for Android?
  59. 59. 1-800 Flowers A good PWA A native Android App (20MB)
  60. 60. 1-800 Flowers PWA They had a native Android App (20MB) Replaced by a PWA (700KB)
  61. 61. App Launcher for Android Trusted Web Activities
  62. 62. APK Icons 
 PWA Certified URL TWA Standalone mode App Launcher for Android
  63. 63. App Launcher for iOS
  64. 64. App Launcher for iOS
  65. 65. Store Distribution Be careful
  66. 66. Store Distribution Check the store rules!
  67. 67. The modern PWA Cheat Sheet Basic PWA support Pass PWA Criteria Service Worker Web App Manifest Web Performance App Lifecycle Save & restore state on freeze iOS Reload action Request Persistent Storage Track events Progressive Experience Read Context APIs Implement Reporting API Pick quality & let user change it
 You are not an average user Platform Integration WebAuthn & WebShare Understand WebAPK Multi-window support iOS meta data Installation Experience Provide Custom Install UI Track Installation events Create App Launchers Publish on App Stores @firt

×