Build Phonegap/Cordova Apps using the WKWebview right now

We recently announced big news in our platform: the possibility to publish standalone apps powered with the iOS 8 new WKWebview. Today, we are glad to announce a new Cordova plugin for publishing Cordova/Phonegap powered with the WKWebView that you can use right in your terminal.

cordova

Webview+ for iOS (and Android!)

Our engineering team worked very hard to create the Webview+ for Android (more info on how to use it here), a uniform webview on any Android 4.x device based on all the power of Chromium. We are glad to announce the Webview+ for iOS, a plugin for cordova apps that provides a replacement for the UIWebView that includes the Nitro JS engine based on the WKWebView.

If you are a HTML5 app developer, you probably know that iOS HTML5 capabilities are still lagging far behind. The WKWebView solves most of the common problems of HTML5 on iOS and even increases the features that you can use.

WebView+

Create a Cordova app using the WebView+

Install the latest version of CocoonJS CLI (this is really important)
[code lang=”bash”]
$ sudo npm install -g cocoonjs
[/code]

Create a Cordova project and add the Webview+ for ios:
[code lang=”bash”]
$ cocoonjs create MyProject
$ cd MyProject
$ cocoonjs platform add ios
$ cocoonjs plugin add com.ludei.ios.webview.plus -d
[/code]

If you already have a Cordova/Phonegap project just run the following command
[code lang=”bash”]
$ cocoonjs plugin add com.ludei.ios.webview.plus
[/code]
And now your project is powered with the Webview+. You can test it by running this command:
[code lang=”bash”]
$ cocoonjs emulate
[/code]
or
[code lang=”bash”]
$ cocoonjs run
[/code]

More Info

About HTML5 APIs

CocoonJS Announces the WebView+ for iOS 8: Publish WKWebView Powered Standalone Apps

Apple’s new iOS version 8 announcement brought many good news for the HTML5 developer community. Safari has improved much (it now supports WebGL for example, yay!) and the system webview now comes in two different flavors: UIWebView and WKWebView. The main difference is related to the JIT optimization for JavaScript. To put it in plain words: the execution speed for JavaScript code is orders of magnitude faster using a JIT compiler and thus, your web app may run much faster inside the new WKWebView than in our older friend the UIWebView. To know more about the WKWebView and to have a glimps of the performance improvements, please, check the following great article by Sencha or check our own tests below.

At Ludei, we immediately started playing around with the WKWebView as we were eager to provide it along with all the great runtime environments we have (Canvas+, WebView and WebView+ for Android). But there was a catch. At least in the current version of iOS, there is no way of deploying a native hybrid HTML5 app using the WKWebView that has access to local files, something that is quite common on Hybrid apps to be able to execute them off-line. But Ludei has always loved a good challenge and we decided to solve the problem and make the WKWebView available to every developer that would like to use it.

Today, we are happy to announce that we have added a way to create WKWebView based completely standalone hybrid applications for iOS 8 in our CocoonJS Cloud Compiler System version 2.1. As far as we know, no other technology allows to publicly create completely offline WKWebView based apps at the moment. We have decided to call the WKWebView based runtime environment: WebView+ on iOS 8. We will still provide Canvas+ and the regular UIWebView, but every CocoonJS developer that wants to take advantage of the WKWebView, is able to do it right now. Whenever the application is running on an iOS version lower than 8.0 where the WKWebView is not available, there will be a fallback to the UIWebView.

We have also added this shiny new WebView+ for iOS inside our CocoonJS Launcher that is still in review by Apple. Meanwhile, if you want to check the awesome performance that it provides, you can build a Custom CocoonJS Launcher using our cloud.

ADDITIONAL NOTE: We are working hard to add the WebView+ to the CocoonJS CLI too! Stay tuned!

WebView+ Vs WebView on iOS 8

We have performed some tests ourselves to check how much of a better option the WKWebView (CocoonJS WebView+ for iOS 8) is compared to the UIWebView (CocoonJS WebView). These are the results:

Canvas intensive operations

All the test were executed on a iPad Air iOS 8.0.2

First test

2000 sprites rotation + translation with sprite animation rotation and random colored vertices

  • Webview+ : 30 FPS stable
  • System Webview: 6 FPS stable

