Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

Hybrid Web-Apps with Cordova

Posted on 19.01.2016 by Smart Mobile Studio Team Posted in Developers log, News and articles

CordovaAbout two years ago a detailed article about how to use Cordova has been published here. As times are changing quickly, an update for this becomes necessary. This article is about building hybrid web-apps with Cordova with Smart Mobile Studio.

At one point in the development of your mobile app, you might realize that it’s necessary to get closer to metal. Especially if you want to get direct and unrestricted access to sensors, hardware acceleration and other performance critical operations you might wish to have written the app natively. One option is to use the language benefit and port your app over to the Delphi with FireMonkey, but it might include rewriting a lot of stuff (maybe only except for the business logic itself).

A better way is to convert your web-app into a hybrid web-app. That is still a web-app, but it is embedded into a native webview. A native webview which you have full control of and which you can extend with everything that is natively possible. You could even write the required extensions for it in Delphi.

The webview itself is based on the native platforms webview, but can be configured towards your needs. On Android you can even switch the underlying engine (to use the latest Chromium build for example). This way you have better control over the compatibility of your app. And with that you can even target versions that do not support the latest W3C specifications itself.

But before we look at the twists, let’s start with the basics. As mentioned in the previous article Cordova can be installed via Node.js easily. Nowadays, it even give you detailed information during installation about how to set it up. You don’t necessarily need to follow the old instructions anymore. Often an

npm install -g cordova

is already enough. If you want the process to be even simpler, you could also pick to install phonegap or ionic (both cordova based and thus compatible).

Preparations for Cordova

Once Cordova is ready to run you can configure your Smart Mobile Studio project to support Cordova, supplying the information you might already have specified (like name, author and URL of the application). But let’s first activate the generation of a Cordova config file from the project options menu. You can find this setting in the ‘linker’ tab. (see screenshot)

Cordova config

With the activation the vendor specific settings for Cordova become relevant. You can see these in the screenshot below.

Cordova options

If the check box ‘from project’ is activated the information from the ‘project’ tab are used. This is useful so that you only need to specify the information at one place.

Currently the tab offers only two preferences for fullscreen and to disallow overscroll. While Cordova offers far more options, these are the ones that are available for all platforms supported by Cordova. The others are either platform dependent or specific to a few platforms only. In this case it is mandatory to configure these manually.

Icons

With the latest version of Smart Mobile Studio it’s also possible to generate all needed icons. Therefore, head over to the icons tab. Now you can either specify all icons you want to use by hand or choose the ‘default’ set (as can be seen below).Icons

By default, the Smart Mobile Studio icon is used, but you can easily pick any other icon.

To do so, just include any image file in your project (like you add any other resource to your project). Once this has been done, the icon can be chosen in the ‘Icon Source’ column, which can be edited with a doubleclick or by pressing F2. After you have changed the first icon, you can sync all other icons to the same icon source (right click -> ‘sync’).

If you now build your app, all the needed icons will be generated. At the same time all necessary information will be generated in the config.xml, so that the icons can be used in Cordova.

Adding Platforms

Once your application has been build in Smart Mobile Studio you can start adding platforms for Cordova to use. To do so, you have to go to the command line. Change the directory to the project’s root directory.

At this point you can add any platforms you like. For example to add the Android platform just type

cordova platforms add android

This will generate the required structure to build a hybrid web-app for the cordova platform.

Eventually you might want to add further plugins for this platform. Nowadays, this is not that much needed as HTML5 already contains nearly everything you need for a typical application. However, on Android you might want to install crosswalk, which – at its core – is a webview based on the latest Chromium code and thus actually has all the latest HTML5 specifications implemented.

It can be installed with:

cordova plugin add cordova-plugin-crosswalk-webview

With this command further assets will be downloaded from the internet.

Building the hybrid web-app

At this point it’s dead simple to actually build the hybrid web-app. Just type

cordova build

to actually build a native file for the selected platforms. In this case it will build a bunch of *.apk files. These files can be found under ./platforms/android/build/outputs/apk

Unfortunately, none of these .apk files are yet ready for publishing in the google play store. You have to sign these files first. As of version 5.0.0 of Cordova this process has been changed, but it’s still pretty simple and documented well.

Once you have provided your private keys (as described in the documentation) you can build a signed spk file with:

cordova build --release

This can now be distributed to any customer or uploaded to the google play store.

However, make sure you have tested the application with

cordova run --device

 

first. The supplied ‘–device’ argument ensures that it runs on a connected device as opposed to run in the emulator.

If you note a glitch you can easily inspect the device with the chrome browser with

chrome://inspect/#devices

That is at least if you have either installed the crosswalk webview or installed the cordova-plugin-console before. Also it’s typically disabled in the release build.

 

Android Chromium Cordova Hybrid Web-App icons node.js w3C
« Events as objects
Writing Node.js command-line tools »

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
© Optimale Systemer AS