Skip to Content
Product Information

Hybrid Application Toolkit – apps for iOS: switching to WKWebView

Update 19 March 2020: Added additional workaround for offline apps.

For those developing hybrid cross-platform apps with SAP Web IDE Full-Stack, by making use of the Hybrid Application Toolkit extension and SAP Mobile Services, there is an important update for the iOS platform.

But before I jump into the details, I want to remind you about the following:

When you start developing a new mobile app, we strongly recommend that you consider developing this with either MDK (Mobile Development Kit) for cross platform applications, or our native SDKs (SAP Cloud Platform SDK for iOS or SAP Cloud Platform SDK for Android).

Some background on the WebView components

Cordova for iOS has been using the iOS platform component UIWebView for a long time. UIWebView was originally introduced in iOS 2.0. This component is used by Cordova to display web content in a native app. This is the crucial part that makes an app a hybrid app – part native code, part web app.

At WWDC 2018 (June 2018), Apple introduced the iOS 12 SDK beta, in which this component was deprecated. It took quite a bit of time for the open source community to adopt the alternative component named WKWebView. There are plenty of reasons for this to find online, so I’ll not go into details here. Note that Apple has not removed UIWebView until now, and will not do this any time soon.

However, in December 2019 Apple made an announcement that impacts apps published in Apple’s iOS App Store:

  • The App Store will no longer accept new apps using UIWebView as of April 2020
  • The App Store will no longer accept app updates using UIWebView as of December 2020

My expectation is that Apple will remove UIWebView in 2021 with the introduction of iOS 15. I can be wrong here; but this seems the most logical at this point.

Impact for your hybrid app

What does this mean for you as a developer, having used Hybrid Application Toolkit to build iOS apps ?

  1. If you are planning to publish a new app, you should first of all consider using MDK.
  2. If you still go ahead with a hybrid app, then this iOS app needs to use WKWebView from April 2020 onwards, BUT ONLY WHEN YOU INTEND TO PUBLISH THE APP IN THE PUBLIC APP STORE. If you intend to distribute your app within your enterprise, using a mobile device management solution, then you are not tied to this deadline.
  3. If you have an existing app in the AppStore, you have until December 2020 to switch to WKWebView for publishing updates.
  4. Speculative: when Apple rolls out iOS 15 in 2021, your UIWebView based apps will not work anymore.

How to ensure your app uses WKWebView

New apps

For new mobile hybrid apps created in SAP Web IDE Full-Stack with Hybrid Application Toolkit, we have updated our template code to ensure WKWebView is used by default. As soon as you ‘mobile-enable’ your project, it will automatically be configured for this. Once you rebuild the app with our Cloud Build Service, the resulting app uses WKWebView.

Existing app

For existing apps, you will have to modify your code and configuration settings, and trigger a new build with our Cloud Build Service. Steps:

  1. Add the cordova plugin “cordova-plugin-wkwebview-engine” to your project. The easiest way to do this is by opening the project context menu (right-click on the project) and select Mobile > Select Cordova Plugins. Then search for the above mentioned plugin in the list of publicly available plugins, add it, and save the selection.
  2. Optionally, as our Cloud Build Service should eventually add this automatically, but it might take a while before this is updated (you can download the XCode project and verify yourself):
    1. Add
      <preference name="WKWebViewOnly" value="true" />​
      
      

      in config.xml to ensure UIWebView is completely removed at compile-time.

    2. Ensure cordova ios 5.1.1 or later is used.
    3. In config.xml, add
      <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
      <feature name="CDVWKWebViewEngine">
          <param name="ios-package" value="CDVWKWebViewEngine" />
      </feature>
      ​

Offline Apps

For offline apps, either new, or existing ones, there is an additional change required. This is a temporary workaround until the Mobile SDK (Kapsel) is updated.

In this blog post I’ve provided an example of how to initialise an offline store. In the success callback we use the sap.OData.applyHttpClient() to ensure offline OData calls use datajs. This will also enable Xhook for handling calls to fetch local media files. However, this piece has an issue and a fix will be provided soon. Until our Cloud Build Service is updated with this fix, please disable Xhook by calling sap.Xhook.disable().

var openStoreSuccessCallback = function() {
    sap.OData.applyHttpClient();  //Offline OData calls can now be made against datajs.
    sap.Xhook.disable(); // temporary workaround to ensure the offline app can work in WKWebView
    sap.hybrid.startApp();
}

Improvements coming with WKWebView

Noticeable changes with the WebView are in the area of (perceived) performance:

  • Faster JavaScript engine, using Nitro.
  • WKWebView runs of out of process.
  • JavaScript is handled asynchronously, eliminating blocking calls.
  • Improvements in handling touch events (less delay).

Challenges coming with WKWebView

Besides improvements, there are unfortunately also some issues introduced. The main issue is that WKWebView comes with stricter cross origin resource sharing rules (CORS). To resolve some of these, we are making use of the Kapsel native plugin “AuthProxy”.

When debugging the app using Safari (remote debug), you will not see the traffic going through native code. In case you want to debug these calls (e.g. OData queries), it is recommended to use the Network Traces feature in the SAP Mobile Services cockpit.

When can you make the switch?

You can already switch to WKWebView now and start testing. However, in order to comply with the App Store submission guidelines for new apps set by Apple, you need to use Cordova for iOS 5.1.1 in order to completely remove any reference to UIWebView. This update has not been released yet for our Mobile SDK and as such is also not yet available on our Cloud Build Service.

In case you run into problems

We have thoroughly tested the apps generated with Hybrid Application Toolkit and did not find issues after making the switch to WKWebView. However, your apps might make use of features (or plugins) that are affected by this change. Please ensure you test your apps before rolling them out to your users.

In case you are facing issues, please raise a support ticket for component CA-WDE-MOB.

Thanks,
Ludo Noens

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.