Overhead or disadvantages of Cordova `browser` platform?


#1

There are now two valid ways to build a web app or PWA with Ionic:

  1. ionic build
  2. ionic cordova build browser

(Note that the second one only works by accident and is not supported or advised by Ionic team!)

The second has the advantage that some (!) Cordova plugins are also available for the browser platform, and so some “native equivalent” functionality can be used in the web app /PWA quite easily - sometimes even via Ionic Native.

Has anyone looked into the overhead the cordova.js adds to the app?
Size, performance, half implemented functionality, tooling…


#2

I just built an app I have, using both ways mentioned.

ionic build:
2.24mb

ionic cordova build browser:
2.24mb
392kb in additional files - not including assets folder.
(note: I’m including all files created during the platform browser build process - not knowing if All are required )

I have had some hit and misses with Ionic Native components - NativeAudio comes to mind.
Useful for device builds but not for PWA. But PWA does not need it in desktop browsers.
So, there are still some holes to fill in the PWA for device browsers, regarding audio.

I had no luck with OneSignal Native for the browser but I did not exhaust it. I opted for a dual setup using WebPush for browsers ( including device ) and Native for app installs.

Size-wise though, seems to be a minimal increase.
Usefulness: I have not found a need for the browser build - yet.

I am mostly aiming for this to be strictly a PWA.
It uses JWT’s, uploads, geo, push notifications, storage, etc… So far so good. It is up and running but is a locality based app which I do not want bombarded.
Private message for link if interested.

Here is my list of non default dependencies in above project:
"@ionic-native/camera": “^3.12.1”,
"@ionic-native/core": “4.0.0”,
"@ionic-native/crop": “^3.12.1”,
"@ionic-native/device": “^3.12.1”,
"@ionic-native/file": “^3.12.1”,
"@ionic-native/geolocation": “^3.12.1”,
"@ionic-native/location-accuracy": “^3.12.1”,
"@ionic-native/media": “^4.1.0”,
"@ionic-native/native-audio": “^3.14.0”,
"@ionic-native/native-geocoder": “^4.1.0”,
"@ionic-native/onesignal": “^3.12.1”,
"@ionic-native/splash-screen": “3.12.1”,
"@ionic-native/status-bar": “3.12.1”,
"@ionic-native/transfer": “^3.12.1”,
"@ionic/storage": “2.0.1”,
“angular2-jwt”: “^0.2.3”,
“angular2-uuid”: “^1.1.1”,
“cropperjs”: “^1.0.0-rc”,
“ng2-currency-mask”: “^4.0.2”,
“ng2-file-upload”: “^1.2.0”,


#3

I also built my app both ways and the difference is less than 0.5MB. I believe PWAs should build on a universal platform that is browser-independent (what polyfills are meant for) so it is logical to move away from Cordova, but there are many device features that still dependent, so reality is dual configuration for the near term is the best strategy.


#4

Hi @Sujan12, recently I was having the problem of “ionic serve --no-open” not livereloading the last changes. The browser would auto reload some 10 minutes old code or sometimes point to commented code, etc… The development workflow became a pure random of browser refresh and multiple saves with vscode than the app would run my changes, very frustrating. After several google and chasing and reading several bug issues relating to “livereload” I got a hint that I had never run, did not know I had to for a new project :slight_smile:

 ionic cordova plafform add browser

I also typically don’t have android or nor ios plaftorms for that matter added either.
“add browser” apparently fixed the livereload in windows 7 chrome reflecting the latest changes I make to code.

I have seen many of your replies on several posts relating to browser and PWA stating ionic does not support PWA.
As you probably know ionic posted this on October https://blog.ionicframework.com/how-to-make-pwas-with-ionic/
Unfortunately, the only build command mentioned there is

npm run ionic:build -- --prod

And they don’t give any details, for example, where is the output and what to do with it?

Do you happen to know of a good post/tutorial or perhaps you may be willing to summarize the following:

  1. What does “browser” platform really mean (you mentioned in one of the post “cordova browser” has little to do with PWA.

  2. What are this “browser” platform limitations (eg. plugins, caveats, ???)

  3. What precaution should I take if want to develop initially locally on browser and only later install a mobile platform like android or ios (I think when they say windows they mean windows-phone?)

  4. Should I be deploying myproject\www or now myprojectplatforms\browser\www to my hosting ?

  5. Which one of these folders is getting livereloaded in Chrome browser?

Besides the “marketing” about PWA, from the get go when I jumped into ionic2 and the world of node.js development, I assumed my ionic app would run in any decent browser. Perhaps, I jumped to the wrong conclusion a year ago, that I could deploy my ionic app to some folder on my hosting and have it behave and feel close to a mobile app. Today I am doing just that. Isn’t that what PWA is all about?
I really prefer this mode of development for the kinds of apps I like to build. First, deploy as a web app. Second, and only later add specific features available only on mobile devices, eg. gps, motion, …
For camera, clipboard, keyboard I hope ionic will abstract it across all platforms (including “browser”) in a similar way they did for “storage” mapping to available device/technology.

Thanks for your help and taking the time to share your knowledge.


#5

@shepard, regarding audio support shortcomings… with my little knowledge of node.js/npm, etc…, I ended up locating and using howler.js (BTW, I know little about JS) Anyway, with my own cooked up provider I am managing to play an array containing mp3 whether local or remote. I hacked up some code using a chain promises, I struggle understanding that code and promises in general every time I have to visit them).

Howler.js seems to play OK on the ios phone browser (I assume safari or whatever defaults on iPhones) no extensive testing.

Do I understand that NativeAudio is the way to go for an abstracted approach to playing audio on all “supported” platforms, both for simple beeps and advanced gaming/background needs?

In the ionic docs it’s the usual weird blip doc “Native Audio = Native Audio Playback” what a very enlightening description. At the repo it says briefly “Native Audio playback, aimed at HTML5 gaming and audio applications which require minimum latency, polyphony and concurrency”

the ionic docs lists some single liners (no actual sample code/pattern I can leverage from [I am a 100% copy paster])

this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);
this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

there is no mention whether ‘path/to/file.mp3’ could be either local assets or an http path?

If you happen to have a wrapper (or production sample) around NativeAudio please share.

Thanks for anyone willing to provide more insights on NativeAudio.