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

The modern PWA Cheat Sheet Slide 1 The modern PWA Cheat Sheet Slide 2 The modern PWA Cheat Sheet Slide 3 The modern PWA Cheat Sheet Slide 4 The modern PWA Cheat Sheet Slide 5 The modern PWA Cheat Sheet Slide 6 The modern PWA Cheat Sheet Slide 7 The modern PWA Cheat Sheet Slide 8 The modern PWA Cheat Sheet Slide 9 The modern PWA Cheat Sheet Slide 10 The modern PWA Cheat Sheet Slide 11 The modern PWA Cheat Sheet Slide 12 The modern PWA Cheat Sheet Slide 13 The modern PWA Cheat Sheet Slide 14 The modern PWA Cheat Sheet Slide 15 The modern PWA Cheat Sheet Slide 16 The modern PWA Cheat Sheet Slide 17 The modern PWA Cheat Sheet Slide 18 The modern PWA Cheat Sheet Slide 19 The modern PWA Cheat Sheet Slide 20 The modern PWA Cheat Sheet Slide 21 The modern PWA Cheat Sheet Slide 22 The modern PWA Cheat Sheet Slide 23 The modern PWA Cheat Sheet Slide 24 The modern PWA Cheat Sheet Slide 25 The modern PWA Cheat Sheet Slide 26 The modern PWA Cheat Sheet Slide 27 The modern PWA Cheat Sheet Slide 28 The modern PWA Cheat Sheet Slide 29 The modern PWA Cheat Sheet Slide 30 The modern PWA Cheat Sheet Slide 31 The modern PWA Cheat Sheet Slide 32 The modern PWA Cheat Sheet Slide 33 The modern PWA Cheat Sheet Slide 34 The modern PWA Cheat Sheet Slide 35 The modern PWA Cheat Sheet Slide 36 The modern PWA Cheat Sheet Slide 37 The modern PWA Cheat Sheet Slide 38 The modern PWA Cheat Sheet Slide 39 The modern PWA Cheat Sheet Slide 40 The modern PWA Cheat Sheet Slide 41 The modern PWA Cheat Sheet Slide 42 The modern PWA Cheat Sheet Slide 43 The modern PWA Cheat Sheet Slide 44 The modern PWA Cheat Sheet Slide 45 The modern PWA Cheat Sheet Slide 46 The modern PWA Cheat Sheet Slide 47 The modern PWA Cheat Sheet Slide 48 The modern PWA Cheat Sheet Slide 49 The modern PWA Cheat Sheet Slide 50 The modern PWA Cheat Sheet Slide 51 The modern PWA Cheat Sheet Slide 52 The modern PWA Cheat Sheet Slide 53 The modern PWA Cheat Sheet Slide 54 The modern PWA Cheat Sheet Slide 55 The modern PWA Cheat Sheet Slide 56 The modern PWA Cheat Sheet Slide 57 The modern PWA Cheat Sheet Slide 58 The modern PWA Cheat Sheet Slide 59 The modern PWA Cheat Sheet Slide 60 The modern PWA Cheat Sheet Slide 61 The modern PWA Cheat Sheet Slide 62 The modern PWA Cheat Sheet Slide 63 The modern PWA Cheat Sheet Slide 64 The modern PWA Cheat Sheet Slide 65 The modern PWA Cheat Sheet Slide 66 The modern PWA Cheat Sheet Slide 67 The modern PWA Cheat Sheet Slide 68 The modern PWA Cheat Sheet Slide 69 The modern PWA Cheat Sheet Slide 70 The modern PWA Cheat Sheet Slide 71 The modern PWA Cheat Sheet Slide 72 The modern PWA Cheat Sheet Slide 73 The modern PWA Cheat Sheet Slide 74 The modern PWA Cheat Sheet Slide 75 The modern PWA Cheat Sheet Slide 76 The modern PWA Cheat Sheet Slide 77 The modern PWA Cheat Sheet Slide 78 The modern PWA Cheat Sheet Slide 79 The modern PWA Cheat Sheet Slide 80 The modern PWA Cheat Sheet Slide 81 The modern PWA Cheat Sheet Slide 82 The modern PWA Cheat Sheet Slide 83 The modern PWA Cheat Sheet Slide 84 The modern PWA Cheat Sheet Slide 85 The modern PWA Cheat Sheet Slide 86 The modern PWA Cheat Sheet Slide 87 The modern PWA Cheat Sheet Slide 88 The modern PWA Cheat Sheet Slide 89 The modern PWA Cheat Sheet Slide 90 The modern PWA Cheat Sheet Slide 91 The modern PWA Cheat Sheet Slide 92 The modern PWA Cheat Sheet Slide 93
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

5 Likes

Share

Download to read offline

The modern PWA Cheat Sheet

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Oct. 16, 2019
  • AndreaLocorotondo

    Aug. 15, 2019
  • benjaminintsiful

    Jun. 25, 2019
  • davosian

    Jun. 4, 2019
  • docluv

    Jun. 3, 2019

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

Views

Total views

2,846

On Slideshare

0

From embeds

0

Number of embeds

278

Actions

Downloads

25

Shares

0

Comments

0

Likes

5

×