Using browser APIs over Ionic Native APIs


#1

I’m new to Ionic and mobile development (but have lots of web dev experience). I’m confused about the use case for some Ionic Native plugins.

For example, the Network plugin (and underlying cordova plugin) allows you to check online/offline status for a device (presumably using the underlying native APIs available on the device). But this functionality already exists in the browser API where you can use the online or offline events to check basic status (or navigator.onLine).

Is the purpose of the Native library to provide extra functionality on top of what is already available in the browser by default? Are all browser APIs available in Ionic/Cordova and is there somewhere where I can see what APIs are available in the WebView? When should you choose one over the other?


#2

The specific example you give of the network plugin gives much more detail than offline/online, it tell you if they are on wifi vs 4g as well, and can also notify you on change. It can do this because it can tie in to the phones operating system and get the status.

That’s the basic reason for the plugins, but it is true that as the web becomes more powerful you may not need to use any Ionic Native / Cordova plugins for some features, since the web now supports them. Simple examples would be geolocation and taking a photo, both of which can now be done native in a browser.

Beyond just backwards compatibility, more advanced things like storing those photos locally on the phone in a given location or doing geolocation in the background are only possible by using native ios and android code, and that’s when the plugins become necessary.

Edit:
To answre your question about what browser APIs are available in the webview, it gets a bit complicated because it depends which version of Android or iOS the use has installed. That dictates what webview you get.

So if you want to support back to Android KitKat, which still makes up 22% of all Android users, you can only use features supported in mobile Chrome 30.0.0.0 or earlier. https://developer.chrome.com/multidevice/webview/overview#what_version_of_chrome_is_it_based_on_


#3

Thanks for the reply @rlouie. That clears it up. It seems like (when building cross-platform for web & mobile) a sensible approach is to use the browser APIs that are available as a default and add native functionality explicity for mobile devices as needed.