Visual Studio cordova, an easy way to "reboot" on Android devices?

Question

Just started checking out cordova application development workflow with Visual Studio 2015.

My question is that when debugging on real Android devices (assuming ver> 4.4), there is a way to achieve a "live reboot" (making changes to JS / CSS / HTML, and they become active without restarting the build process). I can reveal that adding / removing plugins from a project will be much more problematic for a live reboot (due to the built-in code that needs to be created), but for our javascript code, would it just update the files on the target computer? I don’t care about automating updating the goal without user interaction, I just need to avoid the time-consuming recovery process when frequent minor changes are needed. I read that the Ionic Framework does this already, but do I need an ion signal for this? I also saw / tested this with a phone call, but I prefer not to go this route.

I am green, but I would suggest that in a live reboot a static http server will simply be involved, pointing to our sources (managing "virtual" cordova.js, etc.) plus something like changing a project that starts html to point to our server, and not to the file (or even the "reload" button in our application). Is that not so? I guess I was wrong somewhere, otherwise I would expect to see this as a standard V / S problem. Just saying it. If this is not a V / S thing, is there a tool / plugin to install there?

Sorry for the long question / message. Comments / Top Valued Directions

Answer 1

My solution was for the application to dynamically load additional Javascript files using standard Cordoba upload methods, and then add a link in the code to them. They are executed from the moment the HTML Script tag is added to the index page.

There is not much answer, but it can lead you in the right direction.

Edit:

Try something like this to load the script:

var ft = new FileTransfer(); ft.download([VARIOUS PARAMS YOU CAN FIND ONLINE]); 

And this is included in the project:

 var script = document.createElement('script'); script.type = 'text/javascript'; script.src = [PATH YOU GOT FROM THE DOWNLOAD ABOVE]; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); 

Sorry for the broken code, but all that I have at work! Xd

Answer 2

Looking around a bit, I decided to create a simple solution that solves this, and I publish it for everyone who wants to do the same. All we need is a static http file server that points to the Android build directory:

 <project_folder>/platforms/android/assets/www 

It so happened that after a successful build, the folder has all the files for maintenance, including cordova.js , cordova_plugins.js and a whole plugins folder with its javascript files.

Since node is present, it is easy to create a “fast” http server with node / express. Here is the project script i (feel free to modify for your needs).

livesrv.js:

 var express = require('express'); var server = express(); var http = require('http').Server(server); var port = 80; var static_root = process.argv[2] || '<YOUR_PROJECT_FOLDER>/platforms/android/assets/www'; server.all('/*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); server.use(function(req, res, next) { console.log('--> '+req.url); if(req.url.match(/(.png|.jpg|.jpeg|.svg|.woff|.woff2|.ttf|.otf|.eot)/)) { res.header('Cache-Control', 'max-age=691200'); } else { res.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate'); res.header('Pragma', 'no-cache'); res.header('Expires', 'Thu, 01 Jan 1970 00:00:01 GMT'); } next(); }); server.use(express.static(static_root)); http.listen(port, function() { console.log("startup: server started @ port " + port + ", root:"+static_root); }); 

When you run this node application, your project files (js / css / html) are visible for live updates from your device (WARNING: this reveals your sources, so you should have an idea of ​​what you are doing before using this script). For those who need more detailed instructions:

• Save the above snippet of the file 'livesrv.js' in an empty folder
• Open a command prompt in this folder
• Run "npm install express" once (if it is not installed globally)
• Start the server using the command

node livesrv <your_project_folder>/platforms/android/assets/www

Next step : change your project's config.xml , starting with HTML, to specify a different HTML file (in this case, I selected 'main.html')

Create `main.html ', which is nothing more than a" boot "for the server.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Security-Policy" content=""> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> </head> <body> <script> console.log("Starting.."); setTimeout(function () { console.log("Booting app.."); window.location.href = "http://<YOUR_SERVER_IP>/index.html"; }, 200); </script> </body> </html> 

All this does is that it loads `index.html 'from the server. Remember to update YOUR_SERVER_IP with your own (IP address of the host on which the node server is running).

Last step: I put a button somewhere in my webapp (you can use the "static" part of the application, for example, a permanent logo, if any), which allows you to start a reboot.

 $('#mylogo').on('click', function () { console.log("Reloading.."); window.location.reload(); }); 

And it worked for me. After the initial assembly / installation, every time I click the logo, the application reloads (updates) the content from the server, so there is no need to rebuild. Try this and let me know if this works for you. Do not forget to allow the device to connect to the server (that is: enable Wi-Fi!)

To release the application, change the starting point to index.html and delete the reload button.

CONS / LIMITS:

• On reboot, the visual studio DOM connection is lost with the target application (at least in my tests).
• In general, there should be a simpler / automated solution.
• You need to rebuild if you added the plugin after the last actual build.

Benefits:

• Instant update of the application on the device, eliminates the build time when changes in the contents of js / css / html

Perhaps I have missed some things, especially if there are ready-made services that I could use to achieve this, so if you know anything that will simplify this, please let me know. Therefore, do not hesitate to criticize all of the above, as it is very interesting for me to read your ideas. By the way, if someone cared to make this a V / S plugin, I would really like to use it.

Hooray!