Visual Studio cordova, un modo semplice per "live reload" su dispositivi Android?

Question

appena iniziato a controllare il flusso di lavoro di sviluppo di applicazioni Cordova con Visual Studio 2015.

La mia domanda è, quando il debug su dispositivi reali Android (supponendo ver> 4.4) C'è un modo per ottenere il "reload dal vivo" (apportare modifiche in JS/CSS/HTML e questi diventano attivi senza riavviare il processo di compilazione). Posso capire che aggiungere/rimuovere plugin dal progetto sarebbe molto più un problema per una ricarica live (a causa del codice nativo che deve essere creato) ma per il nostro codice javascript, non sarebbe solo l'aggiornamento dei file sul target? Non mi interessa l'automazione dell'aggiornamento del target senza l'interazione dell'utente, devo solo evitare il lungo processo di ricostruzione, quando sono necessari frequenti piccoli cambiamenti. Ho letto che la struttura ionica lo fa già, ma è necessario avere uno ionico per farlo? Ho anche visto/testato quello con PhoneGap, ma preferisco non andare in questo modo.

Sono ecologico, ma presumo che la ricarica live coinvolga solo un server http statico che punta alle nostre fonti (gestendo il cordova.js "virtuale" e simili) più qualcosa come cambiare l'html iniziale del progetto in puntare al nostro server piuttosto che al file (o anche un pulsante "ricarica" ​​sulla nostra app). Non è questo il caso? Credo che sia sbagliato da qualche parte, altrimenti mi aspetterei di vederlo come un problema V/S standard. Sto solo dicendo Se non è una cosa V/S, c'è uno strumento/plugin là fuori da installare per quello?

Ci scusiamo per lunghe domande/post. Commenti/indicazioni molto apprezzate

Answer 1

La mia soluzione è stata quella di far scaricare dinamicamente dall'app i file Javascript aggiuntivi tramite i metodi di download Cordova standard e quindi aggiungere il collegamento a loro nel codice. Eseguono il momento in cui aggiungi il tag HTML Script alla pagina dell'indice.

Non molto di una risposta, ma potrebbe portarvi nella giusta direzione.

Edit:

provare qualcosa di simile per scaricare lo script:

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

E questo per includere nel progetto:

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); 

Ci scusiamo per il codice non funzionante, ma è tutto quello che ho tempo per lavorare! XD

Answer 2

Dopo aver guardato intorno un po ', ho deciso di creare una soluzione semplice che risolve questo e sto postando questo per tutti che si preoccupa di fare lo stesso. Tutti abbiamo bisogno è un file http server statico che punta ad Android directory di compilazione:

<project_folder>/platforms/android/assets/www 

Accade così che dopo una generazione corretta, la cartella ha tutti i file per servire, tra cui cordova.js, cordova_plugins.js e l'intera cartella plugins con i loro file javascript.

Dato che il nodo è presente, è facile creare un server http "veloce" con nodo/espresso. Ecco lo script che ho redatto (sentiti libero di modificare per le tue esigenze).

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); 
}); 

Quando si avvia questa applicazione nodo, i file di progetto (js/css/html) sono visibili gli aggiornamenti live dal dispositivo (ATTENZIONE: questo espone le tue fonti, quindi è necessario avere una certa idea di che cosa stai facendo prima di usare questo script). Per coloro che hanno bisogno di informazioni più dettagliate:

• Salvare il frammento di codice in un file 'livesrv.js' in una cartella vuota
• Aprire un prompt dei comandi per quella cartella
• Esegui una volta 'NPM installare Express' (se non è installata a livello globale)
• eseguire il server con il comando

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

Il passo successivo: cambiare il config.xml del progetto HTML di partenza per puntare a un altro file HTML (in questo caso ho scelto 'main.html')

Creare `main.html', che non è altro che un "bootstrap" per il 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> 

Tutto ciò che fa è che carica `index.html 'dal server. Non dimenticare di aggiornare YOUR_SERVER_IP con il tuo (l'indirizzo IP dell'host che esegue il server del nodo).

Ultimo passo: ho messo nel mio webapp un pulsante da qualche parte (è possibile utilizzare una parte 'statica' delle app, ad esempio un logo permanente se si dispone di tale), che consente di attivare una ricarica.

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

E quello ha funzionato per me. Dopo la creazione/installazione iniziale, ogni volta che premo il logo, l'app sta ricaricando il contenuto (aggiornato) dal server, quindi non è necessario ricostruirlo. Prova questo e fammi sapere se funziona per te. Non dimenticare di consentire la connessione del dispositivo con il server (es: abilitare il wifi!)

Per rilasciare l'app, cambiare il punto di partenza a index.html e rimuovere il pulsante di ricarica.

Svantaggi/restrizioni:

• Quando si ricarica, la connessione DOM del Visual Studio si perde con l'applicazione di destinazione (almeno nel mio test)
• complesso dovrebbe essere una soluzione più semplice/automatizzata.
• È necessario ricostruire se è stato aggiunto un plug-in dopo l'ultima generazione effettiva.

Vantaggi:

• app Immediata on-device update, elimina il tempo a costruire quando i cambiamenti sono contenuti js/css/html

forse ho trascurato alcune cose, soprattutto se ci sono servizi pronti che potrei usare per ottenere questo, quindi se sai qualcosa che semplifica questo per favore fammi sapere. Quindi sentiti libero di criticare tutto quanto sopra visto che sono molto interessato a leggere le tue idee. A proposito, se qualcuno volesse rendere questo un plugin di V/S, mi piacerebbe davvero usarlo.

Cheers!