Cordova Browser et live reload
Pour déboguer des applications et voir les modifications de notre code source, on peut utiliser essentiellement Browser-sync ou Livereload. (Même s’il existe d’autres solutions comme live.js etc…) Il existe des plugins Cordova pour ces deux applications cordova-plugin-browsersync et cordova-plugin-livereload.
Tous deux sont obsolètes et maintenus épisodiquement. Mais c’est encore la meilleure alternative pour déboguer son application si on n’a pas envie de passer à VisualStudio et Taco.
Si on installe cordova-plugin-livereload il nous mets une alerte en rouge nous informant que le plugin est obsolète mais il est tout de même installé.)
Nous allons donc nous attarder à l’installation de cordova-plugin-browsersync.
On installe le plugin ionic plugin add cordova-plugin-browsersync et on exécute la commande ionic run xxx -- --live-reload ou xxx est la plateforme souhaitée. Si on omets ce paramètre toutes les plateformes seront lancées. Pour l’instant on se concentre sur la plateforme Browser qui ne fonctionne pas sans faire quelques modifications sur l’installation. Dans un terminal on tape ionic run browser -- --live-reload. Cela nous ouvre une page avec notre html qui nous est complètement inutile et on peut fermer cette fenêtre (port 8000 par défaut).
Dans le terminal où a été exécutée la commande on nous donne l’adresse ou l’on pourra consulter les pages en ‘direct live’ si je puis dire et l’adresse du serveur Browsersync.
Local: http://localhost:3000
External: http://localhost:3001
En ouvrant ces deux adresses on constate que le serveur s’affiche correctement, mais pas pour la page web. D’où vient ce bug ? En fait il y’en a deux.
Le premier se remarque dans la fenêtre serveur de Browsersync. A la rubrique ‘Serving files from’ on y voit l’adresse du dossier qui n’est pas bonne. En ce qui me concerne il affiche D:..\Lab\1Demos\AppIFA Mais dans les applications Ionic html/angular tout le code se trouve dans www. Conclusion Browsersync ne regarde pas dans le bon dossier. Preuve en est en allant sur http://localhost:3000/www votre page s’affiche ! Par contre si on regarde de plus près on s’aperçoit avec les outils de développement du fureteur qu’il ne trouve pas le cordova.js. Ce qui est normal car il n’est pas pris en compte par Ionic pour l’affichage dans les fureteurs. Mais comme on a installé la plateforme Browser il est dommage de ne pas en profiter. Il nous faut donc modifier l’adresse par http://localhost:3000/platforms/browser/www
Vous l’aurez compris l’idée est de ne plus utiliser la mauvaise adresse mais bien http://localhost:3000/platforms/browser/www (on peut aussi modifier radicalement le code source de browsersync ce que nous verrons plus tard)
Passons au deuxième problème. Si on fait une modification des sources on ne verra pas les répercussions mises à jour automatiquement dans le fureteur. (C’est pourtant le but de BrowserSync).
Il faut rajouter une balise meta qui permettra d’exécuter des scripts sur l’application.
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: ws: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *">
On peut en savoir plus sur cette balise à cette adresse Cordova Whitelist (Content Security Policy)
Voilà on a un système de débogage complet. Si vous connectez une tablette, un téléphone mobile, une machine virtuelle android le tout ensemble, une simple modification dans le code source de votre application se répercutera sur tous les appareils connectés.
N’oubliez pas d’ouvrir les ports 3000 et 3001 sur votre firewall sinon cela ne fonctionnera pas à partir des appareils connectés au réseau rappel sur le pare-feu windows.
En cas d’erreur du type 404 /browser-sync/socket.io/?EIO=3&transport=… il faut fermer la fenêtre en port 8000, on a certainement des fenêtres connectées inutilement et qui ne sont pas synchronisées avec le serveur. Le mieux est de tout fermer, redémarrer ionic et au pire l’ordinateur si on ne voit pas d’où vient le processus responsable.
Enfin si on souhaite ne pas avoir à saisir http://localhost:3000/www on peut modifier les paramètres du serveur browsersync dans plugins\cordova-plugin-browsersync\lib\pluginHook.js au niveau de la ligne 52. Mais ce n’est pas nécessaire car tout fonctionne correctement sans cela.
defaults.server = {
baseDir: context.opts.projectRoot,
routes: {}
}
Il faut remplacer context.opts.projectRoot, par context.opts.projectRoot+'\\www',
