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?

161 views

Published on

Progressive Web App is a hot topic on the web right now.

As per recent studies ( Comscore ), users spend more time ( 87% ) on the native app compared to the mobile web because native apps are more predictable, they work offline, show notifications and have access to mobile sensors.

However, 78% of the time is spent in the user’s top 3 apps, and the rest of the apps just sit there and eat up the memory.

Mobile web, on the other hand, has a better reach ( 100 visits/ month for an average user ) but does not does have a native-like experience.

In this talk you will learn, how we can combine the capabilities of native apps and the reach of the web, to get the best of both worlds, using Progressive Web Apps with WordPress.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Why Progressive Apps For WordPress?

  1. 1. WHY PROGRESSIVE APPS FOR WORDPRESS? #WCMUMBAI2019 Imran Sayed @imranhsayed
  2. 2. DINOSAUR GAME #WCMUMBAI2019
  3. 3. #WCMUMBAI2019 Hardest problem with the software is the distribution.
  4. 4. History of Software distribution #WCMUMBAI2019
  5. 5. #WCMUMBAI2019 19th Century : The first known computer algorithm was written by Charles Babbage Difference Engine
  6. 6. #WCMUMBAI2019 1980s : Spread of cartridges and cassette tapes for distribution of commercial software. CARTRIDGES & CASSETTES
  7. 7. #WCMUMBAI2019 When the programmes started to become large , floppy discs, cds and dvds were used FLOPPY DISCS, CDS & DVDS
  8. 8. #WCMUMBAI2019 Web application model has completely revolutionized software distribution.
  9. 9. #WCMUMBAI2019
  10. 10. USAGE TREND ON MOBILE WEB VS. MOBILE APP #WCMUMBAI2019
  11. 11. #WCMUMBAI2019 ● 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?
  12. 12. #WCMUMBAI2019 80% Of the time is spent on user’s top 3 apps. According to commScore Mobile Metrix
  13. 13. #WCMUMBAI2019 Capability Reach Approx. 100 visits/ month for an avg user. Mobile Apps have better capability, while Mobile Web has better reach.
  14. 14. #WCMUMBAI2019 HOW CAN WE GET BOTH?
  15. 15. #WCMUMBAI2019 Capability Reach PWA Combine the best of both world: Mobile App + Mobile Web = PWA
  16. 16. #WCMUMBAI2019 ● 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?
  17. 17. #WCMUMBAI2019 Flipkart Lite
  18. 18. #WCMUMBAI2019 EngagingReliable Fast
  19. 19. #WCMUMBAI2019 ● 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 your App?
  20. 20. Need for PWA? #WCMUMBAI2019
  21. 21. NATIVE APPS VS. PWA #WCMUMBAI2019
  22. 22. #WCMUMBAI2019 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. #WCMUMBAI2019 Native Apps PWA ● Not bookmarkable ● Update the app through playstore ● High data usage. ● Many features require user’s permission. E.g. contacts, calendar, alarms etc. ● Bookmarkable ● Always fresh ● Large data savings.
  24. 24. #WCMUMBAI2019 Progressive Responsive Works Offline Works Offline Fresh Safe Discoverable Re- engageable Durable Linkable FEATURES OF PWA
  25. 25. BUILDING A PWA #WCMUMBAI2019
  26. 26. STEP 1: Create a Web App Manifest #WCMUMBAI2019
  27. 27. #WCMUMBAI2019 ● 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. #WCMUMBAI2019 Valid Manifest ● Chrome - manifest.json ● Opera - manifest.json ● Mozilla - manifest.webmanifest ● Microsoft - manifest.webmanifest WHAT IS A WEB APP MANIFEST?
  29. 29. #WCMUMBAI2019 { "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. #WCMUMBAI2019 …. "start_url": "/index.html", "theme_color": "#ffc40d", "background_color": "#3367d6", "display": "standalone", "scope": "/maps/", }
  31. 31. #WCMUMBAI2019 Tell the browser about your manifest <link rel="manifest" href="/manifest.json">
  32. 32. Browser Support
  33. 33. Service Workers #WCMUMBAI2019
  34. 34. #WCMUMBAI2019 A service worker is a script that your browser runs in the background, separate from a web page. WHAT ARE SERVICE WORKERS?
  35. 35. #WCMUMBAI2019 SERVICE WORKERS Web Browser Service Workers Remote Server Middleware Intercepts http request
  36. 36. Service Worker Lifecycle #WCMUMBAI2019
  37. 37. #WCMUMBAI2019 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 ) #WCMUMBAI2019
  39. 39. Step 1: Registering Service Worker
  40. 40. STEP 3: ADD FILES TO CACHE ( install ) #WCMUMBAI2019
  41. 41. Create cache version and path for files to be cached ( sw.js )
  42. 42. STEP 4: Delete previous cache ( activate ) #WCMUMBAI2019
  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. #WCMUMBAI2019
  46. 46. It can now handle events such as: 1. Fetch 2. Push 3. Sync #WCMUMBAI2019
  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 ) #WCMUMBAI2019
  49. 49. Fetch event
  50. 50. Fetch event
  51. 51. STEP 6: ADD A CUSTOM ADD TO HOME SCREEN #WCMUMBAI2019
  52. 52. Lighthouse Score - Performance
  53. 53. Lighthouse Score - Performance
  54. 54. PWA Plugins for WordPress #WCMUMBAI2019
  55. 55. #WCMUMBAI2019 1. Super PWA 2. WordPress Mobile Pack 3. PWA 4. PWA for WP & AMP 5. Progressive WordPress
  56. 56. Super PWA
  57. 57. Browser Compatibility #WCMUMBAI2019
  58. 58. #WCMUMBAI2019 1. Google Chrome for Android 2. Mozilla Firefox for Android 3. Edge for Android 4. Brave for Android 5. Samsung Internet Browser Compatibility
  59. 59. #WCMUMBAI2019 1. iOS just started supporting PWA from version 11.3 2. Only some features supported upon 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
  60. 60. Popular PWAs #WCMUMBAI2019
  61. 61. #WCMUMBAI2019 1. Flipkart Lite 2. Twitter Lite 3. Pinterest 4. Tinder 5. OLX 6. Trivago Popular PWAs
  62. 62. wp-decoupled
  63. 63. #WCMUMBAI2019 https://developers.google.com/web/funda mentals https://github.com/imranhsayed/pwa- concepts https://github.com/rtcamp/wp-decoupled References
  64. 64. WordCamp Mumbai Organizers & volunteers #WCMUMBAI2019 Mahvash Fatima - Ppt Design Credits
  65. 65. #WCMUMBAI2019 learn.rtcamp.com
  66. 66. #WCMUMBAI2019
  67. 67. #WCMUMBAI2019 Imran Sayed @imranhsayed

×