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.

Progressive Web Applications


Published on

Offline, Push Notifications and more..

Published in: Technology
  • Attract Abundance Into Your Life - New musical "Angel tone" calls in your angels to help you manifest abundance and miracles into your life... starting in just minutes per day. Go here to listen now. ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here

Progressive Web Applications

  1. 1. Offline, Push Notifications and more… Progressive Web Applications Bartek Igielski Lead Front-end Developer at Snowdog @igloczek
  2. 2. Distributing native software is hard
  3. 3. Web have great distribution model Links are the Web superpower!
  4. 4. Do you use web
 version of Google Maps
 on your desktop or laptop computer?
  5. 5. Do you use web
 version of Google Maps
 on your phone?
  6. 6. We use Web on mobile in different way… …but on desktop we used only native apps too and it changed!
  7. 7. We should focus on 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
  8. 8. What is the PWA? 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.
  9. 9. As the user progressively 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?
  10. 10. 1. HTTPS 2. Web App manifest 3. Registered service worker Minimum requirements of PWAs service-worker/custom-offline-page/service-worker.js
  11. 11. How to get save prompt? The user has visited your site at least twice, with at least five minutes between visits. install-banner/
  12. 12. Progressive Web Apps vs Progressive Enhancement
  13. 13. Magento 2 weight First load 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
  14. 14. > 50KB? So it’s fast to load!
  15. 15. > Unless you are offline > 50KB? So it’s fast to load!
  16. 16. How to handle offline on Web?
  17. 17. Web server
  18. 18. Web server
  19. 19. Cache Service worker Client side proxy Web server
  20. 20. SW network strategies • networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
  21. 21. SW capabilities • fetch and 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…
  22. 22. 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!
  23. 23. Google I/O 2016 Progressive 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
  24. 24. Q & A Time! Let’s stay in touch Twitter: @igloczek Blog:
  25. 25. Thank you!
  26. 26. Sources • Google for developers - Progressive Web Apps - https:// • Your First Progressive Web App - web/fundamentals/getting-started/your-first-progressive-web-app/ • Opening Keynote (Progressive Web App Summit 2016) - https:// • The 2016 U.S. Mobile App Report - Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile- App-Report • engagement-with-app-install-banners-in-chrome-for-android