A cross platform/hybrid approach to application development offers several advantages for businesses as they can use the same underlying codebase but support numerous platforms. This allows for a much cheaper project when compared to a native approach, with a faster turnaround time and without the need for different developers for each platform. Perhaps the biggest benefit is that it also ties in to the “Bring Your Own Device” approach – business applications that can be accessed on a variety of devices.
One downside to the cross platform approach is the inconsistencies in the feature support on different devices and WebViews. These differences can range from minimal to large and can mean your application behaves differently on older devices.
What is a WebView?
The performance of the application on the device is often correlated to what version of the underlying browser technology is installed on the phone. Let’s do some comparing of what different browsers can support with Can I Use?
We can see the majority of newer devices support Flexbox, but older Android and Safari devices only have partial support. The addition of a custom WebView such as Crosswalk or WKWebView essentially upgrades the browser to the newest API, giving you access to a myriad of features that otherwise wouldn’t be supported on that phone.
This also comes with a performance increase (as is often the case with newer tech), so it is advised that a custom WebView is installed on our production projects.
There are ways to streamline the user experience across devices with an open source custom WebView named Crosswalk. This ensures that the user has a similar user experience on different versions of Android and iOS and negates some of the performance losses in different WebView versions.
A disadvantage to using Crosswalk in production applications is that the file size is significantly increased upon inclusion, adding approximately 20mb to the size of an Android .APK installation file. Whilst the performance and user experience benefits outweigh the increase in file size, it is important to consider if you’re looking to keep the file size as small as possible.
UIWebView and WKWebView
Ionic projects currently use UIWebView by default. It is an older, slower WebView which can make the iOS experience of Cordova projects feel sluggish when compared to Android. Significant performance improvements specifically on iOS platform can be found with the WKWebView project. It boasts speed boosts, better CPU utilisation, support for newer web standards and so on.
Here’s an example of such performance increases:
With the standard UIWebView running a WebGL application and interacting with the Social Sharing Plugin, a difference of 43FPS to 60FPS can be found as well as a 93% CPU usage vs 15% CPU usage when comparing UIWebView and WKWebView.
WKWebView also comes with a vast amount of stability improvements. It was introduced on Chrome 48 for iOS and it saw a vast amount of performance increases as well as “70% less crashes”.
Significant performance increases can be found when using custom WebViews as part of a Cordova application. The Crosswalk project is a common WebView used for Android and Windows Phone, whereas WKWebView seems to reign supreme for iOS. WebViews also allow you to take advantage of features that would otherwise be unsupported on older devices, increasing user consistency across a wide marketplace of devices.