Running CkWebView (A Quick Guide)

Hey Guys,

I programmed a clients app in Ionic 2 and everything was running great…until I compiled it onto an iPhone.

Taps would register a full second after happening, the app was completely unusable. Did some digging and found out about CKWebView. Found some plugins that would switch the app to CKWebView with a simple plugin add command, sounded great! Then I ran into the CORs issue…

Anyway, a few days later I’ve managed to get CKWebView working. The gulp tasks here still aren’t 100% what I’d like and I’m completely open to someone who knows gulp better than me cleaning these up, just thought I’d share my progress incase it helps anyone else.

First, a few of the CKWebView plugins suggest running the app from a localhost to keep things easy, this never worked for me. The remaining problem was Angular2 doing local ajax calls to get template files. I had to somehow embed all my templates into the typescript files. I didn’t want to lose ionic’s template separation and I didn’t want to go through and manually move all my templates into the TS files (had LOTS of em).

So the solution here should just drop into your existing Ionic 2 project without any changes beyond what’s here.

Step 1: Get the Plugin
ionic plugin add cordova-plugin-wkwebview-engine

Step 2: Add this to your config.xml file
<feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

Step 3: Adjust Paths and Folders
Rename the ‘app’ folder in your project root to ‘app_dev’. Then, do a global search/replace on all your typescript files, replace ‘build’ in the template URL with ‘app’. For example, here is an existing templateURL:
templateUrl: 'build/components/cart-icon/cart-icon.html'

It needs to be changed to this:
templateUrl: 'app/components/cart-icon/cart-icon.html'

From here on out, all changes to your app need to happen in the “app_dev” folder.

Step 4: Install The Needed Gulp Module
Run this:
npm install --save-dev gulp-angular-embed-templates

Step 5: Modify Your gulp.js file
Add this to the top of the gulp file with the rest of the declare statements:
embedTemplates = require('gulp-angular-embed-templates');

Then find the sass, clean, and html tasks and add the embed_run dependency to them like this:

gulp.task('sass', ['embed_run'],buildSass); gulp.task('html', ['embed_run'],copyHTML); gulp.task('clean',['embed_run'], function() { return del('www/build'); });

Finally, add all this happiness to the bottom of your gulp file:

gulp.task('embed_clean_before',function() { return del.sync(['app']) }); gulp.task('embed_copy', function() { return gulp.src('app_dev/**/*').pipe(gulp.dest('app/')); }); gulp.task('embed_compile', function() { return gulp.src('app/**/*.ts') .pipe(embedTemplates({ 'basePath':__dirname, minimize: {quotes: true} })) .pipe(gulp.dest(function(file) { return file.base; })); }); gulp.task('embed_clean_after' ,function() { return del.sync(['app/**/*.html']); }); gulp.task('embed_run',function(cb) { runSequence('embed_clean_before','embed_copy','embed_compile','embed_clean_after',cb); });

Okay, all good! Your existing build/run commands should work as usual. The only downside I’ve noticed is the watch command will cause a few stacked recompiles of the app’s main javascript file when you change HTML files. I’m definitely a gulp noob so hopefully someone with more experience can help clean up this solution, but the big thing is it’s working!