Cordova iOS Performance Improvements: Drop-in Speed with WKWebView
Still using UIWebView? Apple now requires WKWebView for iOS apps. Follow this guide to update your Ionic apps.
Here at Ionic, we believe speed is a requirement, not a feature. We take pride in being performance-obsessed, because we believe speed is key to providing a first-class user experience. Most of the apps at the top of the App Store charts all have one thing in common: They’re all very fast and fluid! Ionic apps have always provided a quick, seamless experience, but we’ve come up with a simple way to make them even faster on iOS.
Ionic apps deployed using Cordova run within low-level, bare bones web browsers called “webviews”. Cordova utilizes each platform’s native webview in order to deploy the webapp within a native app wrapper.
iOS’s default web browser is Safari. Behind the scenes, Safari utilizes a webview. Currently, the iOS platform provides two different webviews that can be used. There’s the older (and slower) webview, called “UIWebView”, and the latest and greatest, called “WKWebView”. WKWebView is better and faster than UIWebView in every way. In addition to being significantly faster and smoother, Apple is actively providing updates to it in each iOS release. The Safari app takes advantage of WKWebView, which may explain why webapps seem more performant in Safari vs. within a Cordova application. Due to various incompatibilities and technical challenges, Ionic apps have been restricted to run in the several-year-old UIWebView.
But today, we have some great news! One of our awesome engineers, Manu, has been working hard to bring WKWebView to Ionic apps and is working to bring the new plugin into Cordova! The new plugin will work with both Ionic V1 and Ionic V2 apps. In fact, it should work with any iOS Cordova build!
So What Does This Actually Mean?
You can look forward to noticeably faster and smoother Ionic apps on iOS. The new WKWebView plugin solved many of the technical challenges Cordova builds faced surrounding XHR requests and CORS, storage issues, and some DOM exceptions. This plugin upgrades the interface between native side and web, which allows CORS to work properly. This means XHR requests that point to file:
are intercepted and redirected, while leaving normal XHR requests to flow the normal path.
Not only that, but WKWebView comes with a massive reduction in RAM usage, faster startup, JIT JavaScript compilation, out-of-process rendering, reduced memory usage, improved stability, better security, up-to-date web standards, etc. According to our tests, our conference app example went from 160MB of RAM to 20MB with WKWebview.
“The biggest change is in stability: with WKWebView’s out-of-process rendering, when the web view crashes or runs out of memory, it won’t bring down all of Chrome with it. As a result, Chrome crashes 70% less with WKWebView.” – Chromium Blog
We think it’s ready for the Ionic community to begin testing it and help us identify any bugs. The best part is this is a drop-in replacement. No app code needs to be changed!
To install the plugin and begin testing, follow these instructions. The plugin takes about one minute to install and should not impact end users beyond performance improvements. We would love for everyone to test out their apps with the new plugin, and let us know how it goes. We’d like to resolve any issues that arise ASAP.
We’re very excited about this plugin and think it will provide an immediately noticeable performance increase in Ionic apps deployed to iOS. We encourage developers to test and experiment with this plugin, but we recommend avoiding production use until a stable version is released and any security concerns are further addressed. We’re very appreciative of the Ionic community for helping us test out this new and improved functionality. We hope you love it! Thank you!
A Note on Cordova
If you haven’t already, we encourage you to check out Capacitor, our cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, and the web. It is backward compatible with Cordova, uses WKWebView by default on iOS, and provides an improved developer experience across the board.
Although we’ve created a new project, Ionic still uses Cordova heavily and will continue to invest in the platform for a long time to come.