Progressive Web Apps
3 likes179 views
Progressive Web Apps use modern web capabilities to provide an app-like experience to users. They are responsive and work across all device types. PWAs aim to load quickly, even with uncertain network conditions. They also respond smoothly to user interactions without janky or laggy behavior. Features like the web manifest and service workers help make PWAs feel like native apps to users. Implementing strategies such as the PRPL pattern and following performance best practices from RAIL can help optimize PWAs. Case studies on Twitter and Alibaba found business benefits from users adding PWAs to their home screens, including increased engagement.
Progressive Web Apps
- 1. Progressive Web Apps Igor Chiriac
- 2. A Progressive Web App uses modern web capabilities to deliver an app-like user experience.
- 5. Why the need of PWA ?
- 8. Mobile users spend80% of the time on their devices using only theirtop three apps A research conducted in 2015 bymarketingland.comshows that:
- 14. Reliable Load instantly and never show the downasaur, even in uncertain network conditions. >< nextprevious Fast Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging Feel like a natural app on the device, with an immersive user experience.
- 15. Web Manifest allows app to be launched in full-screen mode control over screen orientation de鍖ne the Splash Screen de鍖ne icons and theme colors
- 16. Manifest File
- 17. Service Workers
- 19. PWA Optimization
- 20. PRPL Pattern Pushcritical resources for the initial URL route Renderinitial route. Pre-cacheremaining routes. Lazy-loadand create remaining routes on demand.
- 21. PRPL Pattern
- 25. RAIL - performance model
- 31. Lighthouse - Google Chrome Extension
- 33. Study Cases
- 34. Twitter 65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate
- 35. Alibaba 76% higher conversions across browsers 14% more monthly active users on iOS; 30% on Android 4X higher interaction rate from Add to Homescreen
- 36. Moldova Guide PWA Build with Ember.js Deployed on Firebase
- 37. Thank you :)