How to add Live Reload when using the command cordova serve?

问题

I am using this command to open up my app in the browser: cordova serve but it does not refresh itself when I update my code. How can I do that?

I have tried to use phonegap serve instead which has a live reload but it keeps sending me alerts and crashes my browser.

So, if you can please tell me how can I solve either of the two issues that will be wonderful.

回答1:

You could try the Cordova Browsersync plugin. Instructions to use the plugin are in the plugin's repo.

Once you add this plugin using cordova plugin add cordova-plugin-browsersync, you can simply use cordova run -- --live-reload to start live reload. Note that this also enables syncing scrolls and clicks if you have multiple devices.

回答2:

Easiest solution is just to use phonegap serve instead of cordova serve. As long as you've got phonegap installed it'll work even if you built the app with just cordova.

phonegap serve gives you an IP address that will live reload and that you can access from the browser or the phonegap developers app. Both are very handy and actually work, which is always a plus.

回答3:

If you are using phonegap serve and you are seeing the JavaScript prompts, you need to add a snippet to prevent the app from loading the Native-level JavaScript code.

replace <script type="text/javascript" src="phonegap.js"></script> with

<script type="text/javascript">
    if (!navigator.userAgent.toLowerCase().match('chrome')) {
        document.write("<script src='phonegap.js'><\/script>");
    }
</script>

Note that this works for both cordova.js and phonegap.js (They should be the same file)

回答4:

You can also try cordova-plugin-browsersync-gen2. It's based on old abandoned plugin, fully compatible with latest versions of npm and Cordova.

Also, this version adds missing live-reload support for the following:

cordova run (for each platform individually)
cordova serve

回答5:

You can use browser-sync directly, without a cordova plugin. Follow below steps

npm install -g browser-sync
Copy contents of platform/android/platform_www to www
Add following to config.xml: <allow-navigation href="http://<YOUR-IP>:3000" />
Set base-href (if angular project) to http://<YOUR-IP>:3000/index.html
Run browser-sync -w -server inside www
Update content security policy for executing JS and assets from YOUR-IP:3000. Also allow webscokets (ws) for browser-sync
Deploy app using cordova run android

Please note that you will have to redeploy the app every time you add a new plugin, and also update the www folder with new platform_www contents.

Every time you update the www, browser-sync will automatically notify your webview, and refresh the same. If you have to restart the app and connection with browser-sync is lost, connect device to computer and refresh the app using chrome device inspector, and browser-sync will be live again.

来源：https://stackoverflow.com/questions/28908935/how-to-add-live-reload-when-using-the-command-cordova-serve

标签

cordova

phonegap-plugins