Building a Progressive Web App

3,191 views

Published on

We have today on the web capabilities to create web apps that feel and act like native application.
We can have offline first, push notification and add to home screen. These three features bring us to a point where we can give users our content and features with one click and with all the benefits of the web.
What is this new monster you ask?
Well, go over these slides to learn more.

Published in: Internet

Building a Progressive Web App

  1. 1. Building a Progressive Web App
  2. 2. +Ido Green @greenido
  3. 3. Source: xkcd.com
  4. 4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 The web offers broader reach, but engagement is low Top 1000 mobile apps vs. top 1000 mobile web properties 10.9 Monthly unique visitors (MM) 3.3 Average minutes per visitor Mobile webApps 8.9 201.8
  5. 5. Progressive Web Apps ● Fast loading ● One click away from accessing content ● Smooth animations and navigations ● Re-engages with push notifications ● Good experience on flaky network connections ● Consistent experience across browsers
  6. 6. Covering today ● Progressive Web App by example (Flipkart) ● Foundations: ○ Service Worker ○ Web App Manifests ○ Push notifications ● Progressive Web App features
  7. 7. Flipkart Example
  8. 8. Time Spent on Flipkart Lite 3x 70 seconds 210 seconds
  9. 9. Returning Visitors week over week 40%
  10. 10. ...users loving it App
  11. 11. Enabling app-like capabilities Service Worker ● Client-side proxy written in JavaScript ● Access device capabilities to allow your site to be “app like” Web App Manifest File ● Rich presence on user’s Android homescreen ● Launch in full-screen mode on Android ● Control the screen orientation for optimal viewing ● Define “splash screen” launch, theme color for site { "short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [{"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
  12. 12. Add to Homescreen ...and launch in full- screen mode User who visits 2x in a within two weeks will be prompted with “add to homescreen” One tap to add to homescreen
  13. 13. Avoid the dreaded white screen Similar to apps, always show basic splash screen experience while your content loads
  14. 14. Load site quickly with app shell caching
  15. 15. Show content when on flaky networks
  16. 16. Instant loading and smooth navigation ● For first-time visitors, load pages in <10s on 3G connections ● For repeat visitors, instant loading of page in <500 milliseconds ● Always scrolling at 60 frames/second ● Content shouldn’t jump as images are loaded 4
  17. 17. PWAs can work across browsers ● Using standard progressive enhancement techniques, PWAs can be made to work across all modern browsers ● Service Worker available in Chrome and Opera and soon Firefox; Microsoft is interested, Safari and UC Web exploring. 7
  18. 18. Europe Mobile Browser Share in 2015 Europe 50% (up 11% YoY) 27% (down 4% YoY) 13% (down 8% YoY) 4% (up 1% YoY) Germany 51% (up 7% YoY) 25% (down 3% YoY) 15% (down 10% YoY) 3% (up 1% YoY) UK 37% (up 7% YoY) 48% (down 6% YoY) 6% (down 5% YoY) 3% (same YoY) France 47% (up 4% YoY) 32% (down 2% YoY) 11% (down 6% YoY) 4% (same YoY) Source: StatsCounter Global Stats
  19. 19. North America Mobile Browser Share in 2015 Other US 41% (up 6% YoY) 50% (up 2% YoY) 5% (down 7% YoY) 1% (down 1% YoY) Canada 37% (up4% YoY) 51% (down 1% YoY) 6% (down 5% YoY) 3% (same YoY) Source: StatsCounter Global Stats
  20. 20. Send Web push notifications System level notifications, like apps Ask to notify users with specific information Can send notifications even when page closed
  21. 21. Push Notifications
  22. 22. Why web push notifications are powerful 26%increase in average spend per visit by members arriving via a push notification 72%increase in time spent for users visiting via a push notification
  23. 23. Baseline implementation for PWA engagement Required Recommended HTTPS + Service Worker Web App Manifest Push notifications Advanced Offline Support App shell caching Splash screen Smooth navigation “Progressive enhancement” with cross browser support
  24. 24. Voice Memos Air Horner
  25. 25. Go Build Something Amazing!
  26. 26. Thank you! +Ido Green @greenido

×