Why is the Cordova Browser-Sync Plugin not working on a clean, new Apache Cordova app?

Code-wise, there doesn’t seem like there is a solution/fix that works. Why? Who knows. But the plug-in as it stands now is broken.

And past the technical specifics, according to this issue ticket on the GitHub repository connected to the official plug-in—and coming directly from the developer of the project itself—the project is “retired.”

I am planning to retire this project in favor of Taco-livereload. That is also based on pretty much the same code, and I am now a PM on that project. That project will also have more devs working on it, so will have much more support as an official project.

Would that fulfill your needs ? Are there anything that this project has, that taco-livereload does not have ?

Since Taco is a Microsoft project, I’m not going to touch that with a 10 foot pole even if they are using an MIT license. Microsoft’s philosophy of “embrace, extend, and extinguish” seems too risky for an open source endeavor like this.

So instead, I’m going to veer towards Ionic as a framework since it has live reload functionality right out of the box and is more widely adopted and embraced by the Cordova development world right now.

PS: The Content-Security-Policy solution discussed on the plug-in author’s blog which suggests setting ws: 'unsafe-inline' would only be a factor if the live reload JavaScript code was properly being injected in the page to begin with. JavaScript from a non-trusted source is what would make the process fail in cases where the plug-in would actually work. And the proof would be seeing such an error in the web browser console after the page loads.

But in this case, the code injection is not happening anymore and starting the application with cordova run browser -- --live-reload starts up the default development server on localhost:8000 but then afterwards the browser sync servers are started for localhost:3000 and localhost:3001. If this setup were working correctly it would be only running on localhost:3000; and not ports 8000 and 3000.

I think you miss ws: 'unsafe-inline' in your Content-Security-Policy definition.

The plugin needs this CSP for websocket to work.

Have a look to the video there http://blog.nparashuram.com/2015/08/using-browser-sync-with-cordova.html (linked in the plugin's readme.md) for detailed explanations about the plugin usage.

Should be:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ws: 'unsafe-inline' https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">