Support livereload for `ionic cordova run browser`

[imhoffd]

origin: https://github.com/ionic-team/ionic-cli/issues/3036 and https://github.com/ionic-team/ionic-cli/issues/3036#issuecomment-376662587

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: https://github.com/ionic-team/ionic-cli/issues/2312#issuecomment-365732607

[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.

[atraianovschi]

I would also love to see this feature implemented. And as a try to convince others that is useful I would say that maybe most of the developers that are using ionic would target at least one mobile platform and with a mobile platform it comes at least one native plugin. And because "ionic serve" is the most used and easy way to develop it would be also very helpful to have the native plugins running when you are developing. I agree that not all of them are working on the browser platform, but still most of them are working and it will be a plus for sure.

[imhoffd]

Just leaving a super quick note: This may be possible in CLI 4/Ionic 4 by running the following:

ionic serve --cordova --platform browser

(untested)

[ilya-payrange]

sweet! any possibility to backport to Ionic 3?

[jesper-bylund]

Support for httpS while developing locally is redirected around several repos and issues, this is as far as I've been able to track it. Is there ANY plans to support something like "ionic serve -ssl"? Right now there's no reasonable way to develop anything with Geolocation.

[imhoffd]

@raelmiu This issue has little to do with HTTPS. You are looking for this 👉 https://github.com/ionic-team/ionic-cli/issues/3305

[jesper-bylund]

The link you gave me is just the run-around I described @dwieeb. There are many, many, issues filed about ionic-cli not being able to serve ANY project with mapbox or geolocation services due to httpS restriction. Is there anything planned, or any solution implemented, to make it possible to work locally?

[m1aw]

@dwieeb it's not working for us on 4.1.2

We were able to run the app on 3.20 with:

npm run ionic:build:before; ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build

Unable to run with ionic serve --cordova --platform browser though... It servers the browser page but cordova and the other plugins are not available.

[IonelLupu]

Any updates on this?

[happy2share]

Just leaving a super quick note: This may be possible in CLI 4/Ionic 4 by running the following:

ionic serve --cordova --platform browser

(untested)

The above command is working fine. But we need to build first for browser (ionic cordova build browser) before using the above command.

[ciekawy]

for ionic 3 I was successfully running

ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build

depending on number of plugins - including an app supportig facebook login as an only authentication method - being unable to run cordova plugins in a browser (where available) i a blocker

[ciekawy]

can confirm that

ionic cordova build browser ionic serve --cordova --platform browser

works - even the livereload works

of course you also need to add browser platform

ionic cordova add platform browser

[imhoffd]

Yep, these commands are the workaround:

$ ionic cordova build browser
$ ionic serve --cordova --platform browser

This issue is here for implementing ionic cordova run browser, which will combine them.

[ciekawy]

being able to wire this into e2e to test the app with available cordova plugins would be awesome...

[ciekawy]

while ionic serve --cordova --platform browser does it's job pretty well, I'd like to refresh this ticket in regard to e2e setup.

How I managed to do that now is just spawn the server as above and then separately do

tsc --p e2e/tsconfig.e2e.json && protractor e2e/protractor.conf.js

how we can make it i one go? do we need a dediated ticket for @ionic/angular-toolkit to make it working?

[LiamKarlMitchell]

First add support for cordova platform browser. ionic cordova platform add browser

Build for the browser. ionic cordova build browser

Serve cordova for the browser platform, this will have live reload when editing your source files. ionic serve --cordova --platform browser

Now I can use Google Maps Native in browser for development.

Could this be simplified so that ionic serve uses the arguments --cordova --platform browser by default when the platform browser installed and cordova plugins are being used?

[stevebrowndotco]

I have this working, but what is the consensus in this community for building an application with cordova browser for production?

I think I can do it... but... should I?

Some of my users would love to use a desktop version of the app, but I can't find any good resources for using cordova browser as a production desktop application.

[ciekawy]

Hmm I don't think cordova browser support is meant to be use in production. In such case probably it may be better to consider PWA and/or capacitor.

While it is often raised/discussed under tickets, SO questions and so whether brower should have cordova support at all, I think it should be clearly stated in ionic docs what is cordova browser support status. Also I agree that there are use cases for which reusing same codebase also for web.

[stevebrowndotco]

Well I use ionic google maps, so If I go with a PWA, then that means I just make a js fallback rather than use cordova, which means i have to write two sets of code for this case. Unless I take a "risk" and use cordova browser in production, which is unclear for me. This is considering the fact that Cordova Google Maps works perfectly in the browser for me.

And capacitor doesn't support Google Maps, and there is no community plugin. I have to use cordova browser. (I've tried it).

I think this entire issue is indicative of unclear documentation about the ionic / cordova ecosystem for desktop apps. It's unclear because the ionic google map docs specifically provide instructions for setting up with a browser ..!

[adamduren]

I use cordova browser just fine in production. Some cordova plugins do not support the browser platform. In this case for my AppModule I have the following for my providers.

providers: !environment.isDesktop ? [
  FirebaseDynamicLinks
] : [
  { provide: FirebaseDynamicLinks, useValue: null },
]

You can also use this approach to provide a better web based alternative by replacing the Ionic Native plugin class via the Dependency Injector with your own that mimics the API

[lwouis]

ionic serve --cordova --platform browser is undocumented when doing ionic serve --help with ionic 5.2.0

[stevebrowndotco]

@adamduren that's a great solution to mitigate the risk of other cordova plugins that aren't supported in the browser. Thanks!

[NischayaSharma]

ionic serve --cordova --platform browser After running this command, when I hit Ctrl + R or reload the page in any way (including live reload), It is unable to fetch the data I stored in the localstorage with the Loopback Angular SDK. So I have to login again and again.

EDIT: I want to run Razorpay and since I have a single code base for Android/iOS and Web I installed the Cordova plugin for my app. So Now RazorpayCheckout doesn't work for ionic serve, and ionic cordova run browser crashes anytime I reload the page. ANY help is appreciated