Cordova WKWebView Plugin

wkwebview

Great work by the Ionic folks:

One of our awesome engineers 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!

That is great news as WKWebView really is a big deal for Hybrid Development.

It’s not included in Ionic by default, but comes as a plugin. Install it with this command:

ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save

And then add this small change to your config.xml:

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

You can use feature detection in your JS to differentiate between UIWebView andWKWebView:

if (window.indexedDB) {
   console.log("I'm in WKWebView!");
} else {
   console.log("I'm in UIWebView");
}

Cordova iOS Performance Improvements: Drop-in Speed with WKWebView →

Hybrid Apps with Ionic Framework

At the most recent #fronteersbe meetup I gave a talk entitled “Hybrid Apps with Ionic Framework”. You can check out the slides embedded below.

Slides with presenter notes (yet without animated gifs) – which might be a better option if you didn’t attend the talk – are also available.

ionic emulate “[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fd64840e790”

Got this error when running ionic emulate:

2015-03-16 11:13:24.112 ios-sim[50548:9106309] stderrPath: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/console.log
2015-03-16 11:13:24.113 ios-sim[50548:9106309] stdoutPath: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/console.log
2015-03-16 11:13:24.140 ios-sim[50548:9106309] -[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fec20d08400
2015-03-16 11:13:24.140 ios-sim[50548:9106309] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSArrayM localizedDescription]: unrecognized selector sent to instance 0x7fec20d08400'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fff85db066c __exceptionPreprocess + 172
	1   libobjc.A.dylib                     0x00007fff87d8876e objc_exception_throw + 43
	2   CoreFoundation                      0x00007fff85db36dd -[NSObject(NSObject) doesNotRecognizeSelector:] + 205
	3   CoreFoundation                      0x00007fff85cfaaa4 ___forwarding___ + 1028
	4   CoreFoundation                      0x00007fff85cfa618 _CF_forwarding_prep_0 + 120
	5   ios-sim                             0x000000010b2b2cc9 -[iPhoneSimulator LoadSimulatorFramework:] + 245
	6   ios-sim                             0x000000010b2b47e3 -[iPhoneSimulator runWithArgc:argv:] + 2297
	7   ios-sim                             0x000000010b2b4bb4 main + 101
	8   ios-sim                             0x000000010b2b2b84 start + 52
	9   ???                                 0x000000000000000b 0x0 + 11
)
libc++abi.dylib: terminating with uncaught exception of type NSException
/Users/bramus/Projects/ionic/todos/platforms/ios/cordova/run: line 158: 50548 Abort trap: 6           ios-sim launch "$SIMULATOR_APP_PATH" --stderr "$CORDOVA_PATH/console.log" --stdout "$CORDOVA_PATH/console.log" $TARGET_FLAG --exit
Error: /Users/bramus/Projects/ionic/todos/platforms/ios/cordova/run: Command failed with exit code 134
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:131:23)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Process.ChildProcess._handle.onexit (child_process.js:810:5)

The build succeeds fine, but the simulator cannot be launched. To fix it, update ios-sim

$ npm uninstall -g ios-sim
$ npm install -g ios-sim

After that ionic emulate should run fine again 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

In love with Ionic Framework

UPDATE: Want to get a solid introduction to Ionic? I recommend reading Learning Ionic, a book I tech reviewed.

ionic

Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.

Whilst Sass is just an extra (you don’t really need it), the true power is the fact that Ionic’s logic is built on top of AngularJS within a Cordova environment:

Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.

It really does tie in perfectly. Most of the Ionic JavaScript UI Components either ship with a delegate or provide a controller which you inject as a dependency, AngularJS style:

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

~

Having fiddled with Cordova and having built an AngularJS app before (with ngRoute, ngResource, etc.), the transition to Ionic went absolutely smooth. In under 24hrs time – excluding some preliminary research in which I converted my previously built AngularJS app to an Ionic flavored version – I went from no app to having an Ad Hoc distribution of the EV-Point.be iPhone app.

evpoint-app-001evpoint-app-002evpoint-app-003evpoint-app-004
EV-Point 0.0.4 screenshots

The app, in its current state, allows one to:

  • View a list of chargepoints
  • Filter the list of chargepoints
  • Get a detailed view of a chargepoint
  • Log in via OAuth
  • View your account and list of EV-Passes (login required)
  • Get a detailed view of an EV-Pass (login required, incomplete)
  • Perform an action – remoteStart / remoteStop – on a chargepoint, after selecting a connector and EV-Pass (login required)

You can see the app actually perform such a remoteStart/remoteStop in this video I made last night:

Here’s how it works, in case you’re interested: The app sends an XHR request to the EV-Point API. After validation of all data and tokens, the API instructs the Central System to send a RemoteStart OCPP-J request to the Charge Point. After acknowledgement of that request by the Charge Point, the Charge Point will actually start the transaction and notify the Central System that it has started. Concurrently, the app will long poll the Central System to detect the change in connectorstatus (from available to occupied), and update the UI accordingly. I also wrote the mentioned API and Central System for this (still ongoing) project.

Please note that action in the video was performed using a testplug, just imagine an electric vehicle being connected to the other side of that small cable.

~

If you’re a frontend web developer wanting to dive into app development, I’d really recommend Ionic. It smoothly allows one to create a native-like app, in a very short period of time, without the need to learn a whole pack of new stuff. If you know AngularJS, you already know Ionic. Next to the ease of use, a big plus of Ionic is that it ships with excellent documentation and a lot of interactive examples for one to learn from. Above that the community (Forums, GitHub, etc.) are thriving.

Ionic Framework →
Ionic Framework Docs →
Ionic on CodePen →
Learn Ionic →

ngCordova – Cordova with the power of AngularJS

ngcordova

module.controller('PictureCtrl', function($scope, $cordovaCamera) {

  $scope.takePicture = function() {
    $cordovaCamera.getPicture({

      // See all the possible Camera options from the Camera docs [1]:
      /// https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#cameraoptions

    }).then(function(imageData) {

      // Success! Image data is here

    }, function(err) {

      // An error occured. Show a message to the user

    });
  }

});

ngCordova is a set of AngularJS extensions on top of the Cordova API to make it easier to build, test, and deploy Cordova apps with AngularJS.

ngCordova – Simple extensions for common Cordova Plugins →

Cordova client tool

The command line tool to build, deploy and manage Cordova-based applications.

Once installed — via npm — you get to do stuff like this:

cordova create ~/KewlApp
cd ~/KewlApp
cordova platform add ios
cordova platform add android
cordova plugin add http://example.org/Kewlio-1.2.3.tar.gz
cordova build

Great to see how the Cordova Platform (formerly known as PhoneGap — which now is a distribution of Cordova) is maturing

Cordova Client Tool →