do u webview?

6,105 views

Published on

Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.

Published in: Technology

do u webview?

  1. 1. do u webview? @souders stevesouders.com/docs/svmwameetup-webviews-20140930.pptx
  2. 2. flickr.com/photos/dullhunk/3930915541/
  3. 3. Scott Jenson flickr.com/photos/29022619@N03/798025115
  4. 4. designmind.frogdesign.com/blog/mobile-apps-must-die.html native ^ too much trouble high hurdle JIT interaction discoverability
  5. 5. ?
  6. 6. hybrids are great "geep" more code reuse across web & hybrid more design reuse across web & hybrid support more devices more quickly avoid app store re-approval process signalvnoise.com/posts/3743-hybrid-sweet-spot-native- navigation-web-content today.com/pets/baby-geep-cross-between-goat-sheep-stealing-hearts-everywhere-1D80007977
  7. 7. do u webview? YES! we all do
  8. 8. WebView Traffic flickr.com/photos/53780686@N04/5052368839 • hard to track – UA varies • Chrome: ~6% of iOS traffic* Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/37.0.2062.60 Mobile/11D257 Safari/9537.53 • Facebook app: ~5% of iOS traffic* Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201 [FBAN/FBIOS;FBAV/12.1.0.24.20;FBBV/3214247;FBDV/iPhone6,1;FBMD/iPhone ;FBSN/iPhone OS;FBSV/7.1.1;FBSS/2; FBCR/AT&T;FBID/phone;FBLC/en_US;FBOP/5] You don't need a hybrid app to get webview traffic * wurfl.io/MOVR/
  9. 9. guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/
  10. 10. "Their testing is flawed. They didn't actually test the Safari browser on the iPhone. Instead they only tested their own proprietary app, which uses an embedded Web viewer that doesn't actually take advantage of Safari's Web performance optimizations" - Apple guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/
  11. 11. flickr.com/photos/airflore/4779420939
  12. 12. "Their testing is flawed. They didn't actually test the Safari browser on the iPhone. Instead they only tested their own proprietary app, which uses an embedded Web viewer that doesn't actually take advantage of Safari's Web performance optimizations" - Apple guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/
  13. 13. UIWebView iOS4.3 • Nitro JS engine (JIT, 2.5x faster) • application cache • async script loading hybrid apps & home screen apps performed slower flickr.com/photos/jorislouwes/8097404205 /
  14. 14. iOS 7 UIWebView
  15. 15. iOS 7 UIWebView iOS 8 WKWebView
  16. 16. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview
  17. 17. iOS 7 UIWebView iOS 8 WKWebView Android 4.3 Webview Android 4.4 Webview Chromium WebKit
  18. 18. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓
  19. 19. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434
  20. 20. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓
  21. 21. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓ SPDY ✓ ✓
  22. 22. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓ SPDY ✓ ✓ WebP ✓ srcset ✓ ? WebGL ✓ ?
  23. 23. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓ SPDY ✓ ✓ WebP ✓ srcset ✓ ? WebGL ✓ ? requestAnimatio nFrame ✓ ✓ ✓
  24. 24. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓ SPDY ✓ ✓ WebP ✓ srcset ✓ ? WebGL ✓ ? requestAnimatio nFrame ✓ ✓ ✓ Nav Timing ✓ ✓ ✓ Resource Timing ✓
  25. 25. Legacy Webviews hybrid apps have to be rebuilt Android webview is pinned at Chromium 30; requires OS upgrade to update Android hybrid apps can bundle other webviews: Crosswalk, Geckoview legacy webviews are here for awhile flickr.com/photos/telstar/4572243525
  26. 26. iOS 7 UIWebView iOS 8 WKWebView WebKit Android 4.3 Webview Android 4.4 Webview Chromium Nitro/V8 ✓ ✓ html5test.com 410 440 278 434 localStorage ✓ ✓ ✓ ✓ app cache ✓ ✓ ✓ ✓ indexedDB ✓ ✓ SPDY ✓ ✓ WebP ✓ srcset ✓ ? WebGL ✓ ? requestAnimatio nFrame ✓ ✓ ✓ Nav Timing ✓ ✓ ✓ Resource Timing ✓
  27. 27. docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present
  28. 28. docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present
  29. 29. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  30. 30. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  31. 31. speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  32. 32. takeaways web & hybrid apps are good browser & webview perf differs you DO have webview traffic old webviews here for awhile measure perf on all webviews optimize for mobile
  33. 33. Brian LeRoux Guy Podjarny Max Firtman Tim Kadlec
  34. 34. Steve Souders @souders stevesouders.com/docs/svmwameetup-webviews-20140930.pptx

×