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!