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.

Why progressive apps for WordPress - WordSesh 2020

73 views

Published on

Why progressive apps for WordPress - WordSesh 2020

Published in: Software
  • Be the first to comment

  • Be the first to like this

Why progressive apps for WordPress - WordSesh 2020

  1. 1. WHY PROGRESSIVE APPS FOR WORDPRESS? Imran Sayed @imranhsayed
  2. 2. DINOSAUR GAME
  3. 3. #WCAHEMDABAD2019
  4. 4. Software
  5. 5. Hardest problem with the software is the distribution.
  6. 6. History of Software distribution
  7. 7. 19th Century : The first known computer algorithm was written by Charles Babbage Difference Engine
  8. 8. 1980s : Spread of cartridges and cassette tapes for distribution of commercial software. CARTRIDGES & CASSETTES
  9. 9. When the programmes started to become large , floppy discs, cds and dvds were used FLOPPY DISCS, CDS & DVDS
  10. 10. Web application model has completely revolutionized software distribution.
  11. 11. USAGE TREND ON MOBILE WEB VS. MOBILE APP
  12. 12. ● Easy access on home screen ● Work offline ● Push notifications bring user back ● Access to mobile features and sensors 13% on Mobile Web 87% on Mobile Apps According to commScore Mobile Metrix Why users spend more time on native Apps?
  13. 13. 80% Of the time is spent on user’s top 3 apps. According to commScore Mobile Metrix
  14. 14. Capability Reach Approx. 100 visits/ month for an avg user. Mobile Apps have better capability, while Mobile Web has better reach.
  15. 15. HOW CAN WE GET BOTH?
  16. 16. Capability Reach PWA Combine the best of both world: Mobile App + Mobile Web = PWA
  17. 17. ● Progressively enhance Web Applications look and feel like native apps ● PWAs are web applications, looks and behaves as if it is a mobile app. WHAT ARE PROGRESSIVE WEB APPS?
  18. 18. EngagingReliable Fast
  19. 19. ● We use app by clicking on the App icon on home screen. ● If our web can earn a place in user’s home screen, we can increase the users engagement. How do you use native apps?
  20. 20. Need for PWA?
  21. 21. NATIVE APPS VS. PWA
  22. 22. Native Apps PWA ● Develop and maintain 3 separate codebase ● High friction of distribution ● Less discoverable ● Only the app download link can be shared ● Only one codebase ● Accessible on android, IOS and web. Variety of browsers. ● Content is discoverable and indexed by search engines. ● Direct link of any page/screen can be shared.
  23. 23. Native Apps PWA ● Not bookmarkable ● Update the app through playstore ● High data usage. ● Bookmarkable ● Always fresh ● Large data savings.
  24. 24. Progressive Responsive Works Offline Works Offline Fresh Safe Discoverable Re- engageable Durable Linkable FEATURES OF PWA
  25. 25. BUILDING A PWA
  26. 26. STEP 1: Create a Web App Manifest
  27. 27. ● A JSON file that contains metadata. ● Tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. WHAT IS A WEB APP MANIFEST?
  28. 28. Valid Manifest ● Chrome - manifest.json ● Opera - manifest.json ● Mozilla - manifest.webmanifest ● Microsoft - manifest.webmanifest WHAT IS A WEB APP MANIFEST?
  29. 29. { "short_name": "Codeytek", Home screen, launcher etc "name": "Codeytek Academy", App install prompt "icons": [ { "src": "/android-chrome-192x192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } Icons used for: Home screen, App launcher, Task Switcher, Splash Screen
  30. 30. …. "start_url": "/index.html", "theme_color": "#ffc40d", "background_color": "#3367d6", "display": "standalone", "scope": "/maps/", }
  31. 31. Tell the browser about your manifest <link rel="manifest" href="/manifest.json">
  32. 32. Browser Support
  33. 33. Service Workers
  34. 34. A service worker is a script that your browser runs in the background, separate from a web page. WHAT ARE SERVICE WORKERS?
  35. 35. Web Browser Service Workers Remote Server Middleware Intercepts http request SERVICE WORKERS
  36. 36. Service Worker Lifecycle
  37. 37. 1. register 2. install 3. activate Register a Service Worker Add files to Cache Cache Delete Previous Cache 3 phases of Service Worker Lifecycle
  38. 38. STEP 2: REGISTER A SERVICE WORKER( register )
  39. 39. Step 1: Registering Service Worker
  40. 40. STEP 3: ADD FILES TO CACHE ( install )
  41. 41. Create cache version and path for files to be cached ( sw.js )
  42. 42. STEP 4: Delete previous cache ( activate )
  43. 43. Service Worker Lifecycle
  44. 44. Service Worker, Manifest and Cache
  45. 45. Once the SW is active, it Has full control over pages.
  46. 46. It can now handle events such as: 1. Fetch 2. Push 3. Sync
  47. 47. Web Browser Service Workers Intercepts http request Server / Makes http request Is Request URL In Cache?
  48. 48. STEP 5: FETCH DATA FROM CACHE ( fetch )
  49. 49. Fetch event
  50. 50. Fetch event
  51. 51. STEP 6: ADD A CUSTOM ADD TO HOME SCREEN
  52. 52. Lighthouse Score - Performance
  53. 53. PWA Plugins for WordPress
  54. 54. 1. PWA 2. Super PWA 3. WordPress Mobile Pack 4. PWA for WP & AMP 5. Progressive WordPress
  55. 55. Super PWA
  56. 56. Push Notification
  57. 57. One Signal
  58. 58. One Signal
  59. 59. Accept Push Notification
  60. 60. Publish post
  61. 61. Browser Compatibility
  62. 62. 1. Google Chrome for Android 2. Mozilla Firefox for Android 3. Edge for Android 4. Brave for Android 5. Samsung Internet Browser Compatibility
  63. 63. 1. iOS just started supporting PWA from version 11.3 2. Only some features supported on iOS 3. Background Sync and Web Push Notifications are not supported 4. Manually press the Share icon and then “Add to Home Screen.” Browser Compatibility
  64. 64. PWA Examples
  65. 65. WordSesh2020 Flipkart lite Twitter lite m.uber
  66. 66. wp-decoupled
  67. 67. https://developers.google.com/web/funda mentals https://github.com/imranhsayed/pwa- concepts https://github.com/rtcamp/wp-decoupled References
  68. 68. learn.rtcamp.com
  69. 69. Imran Sayed @imranhsayed

×