Support livereload for `ionic cordova run browser`

[imhoffd]

origin: #3036 and #3036 (comment)

We can inject all the Cordova www assets into the livereload dev server, providing a nice experience for developing mobile apps in ionic serve.

📝 Note: for developing cross-platform apps (attempting to target mobile AND desktop), I still highly recommend not using the Cordova browser platform. My reasoning is here: #2312 (comment)

[janpio]

ionic serve doing anything with the Cordova Browser platform would be really unexpected and confusing.

[imhoffd]

@janpio First a little explanation:

ionic cordova run browser spins up a static file server that I don't want anyone to use. It doesn't use the framework's dev server, it doesn't have livereload, it's not configurable. The command these steps:

1. Perform an Ionic build. For Ionic Angular 2/3, this is ionic-app-scripts build (this builds files into www)
2. Run cordova run browser, which does the following under the hood:
   1. Copy www into some folder within platforms/browser/...
   2. Copy Cordova assets (cordova.js, and the plugin javascript) into that folder
   3. Run cordova serve, which uses a static file server with a root of that folder
   4. Open browser to the static file server address

What I am hoping to accomplish is this:

The only useful part of the Cordova browser platform is the browser shims that plugins provide. If you know your app will only target Android and iOS, then suddenly it's a pain to use ionic serve because the native functionality doesn't work. This is why some people use ionic cordova run browser. But again, using that command is limiting because it doesn't use the framework's dev server and it doesn't have livereload. When you make a change to your app, it has to be rebuilt and redeployed.

I want to combine the useful parts of ionic cordova run browser (browser shims) with the useful parts of ionic serve (dev server).

Here's what needs to happen for that to work:

1. Copy Cordova assets into www (found in platforms/browser/platform_www)
2. Perform an Ionic serve. For Ionic Angular 2/3, this is ionic-app-scripts serve, which uses www
3. Open browser to the dev server

Perhaps if it was ionic serve --cordova? That way ionic serve wouldn't have the browser shims but ionic serve --cordova would?

[janpio]

The basic argument against the browser platform is that is pretty much an unkown. The idea is great, the implementation should be pretty straightforward, in reality... !? I am under the impression that only a very limited number of plugins has proper support that makes sense and actually helps. You sure know what a pain it would be to try improve that in the Cordova plugin ecosystem.

Aren't you already "hijacking" ionic cordova run android/ios to enable live reload? Why not do the same for the browser build, skipping Cordova's server?

Another idea, Cordova sure would be open to PRs or suggestions on improving or opening up the server so it makes more sense. Maybe this might be an alternative route?

(I could run the cordova-browser release if needed)

[imhoffd]

Again, the Ionic CLI would make it very clear that the browser platform is only for testing an Android/iOS app in the browser, not for making a code base which works in Android/iOS and the browser.

ionic cordova run android/ios --livereload sets the <content src="..."> of config.xml to the address of the dev server. The webviews in Android and iOS then load content from the HTTP server, where all the cordova.js & cordova plugin JS responses are hijacked and routed to the appropriate files. We've had that luxury because until Ionic Angular 4, we've been writing the dev server (which is in @ionic/app-scripts).

But now we want to take a step back and let the framework CLIs fill in. We don't have the ability to mock responses from the dev server in ng serve. Going forward, that means not only do we need to copy platforms/<platform>/platform_www into www, we need to configure the framework CLIs to know about those assets. That's what this does for angular projects: https://github.com/ionic-team/ionic-cli/blob/master/packages/%40ionic/cli-hooks/src/add-cordova-engine.ts

I imagine we can do something much like this for ionic serve --cordova/ionic cordova run browser --livereload because cordova-browser does not respect the <content src="..."> setting and it always opens a static file server, which is why I didn't want to run the cordova run browser command at all. Everything this part of cordova-browser does, the Ionic CLI does. We'd basically be taking out the run part.

[ianboru]

Hi, I am having trouble understanding how to best run my ionic app for a browser on a remote server where there is no UI. I was using screen -d -m -L ionic cordova run browser -r -c -p 80 --nolivereload --nobrowser but then cordova doesn't work. This issue seems to be related to #3043 but maybe there is a different thread that is more closely related. Do you have any suggestions?

[imhoffd]

@ianboru I would make a new issue.

[iva2k]

These two arguments are given against:

ionic serve doing anything with the Cordova Browser platform would be really unexpected and confusing.

The basic argument against the browser platform is that is pretty much an unkown

... are not to the point and have nothing to do with Ionic mission.

I see a huge value in having Cordova in ionic serve.

At a minimum, it is only consistent with Ionic being built on top of Cordova, and having parity for all Cordova platforms, regardless of their current state. I'm sure no one will be confused if ionic serve supports Cordova with --cordova option.

Next, browser support in Cordova will be improving with time. And it is known to some people. It is only a matter of more contributions to browser platform in Cordova, as browsers these days support a lot of native functions like camera.

Having Ionic fully support all Cordova platforms, including browser, will give it a boost and stimulate further development.

Trying to patch Cordova's static server with livereload is futile, why waste energy there? ionic serve --cordova is very logical, consistent and desirable. The ones who are against it, can simply avoid adding --cordova to their ionic serve, like they were always doing.

I see the future when developing for all platforms will be possible in a single environment. And I believe Microsoft won't be it. ionic serve --cordova is one little step towards this.

[ianboru]

@iva2k 100% agree, this is currently still a huge pain.