WKWebView for All: A new webview for Ionic

Hi folks! So today I’m really super excited to share something we’ve been testing heavily for a long time now. As of now… new Ionic apps will run on WKWebView…BY DEFAULT 🎉!

Ok, so let’s have a brief history lesson on why this is really important and also beneficial to you as a developer. It’s no secret that WKWebView has been out for some time now, but in that time, it’s had some issues, especially in hybrid app land. Many people have attempted to work around these issues, but it’s not until recently that we’ve gotten to a place where WKWebView can be reliably used in people’s apps, without broken functionality. This means we get incredible performance gains on iOS, reduced memory footprint, scroll events, and so much more by just using the new webview!

Adding WKWebView to your app

In order to add WKWebView, we need to add the plugin from the Ionic repository.

ionic cordova plugin add cordova-plugin-ionic-webview --save

If you already had the plugin installed, or were using a different version/fork, you’ll need to uninstall what you have first.

ionic cordova plugin rm cordova-plugin-WKWebView-engine

And that’s it! Once the plugin install is done, your next native build will include a faster, lighter, and more modern webview!

Important concerns

Since this is an entirely different webview than UIWebview, there are a few things to be aware of before making the change.

Data in localstorage/IndexDB will not be transferred to the new webview

This makes sense when you think about how this is essentially a new browser. If your data is stored using the SQLite plugin, by itself or in combination with @ionic/storage, this can be dealt with. Before pushing a new update with the webview, it might be worth taking the time to migrate that data over from web storage, to a native storage solution.

WKWebView enforces CORS

UIWebview, or the older webview in iOS, never actually enforced CORS, but WKWebView does and does not provide a way to disable it. To address this, you need to implement CORS correctly and add the following entry:

Origin: http://localhost:8080

IF this is not possible (you do not own the API), a workaround can be to use the native HTTP plugin, @ionic-native/http.

Native files not loading correctly

If you’re using the Camera plugin, or reading/writing from the devices file system, you might get a file path that looks something like

file:///some/really/long/path.png

The file:// portion of the URL must be removed in order for the resource to load correctly. You can do this manually, but as of ionic-angular@3.2.0, we provide a quick function that will handle this automatically.

import { normalizeURL } from 'ionic-angular';

let path = cordova.file.dataDirectory;
console.log('Original: ' + path);

path = normalizeURL(path);
console.log('Fixed: ' + path);

Cordova plugins also allow you to reference a file via the cdvfile:// protocol. This path is something that gets resolved in native code, so it cannot be used with normalizeURL.

Authentication services need to whitelist localhost

Since WKWebView uses a server under the hood, it will create a url for your app, localhost:8080, instead of serving things through file://. In doing this, authentication providers, like Firebase and Auth0, need to be told to allow this URL when it hits their API. There should be a section called “Allowed Origins” or “Authorized Domains”. This will make sure your app can authenticate correctly.

That’s it! We’ve put all of the notes here in our WKWebView docs, if you ever need to reference them again. We’re very excited about shipping WKWebView as default, and we hope to see many of you adopt it into your apps. I’d also like to thank so many of you for all your feedback, testing, and issue reporting during the early versions and releases of the plugin. Your feedback has only made the plugin even better! Thanks 🍻