Search code examples
androidioscordovawindows-phone-8windows-10-mobile

common www folder and all files for all platform in cordova


I have 2 copies for my work in cordova since last 2 years and it's working without any error.

  1. For android/ios
  2. Windows phone

in both copies of there only platform specific changes are there. Means in windows phone it can't allow to load out html files so i add all html files in script tag and load in to main index.html for make thing working and it's working in windows phone and in 2nd copy i made normal html files separate as android and ios has no issue with load outer html files.

so my question: Is there any way to merge all code in one single copy and with same www folder code will work in android,ios and windows phone as well ?

May be it's not possible as per i go through becuase windows phone has some different file structure then android/ios.

Please guide if any one know some common work around for all platforms.


Solution

  • You can use the "merges" feature in Cordova CLI to do this. Imagine I have a project that looks like this:

    -rw-r--r-- 1 simon staff 1115 Mar 22 19:57 config.xml drwxr-xr-x 3 simon staff 102 Mar 17 21:47 hooks/ drwxr-xr-x 7 simon staff 238 Mar 22 19:57 platforms/ drwxr-xr-x 7 simon staff 238 Mar 22 19:57 plugins/ drwxr-xr-x 7 simon staff 238 Mar 21 13:11 www/

    With my application code all in www, organized like this:

    drwxr-xr-x 4 simon staff 136 Mar 24 12:42 css/ drwxr-xr-x 4 simon staff 136 Mar 21 13:11 img/ -rw-r--r-- 1 simon staff 1338 Mar 21 15:16 index.html drwxr-xr-x 4 simon staff 136 Mar 22 18:29 js/

    Imagine I have both the Android and iOS platforms installed, and want to do something different on each, without putting lots of:

    if (device.platform === 'Android') { // Android specific code } else { // iOS specific, assuming we are only supporting iOS }

    sort of code in my application. That also doesn't scale to many platforms (eg add Windows and BB in there and then you have more if/else or a switch statement every time).

    To help with this, Cordova's CLI can merge code in, and will look for a top level folder called merges. So make one of those in the same folder your config.xml is in, so project now looks like:

    -rw-r--r-- 1 simon staff 1115 Mar 22 19:57 config.xml drwxr-xr-x 3 simon staff 102 Mar 17 21:47 hooks/ drwxr-xr-x 4 simon staff 136 Mar 22 17:47 merges/ drwxr-xr-x 7 simon staff 238 Mar 22 19:57 platforms/ drwxr-xr-x 7 simon staff 238 Mar 22 19:57 plugins/ drwxr-xr-x 7 simon staff 238 Mar 21 13:11 www/

    Then create:

    merges/android merges/ios

    Anything you put in there will get copied into the platform specific www folder and override stuff in the same path from your main www folder, or be added if there's nothing of same name/path in www.

    Example:

    ls -lF merges/android/img total 16 -rw-------@ 1 simon staff 7626 Mar 21 13:23 logo.png

    This image logo.png will replace www/img/logo.png for Android only. I can either do the same for iOS (add merges/ios/img/logo.png) or have that use the default image (www/img/logo.png).

    This can be done for any type of file (JS/CSS/img/JSON/whatever) that you need on a platform specific basis.

    There's no need to write a hook script to make this work, the CLI does it automatically when you run cordova build for each platform.

    Documentation on this concept is in the Cordova CLI docs.