Using in a jQuery Mobile App

Using Apache Cordova in a jQuery Mobile app.

πŸ‘

We highly recommend considering Ionic 5 for creating your new projects: Ionic 5 apps generally perform and look better than jQuery Mobile hybrid apps but would like you to know that Appery.io still supports the JQuery Mobile framework as it is considered to be a very simple framework and is still used by many developers.

There are a number of ways to use a Cordova API in a jQuery Mobile app:

  1. Using a pre-built service.
  2. Using Cordova JavaScript API.
  3. Using a Generic service (combining option 1 and 2).

Using a Pre-built Service

A pre-built service is Cordova API wrapped as an Appery.io service. This is nice because you get to use the powerful mapping features this way. Appery.io exposes the following Cordova API as a service inside the App Builder.

Click on a link in the list to jump to an example using this service.

πŸ“˜

Using Cordova JavaScript API

You can still use directly the Cordova JavaScript for these or any other plugins.

πŸ‘

Picture Upload Sample jQM App

You can also check our Picture Upload Sample jQM App, where we show how to upload an image file or a picture taken with the mobile device camera service to the Appery.io Database.
The app is able to work in two modes:

  • Uploading files via Web API (using browser API).
    
  • Uploading files via Cordova FileTransfer plug-in.
    

πŸ“˜

Note!

There can be some factors that need to be taken into consideration when several plug-ins are combined in one app.

For example, if you are creating an application using the AdMob plug-in in combination with the Push Notification service, please add the OneSignal Cordova plug-in to it. You can learn here how to do it.

Also, you will need to call the following code to open the ad:

admob.banner.config({
   isTesting: true, // change to false in production app
   autoShow: true,
   id: 'ca-app-pub-3940256099942544/6300978111', // replace with your *Ad Unit ID* in production app
});

admob.banner.prepare();

Note as well that the code provided above shows test ads only. To display user's production ads please replace the code with the following:

admob.interstitial.config({

   id: '<Put your admob app id here>',

   isTesting: false,

   autoShow: true

});

admob.interstitial.prepare();

Using Cordova JavaScript API

Any installed Cordova plug-in can also be used via its JavaScript API. For example, using the Notification API:

navigator.notification.beep(2);

You can use the Cordova API anywhere you can write custom JavaScript code.

Check out InAppBrowser to see another example.

πŸ“˜

Cordova JavaScript API

To learn about available APIs, please go to the plug-in docs page on the Apache Cordova page.

Using a Generic Service

Another option is to use the Appery.io Generic service. This approach is more advanced and combines using the JavaScript API and an Appery.io service. When you put such a service together you get the Cordova plug-in plus you can use the service in mapping.

Check out the Accelerometer example to learn how to create such a service.


What’s Next