Download as PDF, PPTX
More Related Content
Similar to Progressive Web Applications
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Progressive Web Applications
- 1. Offline, Push Notificationsand more… Progressive Web Applications Bartek Igielski Lead Front-end Developer at Snowdog @igloczek
- 2. Distributing native softwareis hard
- 4. Web have greatdistribution model Links are the Web superpower!
- 5. Do you useweb version of Google Maps on your desktop or laptop computer?
- 6. Do you useweb version of Google Maps on your phone?
- 7. We use Webon mobile in different way… …but on desktop we used only native apps too and it changed!
- 10. We should focuson improving user experience It’s a good way to make loyal, returning visitors, who want to leave money in your online store. Especialy on mobile
- 11. What is thePWA? Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required.
- 12. As the userprogressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen and loads as a top-level, full screen experience. What is the PWA?
- 13. 1. HTTPS 2. WebApp manifest 3. Registered service worker Minimum requirements of PWAs https://github.com/GoogleChrome/samples/blob/gh-pages/ service-worker/custom-offline-page/service-worker.js
- 14. How to getsave prompt? The user has visited your site at least twice, with at least five minutes between visits. https://github.com/GoogleChrome/samples/tree/gh-pages/app- install-banner/
- 15. Progressive Web Apps vs ProgressiveEnhancement https://samthor.github.io/AlwaysBeProgressive/
- 17. Magento 2 weight Firstload almost any page Size: ~1.0MB +-100KB (BTW. 500KB JS) Home page - Second load Size: 10.3KB Category view - Second load Size: 35.9KB Product view - Second load Size: 37.5KB
- 18. > 50KB? Soit’s fast to load!
- 19. > Unless youare offline > 50KB? So it’s fast to load!
- 20. How to handleoffline on Web?
- 21.
- 22.
- 23. Cache Service worker Client sideproxy Web server
- 24. SW network strategies •networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
- 25. SW capabilities • fetchand edit any request • push notifications or any other background tasks • intercept offline requests i.e. user will make an order offline and SW sends data when online again • anything you can write in JS…
- 26. Case studies AliExpress • 104%for new users across all browsers; 82% increase in iOS conversion rate • 2X more pages visited per session per user across all browsers • 74% increase in time spent per session across all browsers Flipkart (India’s largest e-commerce site) • Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds. • 3x more time spent on site • 40% higher re-engagement rate • 70% greater conversion rate among those arriving via Add to Homescreen • 3x lower data usage PS. Great app, totally worth to check!
- 27. Google I/O 2016Progressive Web App • More engagement than the native app (4:06 min mobile web vs. Android's 2:40 min). • 450ms faster first paint for return users thanks to service worker caching • 84% of visitors supported Service Worker • Add to homescreen saves were up +900% compared to 2015. • 3.8% users went offline but continued to generate 11k pageviews! • 50% of signed in users enabled notifications. • 536k notifications were sent to users (12% brought them back). • 99% of users' browsers supported the web components polyfills
- 28. Q & ATime! Let’s stay in touch Twitter: @igloczek Blog: iglo.tech bartek.igielski@snow.dog
- 29.
- 30. Sources • Google fordevelopers - Progressive Web Apps - https:// developers.google.com/web/progressive-web-apps/ • Your First Progressive Web App - https://developers.google.com/ web/fundamentals/getting-started/your-first-progressive-web-app/ • Opening Keynote (Progressive Web App Summit 2016) - https:// www.youtube.com/watch?v=9Jef9IluQw0 • The 2016 U.S. Mobile App Report - https://www.comscore.com/ Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile- App-Report • https://developers.google.com/web/updates/2015/03/increasing- engagement-with-app-install-banners-in-chrome-for-android