More Related Content
What's hot
What's hot (20)
Similar to Pwa is the future. The Presentation I gave at PWA event
Similar to Pwa is the future. The Presentation I gave at PWA event (20)
Recently uploaded
Recently uploaded (12)
Pwa is the future. The Presentation I gave at PWA event
- 1. Getting Started with Progressive Web Apps By Ahmed Kaludi Founder at Magazine3.in & Blogger at WP.foundation
- 2. PWA is the future. Long story short. Wait.. What?
- 3. To understand Future, we need to understand the History first. How did the PWA revolution started?
- 4. It all started a decade ago in ‘07 with the launch of iPhone The Web 2.0 at its peak & HTML5 in progress.
- 5. Biggest Web Innovations of ‘07 ● Broadcast Quality Videos on Web ● Interactive Maps ● Local browser Storage ● Open Handset Alliance ● Symbian became the leader of Mobile OS
- 6. Biggest Web Innovations of ‘07 ● OH WAIT!....... Wasn’t the “App Store” the a true disruption in the market? Well, Kind of…….. Steve Jobs didn’t even want an App Store to exist.
- 7. Steve Jobs Said in ‘07 “The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on iPhone. And these apps can integrate perfectly with iPhone services And guess what? There's no SDK that you need,”
- 8. And few months after the WWDC Keynote “And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can look up a location on Google Maps.”
- 9. The ‘07 Mobile OS Leaders wanted to build Embedded Apps rather than restrictive native apps But they couldn't because of Technical limitations on App Quality, No open Standards & App $tore
- 10. ● Global mobile app revenue in 2016 – $88 billion ● Global mobile app revenue forecast for 2020 – $189 billion It holds them back for a reason
- 11. PWA is not a Technology It’s an umbrella term for a number of cutting-edge web technologies 1. Local Storage 2. Notifications 3. Background Sync 4. Audio & Video capturing 5. Make Payments 6. AMP integration 7. Works offline, thanks to Service workers 8. Speech recognition, NFC, Bluetooth, USB, Proximity Sensor, Geo Location, Vibration, Battery Status, File manager, Contacts, network availability and more..
- 12. PWA versus Native APP ● Single Codebase ● “Add to Homescreen” requires less efforts to install. ● Uses HTML/CSS/JavaScript as a platform ● Always updated with Background sync ● Less Resource Intensive in Long term ● Multiple Codebases ● Required to install from an app store ● Native SDK & Dev Team is required ● Requires App Updates (causes bugs) ● Resource Intensive in Long term
- 13. Required for the basic PWA build 1. HTTPS Protocol 2. Manifest.json 3. Service Worker 4. App Shell Caching
- 15. 2. An App Manifest /manifest.json link in your HTML <head>
- 16. 3. The Service Worker
- 17. Service Worker: Installation Event
- 18. Service Worker: Activation Event
- 19. Service Worker: Fetch Event
- 21. Service Worker: Using Cached Data
- 22. Here’s the example of PWA App: ● Looks app-like ● Converts between currencies ● Loads and caches the latest rates ● Uses cached rates when offline
- 23. Success Stories with PWA BookMyShow’s new Progressive Web App drives an 80% increase in conversions
- 24. Success Stories with PWA ● 80% reduction in page load time ● 39% increase in session time per user ● 19% reduction in bounce rate ● 77% increase in conversion from visitor to video viewer ● 15% increase in average daily video views per user
- 25. Success Stories with PWA ● OLX boosts re-engagement on the mobile web by 250% ● MakeMyTrip.com’s saw 3X improvement in conversion rates ● Housing.com increases conversions and lowers bounce rate by 40%
- 26. Google Lighthouse to the rescue!
- 27. Useful Resources ● Awesome List of PWA tutorials, Videos, Projects, Demos & more at https://github.com/hemanth/awesome-pwa#apps ● Best in class PWA app demos at https://pwa.rocks/
- 28. Implementing PWA in WordPress Install PWA in 5 mins with PWA for WP. PWA-for-WP.com | https://wordpress.org/plugins/pwa-for-wp/
- 29. Q & A Session Ask me any questions about PWA, AMP, Structured data or just general Web development.