do u webview?
DESCRIPTION
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.TRANSCRIPT
![Page 1: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/1.jpg)
@souders
stevesouders.com/docs/svmwameetup-webviews-20140930.pptx
do u webview?
![Page 2: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/2.jpg)
flickr.com/photos/dullhunk/3930915541/
![Page 3: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/3.jpg)
flickr.com/photos/29022619@N03/798025115
Scott Jenson
![Page 4: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/4.jpg)
designmind.frogdesign.com/blog/mobile-apps-must-die.html
native
^ too much trouble
high hurdle
JIT interaction
discoverability
![Page 5: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/5.jpg)
![Page 6: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/6.jpg)
?
![Page 7: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/7.jpg)
![Page 8: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/8.jpg)
webview
![Page 9: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/9.jpg)
![Page 10: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/10.jpg)
hybrids are greatmore 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
"geep"
![Page 11: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/11.jpg)
do u webview? YES!we all do
![Page 12: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/12.jpg)
webview
![Page 13: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/13.jpg)
webview
![Page 14: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/14.jpg)
flickr.com/photos/53780686@N04/5052368839
WebView Traffic
• 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/
![Page 15: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/15.jpg)
guypo.com/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/
![Page 16: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/16.jpg)
"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/
![Page 17: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/17.jpg)
flickr.com/photos/airflore/4779420939
![Page 18: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/18.jpg)
"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/
![Page 19: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/19.jpg)
UIWebView iOS4.3• Nitro JS engine (JIT, 2.5x faster)• application cache• async script loading
hybrid apps & home screen apps
performed slowerflickr.com/photos/jorislouwes/8097404205/
![Page 20: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/20.jpg)
iOS 7 UIWebView
![Page 21: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/21.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
![Page 22: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/22.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
WebKit
![Page 23: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/23.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Chromium
WebKit
![Page 24: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/24.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓Chromium
WebKit
![Page 25: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/25.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓html5test.com 410 440 278 434
Chromium
WebKit
![Page 26: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/26.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
Chromium
WebKit
![Page 27: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/27.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
Chromium
WebKit
![Page 28: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/28.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?
Chromium
WebKit
![Page 29: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/29.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓
Chromium
WebKit
![Page 30: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/30.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓
Nav Timing ✓ ✓ ✓Resource Timing ✓
Chromium
WebKit
![Page 31: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/31.jpg)
Legacy Webviewshybrid 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
flickr.com/photos/telstar/4572243525
legacy webviews are here for
awhile
![Page 32: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/32.jpg)
iOS 7 UIWebView
iOS 8 WKWebView
Android 4.3 Webview
Android 4.4 Webview
Nitro/V8 ✓ ✓
html5test.com 410 440 278 434
localStorage ✓ ✓ ✓ ✓
app cache ✓ ✓ ✓ ✓
indexedDB ✓ ✓
SPDY ✓ ✓
WebP ✓
srcset ✓ ?
WebGL ✓ ?requestAnimationFrame ✓ ✓ ✓
Nav Timing ✓ ✓ ✓Resource Timing ✓
Chromium
WebKit
![Page 33: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/33.jpg)
![Page 34: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/34.jpg)
docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present
![Page 35: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/35.jpg)
docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present
![Page 36: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/36.jpg)
speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
![Page 37: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/37.jpg)
speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
![Page 38: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/38.jpg)
speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
![Page 39: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/39.jpg)
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
takeaways
![Page 40: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/40.jpg)
Brian LeRoux
Guy Podjarny
Max Firtman
Tim Kadlec
![Page 41: do u webview?](https://reader033.vdocument.in/reader033/viewer/2022061200/5476db4fb4af9fae028b46e7/html5/thumbnails/41.jpg)
Steve Souders
@souders
stevesouders.com/docs/svmwameetup-webviews-20140930.pptx