Cordova: use html, javascript and css from another location

Question

Is it possible to use html, javascript and css files from a location other than the application's www folder?

Background

When building a Cordova/Phonegap application there is a host application and the app code is packaged in a folder www inside the application directory structure (.apk for Android, .ipa for iOS and .xap for WP8).

There are implementations where it is possible to "replace" the contents of the www folder with other files or point to another location for your app code. Intel XDK has a live update feature, where you can select your application package in its app preview tool (a generic host application). Phonegap has a similar feature called hydration.

The Cordova host application has a kind of virtual file system pointing in the application package. For example in Android the index.html file in the www folder is addressed at file:///android_asset/www/index.html. These files can be addressed from the application, but NOT from externally started applications (they can't point to files located in the application package). Files should be copied to another location first. It is therefore not possible to really replace the files within the application package.

What I would like to do is have, for example a generic index.html page with the required Javascript, to load the files from another location. Initially on application startup the app code will be copied to this location, for updates the app can check for the availability of a new application package on the internet, download it and copy it to that location.

It would also provide a quick development cycle. For example for Android I can copy all files and folders of the www folder to the device with adb push www /mnt/sdcard/myappwww.

Is is permitted to replace the html, javascript and css? According to the answer on this stackoverflow question it should not be a problem.

Answer 1

We solved it by building Cordova Bootstrapper (https://github.com/MacawNL/CordovaBootstrapper). Cordova Bootstrapper allows you to provide a zip package with your app code. This package is extracted to a location on disk and the index.html file is executed. The code checks for a newer version of a package on the web, if available it downloads the new one and extracts it so you can update your app. Same functionality is available for content packages.

Answer 2

It is therefor not possible to really replace the files within the application package

100% correct. once an app is packaged, its files are read only

What I would like to do is have for example a generic index.html page with the required Javascript to load the files from another location

I would recommend using a framework that supports templating, states and MVC. These are based around the principal of 'single page' apps, and dynamically load in the necessary content for each view/state. Some good examples of frameworks that I would recommend are AngularJS, Ionic Framework and EmberJS. Some good examples of libraries (not a complete app framework, but provides some of this type of functionality) are RequireJS (for dynamic loading of files) or BackBoneJS (useful for MVC and routing).