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 web apps for word press wc-ahemdabad

140 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.

Through this slide 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.

According to skilled.co 47% of customers expect a webpage to load in 2 seconds or less before they consider leaving.

This means low speed kills and we need an app that is performant.

You will learn about my experiences in building a Progressive Web App with WordPress, that earns a place on the user’s home screen, works offline, sync in the background and bring the user back with push notification.

A few lessons and tips will be shared for anyone who wants to build a new Progressive Web App with WordPress or convert their existing WordPress site into a PWA and give their users a fast, reliable and engaging experience.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Why progressive web apps for word press wc-ahemdabad

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

×