Platform is not showing enough information about platform names

[pablo-gonzalez]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I am using a single code base for browser (PWA) and Android platforms.
When deploying a PWA using browser platform the Platform.platforms() method is showing "cordova mobile android". Same output when running the Android apk.

Expected behavior:

In this particular case I am using a cordova plugin available for Android (not browser) to show Music Controls when playing audio.
Thus when I am using PWA I would like to use MediaSession Web API instead.
I would expect some information from Platforms to choose the correct implementation.

Steps to reproduce:

Create a Ionic 2 project
Add Android and browser platforms
Import Platform somewhere in your code, declare some variable for that and then add for instance:
console.log('platforms', platform.platforms());

ionic cordova run android -lc

Later
ionic cordova browser --prod
Deploy the PWA to a web server and access URL of the webapp using Chrome Android browser in your device. Inspect the console.

The ouput for both cases will be "cordova, mobile, android"

However if you run the PWA using ionic serve on localhost:port you will see in your desktop browser console the output is "cordova, core".
However if you configure port forwarding, access localhost:port using your Chrome Android browser in your device and then Inspect the console you will get "mobile, android, mobileweb"

Related code:

No related code

Other information:

I think this issue could be related to this request:
#12582

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 6.5.0 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.1.2 browser 4.1.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 25.2.5
    Node              : v7.10.0
    npm               : 3.10.10 
    OS                : Linux 4.4

Misc:

    backend : pro

[kensodemann]

Hello! Thank you for opening an issue with us!

We do not suggest using the Cordova browser platform. Rather, we suggest not using Cordova at all for web installations.

If your code base supports both Native iOS/Android builds and web builds, we suggest using web API calls when in web rather than trying to use Cordova plugins. See the "plugins" section of the following document for details: https://ionicframework.com/docs/developer-resources/desktop-support/

Here is a good resource for what you can do from web APIs to avoid having to use plugins: https://whatwebcando.today/

For deployment on the web, we suggest doing npm run ionic:build -- --prod and then installing from the www directory.

Thank you for using Ionic

[pablo-gonzalez]

Thank you for reply. I understand your point.

In fact I am facing CSS issues also.
<ion-app class="app-root app-root-md md platform-cordova platform-core enable-hover" ng-version="4.4.3">

Instead of:
<ion-app class="app-root app-root-md md platform-core enable-hover" ng-version="4.4.3">

The app looks fine on development using ionic serve but once deployed to the web server there are some minor CSS differences in main.css.

One of the benefits of using Ionic is the chance to manage a single code base for different platforms.
I have read Ionic forums and stackoverflow about how to manage the code when you have a PWA and native app but I could not find a clear anwser about it.

I know that to follow your approach I will need to remove all plugins, cordova.js from index and all imports for PWA. Then use web api to replace cordova plugins funciontality.

Instead of creating two different projects, using cordova plugins or web api in code, and run different build commands for each case (web or native), is there any way to have one single code base and manage this situation?

Thanks for your support.

Best regards,
Pablo

[jaufgang]

@kensodemann , whether or not you "suggest" using the Cordova browser platform, calling platform.platforms() should not return cordova, mobile, android when running in a desktop browser in a Cordova browser platform build.

A small number of the Ionic Native plugins do have Browser listed as a supported platform, and I haven't seen anywhere in the documentation that this platform is unsupported or not recommended. There is currently no way to use the Platform api to detect this if you are running in this platform. This is a bug that should be fixed and not dismissed.

In my case, we are building a mobile app that uses a QR Code scanner Cordova plugin that does have a browser platform implementation (uses webcams to scan the QR codes.) We use Cordova browser platform builds, not for production use by the public, but to demonstrate the use of the product in presentations and conference calls. This actually works well, but there are other areas of the app where we need to detect if we are in this environment in the browser platform in order to disable certain incompatible things. It would be very simple to do this if the call to platform.is("mobile") returned accurate information, but it does not and so we are getting errors.

[kensodemann]

@pablo-gonzalez - responding to this:

Instead of creating two different projects, using cordova plugins or web api in code, and run different build commands for each case (web or native), is there any way to have one single code base and manage this situation?

We do not suggest creating two different projecst or having two different code bases or anything like that. The plugins section of this document shows how to deal with code that needs to be different on Web/PWA vs native mobile, be it coding things different or disabling capabilities altogether, or whatever. Basically this:

this.platform.ready()
  .then(() => {
    if(this.platform.is('cordova')) {
      // make your native calls
    } else {
      // handle thing accordingly
    }
})

That only leaves the inclusion of cordova.js in the index.html as a issue, which you can either completely ignore since the error is totally harmless, or you can handle that as a build process step. Leave it in when building from mobile, comment out when building for web/pwa.

[pablo-gonzalez]

@kensodemann I had read that documentation before and the forums.
I was confused about how to manage the cordova.js file with PWA and the impact on the bundle size.
Now I have a better understanding and the documentation your refer makes sense.

If you accept a suggestion I would include in Ionic documentation the build command for PWA:
npm run ionic:build -- --prod
It is a common question in forums over time and I could not find any reference to that in the official Ionic documentation!
Also I would add a mention that it is not recommended to build PWA using Cordova browser platform explaining the reasons.

I have read questions about how to manage the build process when you are working with PWA and native code. I guess that there is some way to manage it with scripts but commenting the lines in index is not a big deal.
My only concern is when you have third party libs in index.html only used by the PWA application because you can manage it with plugins for Android platform.
For instance Google Analytics or OneSignal. I guess if you comment the JS file for that in index.html, typescript will complain later about the code below (else part for PWA) when you are building for Android.

    if(this.platform.is('cordova')) {
      // make your native calls
    } else {
      // handle thing accordingly
    }

Please correct me if I am wrong.

Thank you very much,
Pablo

[kensodemann]

We have a blog post that addresses a lot of those questions: https://blog.ionic.io/how-to-make-pwas-with-ionic/

My only concern is when you have third party libs in index.html only used by the PWA application because you can manage it with plugins for Android platform.
For instance Google Analytics. I guess if you comment the google file for that in index.html, typescript will complain later about the code below when you are building for Android.

For instances like that, I would:

1. Try to mininize cases where stuff needs to be included in the index.html like that instead of being brought in by WebPack.
2. Architect the code in such a way that cases where one thing is used in PWA and another is used in mobile such that the logic is abstracted into a service that can then be used where needed, that way any of that messiness is centralized.
3. If build size is an issue due to the size of the libraries being imported for the PWA that would not be needed on mobile, then if that code is centralized into services and managed via a build process. For example have a fooBarService with a specific interface, and then two totally different implementations, one for PWA and one for native mobile, and then include the proper one in the build via build-time scripting.

I probably wouldn't go with something like #3 unless I absolutely had to though.

I hope that made some sense.

[pablo-gonzalez]

I had read that blog before and it covers very well the build process only for PWA.
In the case of both platforms your explanation was very useful.
In fact I was considering option 2 before your answer.

Again thank you very much for your support and guidance.

I love IONIC! 🥇

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.