Updating Cordova plugins

Well, mine was an older Cordova project, and I was under the impression that every time I update the Cordova installation, or the platform (ios/android) the plugins too upgrade. Well my fault! It seems we have to manually delete and re-install each plugin (Yes! there is no update command for plugins yet!)

So the plugins looked like initially :

cordova plugin ls

com.msopentech.websql 0.0.9 "Web SQL plugin"
cordova-plugin-inappbrowser 1.2.0 "InAppBrowser"
cordova-plugin-whitelist 1.1.0 "Whitelist"
org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"
org.apache.cordova.dialogs 0.3.0 "Notification"
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.file-transfer 0.5.0 "File Transfer"
org.apache.cordova.network-information 0.2.15 "Network Information"

For updating Cordova plugins, there is no update command. I know, we did not see that coming!

So to update a single plugin, you need to execute 2 commands:

cordova plugin rm <plugin-package-name/>
cordova plugin add <plugin-package-name>

So for eg you can :

cordova plugin rm org.apache.cordova.file
cordova plugin add cordova-plugin-file

Yes the package names change sometimes, and you can get the details of the latest package names from the official documentation.

So after the changes the plugins were updated to :

com.msopentech.websql 0.0.9 "Web SQL plugin"
cordova-plugin-inappbrowser 1.2.0 "InAppBrowser"
cordova-plugin-whitelist 1.1.0 "Whitelist"
org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"
org.apache.cordova.dialogs 0.3.0 "Notification"
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.file-transfer 0.5.0 "File Transfer"
org.apache.cordova.network-information 0.2.15 "Network Information"

Yes, quite some updates, sorting all the errors and warnings!

I also saw information about some scripts, if the package names are same, I believe they can be useful. Please check Stackoverflow for more details.

Cheers!

Cordova updates and the pain!

Being back after a long time!

You know I have to be here and there, everywhere!

So there was this error, wasting my days from a long time!

And whenever I do an update, this used to come back on my ios builds.

Plugins/cordova-plugin-whitelist/CDVNavigationWhitelistPlugin.h:23:9: fatal error: 
      'Cordova/CDVURLRequestFilter.h' file not found
#import <Cordova/CDVURLRequestFilter

And I searched internet for long (2 months I recall!) but no solutions!

Funny thing,

Earlier, any problem I used to have, I simply did

cordova platform remove ios

cordova platform add ios

And it used work like a charm!

But, not this time!

Stumbled upon this one today! (I dont know why not earlier, anyways – here is the link!)

The key point to note over there is

Cordova-ios version 4.0 and greater does not require the cordova-plugin-whitelist plugin to be installed, however it’s configuration details apply to iOS too.

Why Cordova? Why you do this? Would it not have been helpful to keep some helpful suggestions when showing the errors, or same backward compatibility!

So the solution is :

execute the following command

 cordova plugin remove cordova-plugin-whitelist

And the build was now prepared error-free, smoothly! Feels relieved! I was done blaming Xcode for all the issues!

Please note, however if you use the same code space to prepare build for android (where this plugin is still needed), you might have to create a copy of the project and add the plugin to the android version of the project separately. (Yes we need options to add different plugins to different platforms of the same project!)

Hope this helps someone! Cheers!

Cordova and Windows 10 platform

So, things are getting updated.  And so are the platform OS and cordova versions.

Today I am going to talk about deploying Cordova applications on Windows 10 platform.

For developing for windows 10 platform,  the software requirements are:

  1. Windows 8.1 or Windows 10
  2. Visual Studio 2015 community edition
  3. Installation of node (latest version)
  4. Installation of Cordova (latest version)

1. Windows 8.1 or Windows 10 

Well we did upgrade our windows 8.1 to prevent any chances of any issues that might come due to OS dependencies. Windows 10 is good. I love the menu that gives some resemblance to the older menu styles. other requirements would be using a 64 bit machine and a good RAM capacity (we used 8gb)

2. Visual Studio 2015 community edition 

The visual studio can be downloaded from here. The download takes some time.

But the painful part is the installation. It took me more than one day to install all the components properly.

What happens while installing is most of the time the installation progress is stuck at some point for hours.

