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 →

Deeplinking in Ionic Apps

deeplinks-header

Enter the Ionic Deeplinks Plugin:

Deeplinking as a concept has evolved heavily over the last few years, with mobile devices going from supporting custom URL schemes (like instagram://) to now opening native apps in response to navigation to URLs (like amazon.com).

To help Ionic developers deeplink more easily, we are excited to announce a new, official way to deeplink into both Ionic 1 and Ionic 2 apps (and non-ionic Cordova apps). Let’s take a look at how it works

In the past I have used EddyVerbruggen/Custom-URL-scheme (which served me well). Looks like this new Ionic Deeplinks Plugin is about to replace it.

Ionic Deeplinks Introductory Blogpost: Deeplinking in Ionic Apps →
Ionic Deeplinks Plugin (GitHub) →
Ionic Deeplinks Demo for Ionic 2 (GitHub) →
Ionic Deeplinks Demo for Ionic 1 (GitHub) →

Ionic Native

Ionic_Logo

The successor to the aforementioned ngCordova:

Ionic Native is a curated set of ES6/TypeScript wrappers for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy.

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => { 
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition();
watch.subscribe(pos => {
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching
watch.unsubscribe();

Ionic Native (GitHub) →
Ionic Native Documentation →

Ionic Package

package-api-diagram-1

The Ionic Package service allows you to create development and production builds of your app that can be submitted to the Apple App Store and Google Play Store, or be installed directly on your friends’, family members’, and colleagues’ devices.

That’s it. Once your build is finished, you just download the distribution file we provide and carry on. Ionic Package takes care of all the heavy lifting and lets you get back to focusing on what really matters: your app.

$ ionic package build ios --profile PROFILE_TAG

The people at Ionic really have gotten this thing directed in the right direction: build an open-source framework and augment it with usefull (soon-to-be commercial) parts such as “Ionic View” and now this “Ionic Package”. It’s tools like this that make it more easy to develop hybrid apps.

If you’re familiar with build servers like Circle-CI or Travis-CI stuff like this – the result of ionic package list – might look familiar:

ionic-package-list

Ionic Package →