The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

wkwebview

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

Going forward, we’re going to be ramping up our contributions to crucial pieces of the Cordova ecosystem. We recently released two new plugins, have been reviewing the existing ecosystem that we’re supporting through Ionic Native, and have a dedicated person on the team working on Cordova plugins and features like WKWebView. We believe the Cordova ecosystem’s best days are ahead of it, and we recognize the responsibility we have in contributing back and making sure that stability and performance are constantly pushed as new technologies like WKWebView are made available. We are making an investment in improving the pieces around Ionic and working with the wonderful Cordova community to make sure our work has the biggest possible impact.

Related Links

  • Mauricio Schwartzhaupt Narcizo

    Great! Nice Job!

  • Shashank

    Really cool to see you guys working on performance. That’s always been the biggest issue especially on older devices.

  • Kévin

    Working really well thanks ! PouchDB doesn’t work with it by default though so I’ve switched to https://github.com/nolanlawson/cordova-plugin-sqlite-2 is a nice workaround.

    • Young Park

      Hi, I’m also using PouchDB but I’m getting this error.. after installing wkwebview. any help?
      WebSQL threw an error Error: Error code 14: unable to open database file

      • yesimahuman

        Web SQL is not available in WKWebView as it was deprecated. Are you seeing this issue with Ionic 2 Storage or something else? If it’s Storage, we’re close to releasing a tweak of the Storage engine to not use WebSQL anymore

        • Young Park

          Have you guys ever tested with PouchDB? Just wondering because i tried with different adapters https://pouchdb.com/adapters.html
          but seems non works.

          • danbucholtz

            We did not test PouchDB. We tested local storage using the Ionic API, WebSQL/sqllite, IndexedDB, file access, and a few other use cases. WebSql is disabled in WKWebView, and IndexedDB does not work in iOS 9. My guess is that is why PouchDB is failing. Can you tell PouchDB to use sqllite? Nolan Lawson (PouchDB maintainer) makes a sqllite Cordova plugin that we have tested with (https://nolanlawson.com/2016/04/10/introducing-the-cordova-sqlite-plugin-2/)

            Thanks,
            Dan

          • Patrick

            Have you test IndexedDB? Still not working? Maybe you can test FruitDOWN adapter from pouchdb

          • Young Park

            I tested both websql and indexedDB (using Fruitdown).
            none works, since wkwebview do not support both.

            PouchDB author suggested to use cordova-sqlite adapter, but not stable at this point.

          • Kévin

            It works for me very well like I said with https://github.com/nolanlawson/cordova-plugin-sqlite-2

            I’m on [email protected]

            here is how I import PouchDB

            var PouchDB = require(“pouchdb”);
            PouchDB.plugin(require(‘crypto-pouch’));
            PouchDB.plugin(require(‘pouchdb-find’));

            (window).PouchDB = PouchDB;

      • interferences-studio

        I go the issue when using the wkwebview : WebSQL threw an error : SecurityError: DOM Exception 18. With the previous web view, it was working properly
        I am using PouchDB 5.4.5 and cordova-plugin-sqlite2. Any idea ?

  • https://jokeyrhyme.github.io/ jokeyrhyme

    I noticed that “Plugin Repository” links to the Ionic fork from the original Apache copy of this plugin.

    Will we see these changes included in the upstream Apache version (which has a nice NPM name)?
    Or will we see the fork published to NPM under a different name?

    • danbucholtz

      We’re working with the Cordova team to get our changes eventually merged in to the main WKWebView plugin repo. We’re actively looking for beta testers so we can resolve any issues before we proceed with that process.

      Thanks,
      Dan

  • Hanz Gan

    Been waiting for this! Keep pushing the limits!

  • ghenry22

    Awesome to see this, if the holes in wkwebview can be plugged so it’s actually usable that is fantastic. Just gave it a try on my project which is currently using ionic2 beta10 and came across one issue you might want to look at or document:

    If you use the cordova-plugin-splashscreen, make sure that the autohidesplasscreen value is set to true in your config.xml as below:

    Otherwise an exception is thrown in the native code that it cannot remove an observer from CDVsplashscreen and your app will hang. You can reproduce by adding the splashscreen plugin with the value set to false on any default project and just watch the native console output in xcode. Does throw anything in the javascript console so if you aren’t running in xcode you will be incredibly frustrated.

  • Guillaume

    What about taking pictures? I’ve had this issue with wkwebview for a while and nothing seems to have been done so far… https://github.com/Telerik-Verified-Plugins/WKWebView/issues/41

  • http://rkistner.github.com/ Ralf Kistner

    The benefits are a little over-stated here.

    1. I’ve found effectively no memory improvements in practice. The memory is simply moved from the main process to an external process used for the web view. In the conference app example, I’d guess that the external process would consume around 140MB of RAM.

    2. The Chrome quote is not relevant to Cordova apps. In Chrome, it now means that when the webview process crashes, only the single tab is affected. In a Cordova app however, the webview process crashing would mean taking down the entire app anyway. It will likely end up with a blank white screen, which could be even worse than crashing.

    That said, I have found that WKWebView fixes a few significant UI glitches that I haven’t been able to work around in UIWebView (especially glitches related to scrolling).

    I also expect the XHR workaround in this fork to make migrating to WKWebView significantly easier.

    • Wei Keat Ho

      Hi @rkistner:disqus , I do agree the memory usage is shifted from the main process to the external process. It’s 3 months since you’ve posted here, Is there a remedy for this? Something to clear the external process memory usage before the blank white screen appears… Ionic state.go has memory leakage in version 1.2.4. Does upgrading the ionic version help?

      • http://rkistner.github.com/ Ralf Kistner

        I’m not actually using this in production yet. Not sure if there are any remedies.

  • Oliver Faderbauer

    How does this copare to Crosswalk? AFAIK Crosswalk wraps the webview and provides additional performance (somehow automagicly). So does this now replace crosswalk, or will they work together?

    Or am i just comparing apples and bananas?

    • Manu Martinez-Almeida

      Crosswalk is a Android only technology. You should expect a similar crosswalk performance in iOS with WKWebView!

      • Oliver Faderbauer

        Well that makes sense, nice 🙂 Thanks for the clarification.

      • Mike Callaghan

        Also, isn’t Crosswalk designed for older Android devices that don’t use Chrome by default? This seems more for modern iOS devices.

      • Easy2Meet

        It does seem like crosswalk also has a wkwebview project targeted at ios. I haven’t tried it, but you should therefore be able to use crosswalk for both ios and android. (is there anyone with the experience to back this up?)

        https://crosswalk-project.org/documentation/ios.html

  • http://www.nickkenens.com Nick Kenens

    God, I love you guys so much.

  • Luís Cunha

    Your commitment not only to ionic but also cordova and performance makes me very happy =)

  • t_specht

    Those are fantastic news! Can’t wait to implement this in my application!

  • Nicolás Broggi

    Does this work with Ionic View? I upload my app but it returns “UIWebView”

    • Tim Lancina

      Not yet! But we’ll probably add it in a future release.

      • Nicolás Broggi

        Ok! Thanks!

  • sandeepperkari

    Hi, I have added WKWebview plugin to my Ionic project yesterday, I see XHR errors, pages not loading, I see the following errors in the console “CDVWKWebViewEngine: XHR intercepted”, “CDVWKWebViewEngine: requested path can not be accessed: file:///var/containers/Bundle/Application/”, Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Can some one help me out?

  • Sagiv Frankel

    worked nicely on the simulator but failed on the device.
    https://github.com/driftyco/cordova-plugin-wkwebview-engine/issues/21

    Does this work nicely with crosswalk?

    On another note, when ever I change anything with plugins my app goes haywire.
    Could you guys maybe do a post on the plugin system?
    I recently stumbled upon this – https://github.com/driftyco/ionic-cli#ionic-state which helps out a lot but I still don’t understand:
    – How do I lock down a specific version? Ionic state seems to only save the package name.
    – why do some plugins get saved in the config.xml? should they be in both the config.xml and the package.json.

    Working with the plugin systems can be a big challenge sometime and more info would help a lot.

  • Easy2Meet

    Did anyone have experience swapping the Telerik wkwebview plugin with this plugin?
    The Telerik plugin (for example) does not support the latest version of Cordova-IOS, so swapping would be awesome for us.

  • Zarko Hristovski

    Heads up for anyone using localForage (and angular-localForage). I had slightly older versions of them libs in place and noticed one blocking issue after manual debugging – $localForage.setItem would not return at all.
    Just for reference, this was observed in an Ionic 1 app.

    Unsure of the reason but make sure you are on the latest version of the libs (1.4.2 and 1.3.1 respectively at this moment). Once updated the problem was gone.

  • http://www.marcoturi.it Marco

    I used wkwebview in the past. If you use inapprobrowser plugin too, pay attention. We had big issues with it and removed the wkwebview plugin. We used the inappbrowser plugin for paypal, so it was a big issue for us. Dunno if it’s solved yet.

    • Jiří Voseček

      Will try it in a few days.

  • Zarko Hristovski

    Here’s one more general heads-up as something to be aware of in a scenario where you have to move existing users over to an instance running in WKWebView:
    “Persisted data lost when moving to WKWebView”
    https://github.com/driftyco/cordova-plugin-wkwebview-engine/issues/28

  • Shion

    Phaser games don’t work inside Ionic with this plugin.

  • Miloslav Skacel

    HttpOnly cookies are not attached to request. Cookie based authentication is thus not working for me in WKWebView, but it is working in UIWebView.