Solutions :

  • If you could close the current installation and restart again, it will restart from the same point, and by luck it might be faster in some cases
  • Sometimes, the installation does not close either. So you have to go and check the process associated with Visual Studio and you will find that there are 2 processes that are working for the installation, one having some CPU usage, and the other 0% CPU usage. Kill the one with 0% CPU usage. Sometimes, the current installation proceeds further without issue. Otherwise,
  1. close all the tasks (via Task Manager) and restart the machine.
  2. Clear all items in temp folder (%TEMP%)
  3. restart the installation process (it will resume from the last state.

However, please note: it is not suggested to kill the processes manually, because high chances are there that the installation is corrupted, and you will need to repair the existing installation before installation of further components.

Visual Studio 2015 community edition, though the installation process could have been smoother, offers a lot of benefits over 2013 version. Notably for cross platform development you can select the components needed while installing (yes there are a whole set of package helpful for Cordova development) and you dont need to install the windows10/8.1 emulator and SDK separately (out of visual studio as standalone).  They all can be downloaded and installed as a single package! And that is a relief!

3. Installation of node

This needs to be installed from here before installing Cordova as we use the node tools to download and update Cordova.

4. Installation of Cordova

We installed the latest version of Cordova ie 6.1.1

The docs are very helpful, notably Create your first Cordova App & Windows Platform Guide .

***********************************************************

Compiling and Deployment of your app

Well the docs give the basic idea of setting up the environment and getting your project running

However, it is to be noted that in config.xml you will need to add:

<preference name="windows-target-version" value="10.0" />

Also while building the app via command line you will have error message like this:

C:\APPV1\platforms\windows\CordovaApp.Windows10.jsproj(83,9): error : The following component requires .NET Native comp
ilation which is not available when targeting ‘Windows10’ and ‘AnyCPU’. Please consider changing the targeted processor
architecture to one of the following: ‘x86, x64, ARM’ (if you are using command line this could be done by adding ‘–a
rchs’ parameter, for example: ‘cordova build windows –archs=x64’). C:\APPV1\platforms\windows\plugins\com.msopentech.w
ebsql\SQLite.Proxy.winmd
Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe: Command failed with exit code 1

Yes, this is new! In earlier builds for windows, or any platform we do not need to specify additional parameters. But when you are creating a Windows 10 build you need to specify exclusively that whether the build is going to be used on a 32 bit machine, or a 64 bit machine. That means no generic universal build can be created for Windows 10.  We are still learning about what will the best approach to create builds/installers for that. As of now, when we specify something as

cordova build windows --archs=x64

This creates the build perfectly, and the solution generated works flawlessly on VS 2015. (you might need to sign in to your developer account to prevent any sign-in/certificate issues)

But this whole process has quite a good learning curve , specially about the obstacles of getting the tools and dependencies installed and getting your first build. But at the end of the day, all worked out, and I am looking forward to more community updates on Windows 10 and cordova as this looks promising!

Stay connected!

 

Understanding Deep Links

Recently I came across the term “Deep Links“.

Basically for one of our clients, we were updating the app page on Facebook, and to use the app directly from the Facebook page you need to provide the Deep Links.

Here is what Wikipedia says about Deep Links.

In the context of the World Wide Web, deep linking is the use of a hyperlink that links to a specific, generally searchable or indexed, piece of web content on a website (e.g., “http://example.com/path/page”), rather than the website’s home page (e.g., “http://example.com/”).

Okay, so from my understanding it is useful for SEO purpose. I specifically came across this with regards to mobile applications. Here is what I found on the topic:

Mobile deep linking is a methodology that allows mobile apps to communicate with the mobile web or with other mobile apps via clickable links directing users to a specific landing page or screen inside the app instead of sending them back to a mobile site or store. Deep linking helps reduce the conversion friction by shortening the users’ path to the piece of content, product or promo they are interested in.

WHAT TYPE OF APPS CAN BENEFIT MOST FROM DEEP LINKING?

For apps such as shopping, travel, hotel booking, music and news the ability to send users to a specific product, offer or promo page can have tremendous effect over conversion rates and ultimately revenues. If deep linking is enabled, the user can be navigated directly to a certain hotel booking page for which he has seen an advertisement instead of the app’s home page. Last year Facebook announced its deep linking ad format, letting users come back to familiar apps from ads in their feeds.

So basically,

Deep Linking is a methodology for launching a native mobile application via a link and it connects a unique url to a defined action in a mobile app, seamlessly linking users to relevant content.

Now this looks good and something new.  I will be updating the steps to integrate Deep Links in mobile apps (hybrid/native) in my next blog post.

Enjoy you stay!

Ref:  telerik.com

Solution : Cordova Jquery Ajax calls not working @Android4.x

On Cordova 5.x , for the android platform a plain ajax call does not work

It does not give any detailed error

readystate: 0
status : 0
errortext : error

__________________________________________

Solution:

Things are changing.

After doing research on the issue and trying out different options, I came across this.

1. You need to install the cordova whitelist plugin (this is not available for ios currently though)

cordova plugin add cordova-plugin-whitelist

2. In config.xml

 

in place of the old, tag.

And bam, all the ajax calls are working properly.

Note: You will need to add the following to your html files in the section.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

else you will get the following error message while running the app.

“No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.”

Hope it helps somebody facing similar issues.

Installing a specific version of Cordova

With the recent releases and compatibility issues with the plugins we have to switch to some particular version of Cordova/Phonegap which works stable for our exisiting projects. However I was having issue in finding the exact version no to which I need to re-install.

Using command line we can see the versions of cordova available by

npm view cordova versions

The output is like :

C:\Users\upasana>npm view cordova versions

[ '0.0.0-fake',
'0.0.1',
'0.0.2',
'0.0.3',
'0.0.4',
'0.0.5',
'0.0.6',
'0.0.7',
'0.0.8',
'0.0.9',
'0.1.0',
..............
..............
'4.0.0',
'4.0.1',
'4.1.0',
'4.1.1',
'4.1.2',
'4.1.3-nightly.2014.10.21',
'4.2.0',
'4.3.0',
'4.3.1',
'5.0.0',
'5.1.1' ]

 

Then to install a particular version we use the following command.

npm install -g cordova@4.2.0

Have a great day!