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.
WKWebView in Production
7 things you should know about
Jeremy Wiebe
Senior Engineer, Lead
In the beginning there
was UIWebView
What is UIWebView?
• Original web rendering component
introduced in iOS 2.0
• This is what was historically used to build ...
Remember this?
UIWebView !== Safari
• Mobile Safari tends to load pages 2-3x faster
than a UIWebView
• Changes and fixes applied to Safar...
Why does UIWebView not have Nitro?
Nitro is excluded because
Apple wanted to make hybrid
apps less performant and
force ev...
Introducing
WKWebView
WKWebView
Introduced in iOS 8 to give developers a performant
webview (“same” performance as Safari)
WKWebView's rendering...
WKWebView == WebKit
Benefits of WKWebView
Better HTML 5 Support
WKWebView also gives us…
• Significant performance gains in WebGL
applications (though supported in UIWebview)
• Less "cra...
More benefits!
• Faster JavaScript and page rendering(thanks Nitro!)
• 60fps interactive scrolling
• Better communication ...
How do I implement WKWebView?
• Don’t worry, there’s a ton of great
documentation!
How do I implement WKWebView?
• Don’t worry, there’s a ton of great
documentation!
How do I implement WKWebView?
• Don’t worry, there’s a ton of great
documentation!
• What was formerly a single class (UIW...
WKWebView Related Classes
WKBackForwardList
WKBackForwardListItem
WKFrameInfo
WKNavigation
WKNavigationAction
WKNavigation...
More code required
• Automatically handled by UIWebView
• App store links
• JS alerts, confirms, inputs
• Sharing cookies ...
The 7 Wonders
Disappointments of
WKWebView
(and what to do about them)
Cannot load bundled content
in iOS 8
#1
Cannot load bundled content
• Critical to many apps
• UIWebView:
• webView!.loadRequest(request)
How do I implement WKWebView?
• High-level: copy the files we need to load into a
/tmp directory that we can load files fr...
Cannot intercept POST
requests
#2
Cannot intercept POST requests
• POST bodies are missing in NSURLRequest
sent to delegate methods
• Solution: for now leav...
Broken UI state preservation
#3
No state preservation participation
• WKWebView doesn’t conform to the state
preservation API (no restorationIdentifier)
•...
WSOD: White Screen of Death
#4
• Seeing some webviews display about:blank for
no reason upon navigating back
• Appears to be a memory issue
WSOD: White S...
WSOD - Our Solution
We poll each webview that we manage and not currently visible (in the view hierarchy)
Views Appear Halfway Down
#5
• Happens when the frame is not set before load
completes http://www.openradar.me/22855188
• Had to get creative on this o...
Our Solution
View Doesn’t Render
Until Visible
#6
View Doesn’t Render Until Visible
• Big problem for preloading tabs in a tab bar
layout
• Bigger problem if you rely on Ja...
Our Solution
Broken or Self-Signed
Certs in iOS 8
#7
WKWebView and Certs
• Bug in WKWebView where the documented
way of doing custom analysis of SSL
certificates is broken
• w...
Other Weird Bugs
Need to know about these:
• When app is sent to background, JS stops executing in ~10sec
while native code (and JS in UIWe...
Are others using it?
Who uses WKWebView?
WKWebView is
enabled by default in
our hybrid app SDK
astro.mobify.com
Q&A
Jeremy Wiebe
WKWebView in Production
Upcoming SlideShare
Loading in …5
×

WKWebView in Production

2,939 views

Published on

An overview of WKWebView and some of the pitfalls we encountered implementing it at Mobify.

Published in: Technology
  • Be the first to comment

WKWebView in Production

  1. 1. WKWebView in Production 7 things you should know about
  2. 2. Jeremy Wiebe Senior Engineer, Lead
  3. 3. In the beginning there was UIWebView
  4. 4. What is UIWebView? • Original web rendering component introduced in iOS 2.0 • This is what was historically used to build out hybrid apps or load any web content inside an iOS app
  5. 5. Remember this?
  6. 6. UIWebView !== Safari • Mobile Safari tends to load pages 2-3x faster than a UIWebView • Changes and fixes applied to Safari often not ported into UIWebView • UIWebview is clunky, crashy, leaks memory • Scrolling blocks images loading and animation • Different JavaScript engine than Safari (not Nitro)
  7. 7. Why does UIWebView not have Nitro? Nitro is excluded because Apple wanted to make hybrid apps less performant and force everybody to use their native platform Excluded due to security reasons. Running a Just-In- Time compiler requires marking pages in RAM as executable - iOS does not allow this out of security concerns (except in Safari) Cynical Answer Real Answer
  8. 8. Introducing WKWebView
  9. 9. WKWebView Introduced in iOS 8 to give developers a performant webview (“same” performance as Safari) WKWebView's rendering is all done in a separate process owned by the WKWebView
  10. 10. WKWebView == WebKit
  11. 11. Benefits of WKWebView
  12. 12. Better HTML 5 Support
  13. 13. WKWebView also gives us… • Significant performance gains in WebGL applications (though supported in UIWebview) • Less "crashy" behaviour when rendering bugs are triggered from HTML/CSS/JavaScript
  14. 14. More benefits! • Faster JavaScript and page rendering(thanks Nitro!) • 60fps interactive scrolling • Better communication between Swift and JS (we haven’t experimented with this yet) • Since we are sharing the JS engine with Safari, WKWebView should be better maintained and more reliable
  15. 15. How do I implement WKWebView? • Don’t worry, there’s a ton of great documentation!
  16. 16. How do I implement WKWebView? • Don’t worry, there’s a ton of great documentation!
  17. 17. How do I implement WKWebView? • Don’t worry, there’s a ton of great documentation! • What was formerly a single class (UIWebView) and protocol (UIWebViewDelegate) is now 14 classes and 3 protocols (WKNavigationDelegate, WKScriptMessageHandler, WKUIDelegate) • Other than class docs (and StackOverflow), no official “How-To WKWebView” from Apple
  18. 18. WKWebView Related Classes WKBackForwardList WKBackForwardListItem WKFrameInfo WKNavigation WKNavigationAction WKNavigationResponse WKPreferences WKProcessPool WKScriptMessage WKSecurityOrigin WKUserContentController WKUserScript WKWebViewConfiguration WKWebsiteDataRecord WKWebsiteDataStore WKWindowFeatures WKWebView
  19. 19. More code required • Automatically handled by UIWebView • App store links • JS alerts, confirms, inputs • Sharing cookies between web views
  20. 20. The 7 Wonders Disappointments of WKWebView (and what to do about them)
  21. 21. Cannot load bundled content in iOS 8 #1
  22. 22. Cannot load bundled content • Critical to many apps • UIWebView: • webView!.loadRequest(request)
  23. 23. How do I implement WKWebView? • High-level: copy the files we need to load into a /tmp directory that we can load files from • Alternative: serve files we need from a web server in the app • Solution: Fixed in iOS 9
  24. 24. Cannot intercept POST requests #2
  25. 25. Cannot intercept POST requests • POST bodies are missing in NSURLRequest sent to delegate methods • Solution: for now leave it -- in line with Android behaviour • Good news: WebKit forums indicate this is a bug and there seems to be a bit of traction
  26. 26. Broken UI state preservation #3
  27. 27. No state preservation participation • WKWebView doesn’t conform to the state preservation API (no restorationIdentifier) • In Astro its used to reduce memory footprint and prevent crashes • Solution: build our own by saving the last known URL
  28. 28. WSOD: White Screen of Death #4
  29. 29. • Seeing some webviews display about:blank for no reason upon navigating back • Appears to be a memory issue WSOD: White Screen of Death
  30. 30. WSOD - Our Solution We poll each webview that we manage and not currently visible (in the view hierarchy)
  31. 31. Views Appear Halfway Down #5
  32. 32. • Happens when the frame is not set before load completes http://www.openradar.me/22855188 • Had to get creative on this one. • Turns out, duplicate <head> tags are ignored… • … so we create a <head> tag at the beginning JUST to scroll back up Views Appear Halfway Down
  33. 33. Our Solution
  34. 34. View Doesn’t Render Until Visible #6
  35. 35. View Doesn’t Render Until Visible • Big problem for preloading tabs in a tab bar layout • Bigger problem if you rely on Javascript to run in those webviews • Solution is an off-screen “holding pen” for web views not currently visible
  36. 36. Our Solution
  37. 37. Broken or Self-Signed Certs in iOS 8 #7
  38. 38. WKWebView and Certs • Bug in WKWebView where the documented way of doing custom analysis of SSL certificates is broken • webView(_:didReceiveAuthenticationChallenge:completionHandler:) is never called • Important for internal use • No workaround
  39. 39. Other Weird Bugs
  40. 40. Need to know about these: • When app is sent to background, JS stops executing in ~10sec while native code (and JS in UIWebView) keeps running for ~3 min until completely suspended by OS. • Unlike UIWebView, the webView.URL property is updated to the navigation target the first delegate method is called by WKWebView. • App store links don’t work by default -- have to intercept requests (http://atmarkplant.com/ios-wkwebview-tips/#applink)
  41. 41. Are others using it?
  42. 42. Who uses WKWebView? WKWebView is enabled by default in our hybrid app SDK
  43. 43. astro.mobify.com
  44. 44. Q&A
  45. 45. Jeremy Wiebe

×