Second test

3000 sprites Rotation + translation. Using 3 framebuffers. Transparency and tint with custom shader and custom clip area

  • Webview+: 20 FPS stable
  • System Webview: 4 FPS with unstable frame timing

Third test

5000 sprites 32×32 using rotation + translation, tinted vertices and MipMap

  • Webview+ 17 FPS stable
  • System Webview: 3FPS with a frame timing between 379 and 400ms

Tests with well known benchmarks

All the test were executed on a iPhone 5 running iOS 8.0.2

Octane 2.0

Octane 2.0: is the javascript benchmark from the v8 team. Lets see the differences between webview+ and webview. The higher the mark, the better.

Octane test Webview+ Webview
Richards 2712 117
Deltablue 2834 125
Crypto 3491 203
Raytrace 3474 365
EarleyBoyer 5118 636
Regexp 382 42,5
Splay 2384 605
SplayLatency 1641 2101
NavierStrokes 3455 323
pdf.js 3025 1006
Mandreel 2407 118
MandreelLatency 1784 702
GB emulator 4593 943
CodeLoad 5315 3912
Box2DWeb 2806 689
zlib 4675 N/A
Typescript 4363 N/A
Octane Score 2819 N/A

N/A means that the benchmark stops or freezes the the device.

Wirple BMark

This is test for webGL performance. The higher the score, the better.

Test Name Webview+ Webview
Canvas test1 61 26
Canvas test 2 38 10
WebGL test 1 17 7
WebGL test 2 14 7
Total score 130 50

Of course, some screenshots of the results 😉

The webview+’s results on Wirple BMark

Screen Shot 2014-10-22 at 18.34.00

The system webview after running Wirple BMark

Screen Shot 2014-10-22 at 18.34.14

CocoonJS Enables Android Wear HTML5 App Development

Google announced Android Wear this year, a new Android OS version suitable for wearable devices (Google Glass and smartwatches for now). Of course, Ludei right away started to wonder what kind of HTML5 execution capabilities will be available in such interesting devices. A couple of weeks ago, we purchased several Android Wear watches and begin to perform some tests over them. The first thing that we noticed was that at least this initial version of Android Wear does not come with a system WebView. It kind of makes sense as it is a very constrained environment and webviews are very resource demanding. Every attempt to execute a full fetched web environment on Android Wear Smartwatches has shown really low performance. Still, we wanted to see HTML5 running on a Smartwatch and how a good of a fit our highly optimized Canvas+ technology could be for Android wear. Our results were really encouraging as Canvas+ works amazingly well on these devices. Check out the following video that shows some HTML5 canvas apps and games running on Android Wear!

Of course, some minor modifications had to be done both to the technology and our cloud compiler, but we are more than happy to announce that we have enabled a new compilation target inside the CocoonJS Cloud Compilation System so any developer inside our community can test it. As far as we know, CocoonJS is the only technology that allows to deploy hybrid HTML5 applications for Android Wear even supporting WebGL! This is just an initial testing environment that allows you to build Android Wear applications but there are some initial limitations:

  • Do not add ad services. These services use the system webview to show ads and as we mentioned, Android Wear does not have a system webview.
  • Although you will be able to install the resulting APK on your smartwatch, we need to work on ways to better integrate the Android and Android Wear experiences. Please, use this initial builds for testing purposes.

If you want to test it, you need to make sure your app works on our Canvas+ environment. You can test it using the CocoonJS Launcher for iOS on iTunes, GooglePlay or Amazon. Then, just go to the CocoonJS cloud compiler, create or select an existing project, go to “Compile Project” and you should see the new target “Android Wear”.

Screen Shot 2014-10-23 at 12.44.03

Once you select the target, as it happens with any other CocoonJS compilation, a simple APK will be built in our cloud service, similar to the GooglePlay, OUYA or Amazon APKs, and it will be sent to your email account, but this one completely prepared to be executed on a Android Wear device. Connecting to Android Wear devices is similar to any other Android device as you will need to activate the developer options in the device and allow USB debugging. 

Enjoy testing your games and apps on an Android Smartwatch!