bug: "mobileweb" platform is not working with ionic 4

[learnCodeBreak]

Bug Report

Ionic version:

[x] 4.x

Current behavior: As I am using ionic v4 for web and mobile platforms, so it suppose to handle it for desktop browser and mobile web view. I am using platform to detect the list of platform. Based on list of platform app having different behaviour. But Ionic platform does not detect the difference between device like ('ipad' || 'ios' || 'iphone' || 'android' || 'tablet') and browser in device and producing same behaviour for both.

For Desktop browser, list of platform are this.platform.platforms() (4) ["tablet", "desktop","cordova","hybrid"]

Expected behavior: Platform behaviour would be same for desktop browser and device browser i.e. "mobileweb". Platform should detect proper list of platforms from platform.platforms() and should not list out "tablet" platform for desktop browser.

Steps to reproduce: We can found this by checking platform.is() in desktop browser, device browser i.e. "mobileweb" and in ipad, iphone or android

Related code:

this.platform.is('ipad' || 'ios' || 'iphone' || 'android' || 'tablet')

Other information: "dependencies": { "@angular/animations": "^7.2.15", "@angular/cdk": "^7.3.7", "@angular/common": "~7.1.4", "@angular/core": "~7.1.4", "@angular/forms": "~7.1.4", "@angular/http": "~7.1.4", "@angular/material": "^7.3.7", "@angular/platform-browser": "~7.1.4", "@angular/platform-browser-dynamic": "~7.1.4", "@angular/router": "~7.1.4", "@ionic-native/core": "5.0.0-beta.21", "@ionic-native/date-picker": "^5.6.1", "@ionic-native/device": "^5.14.0", "@ionic-native/geolocation": "^5.13.0", "@ionic-native/http": "^5.6.0", "@ionic-native/keyboard": "^5.6.1", "@ionic-native/screen-orientation": "^5.8.0", "@ionic-native/splash-screen": "5.0.0-beta.21", "@ionic-native/status-bar": "5.0.0-beta.21", "@ionic-native/unvired-cordova-sdk": "^5.14.0", "@ionic/angular": "^4.9.1", "@ionic/storage": "^2.2.0", "@logisticinfotech/ionic4-datepicker": "^1.3.0", "@lokidb/indexed-storage": "^2.0.0-beta.8", "@mobiscroll/angular-lite": "^4.7.2", "@railinc/rl-datepicker-popup": "0.0.22", "@stevegill/cordova-plugin-device": "^1.1.3", "angular-bootstrap-datetimepicker": "^3.0.0", "angular2-tag-input": "^1.2.3", "angular4-datepicker": "^1.0.1", "bootstrap": "^4.3.1", "chart.js": "^2.8.0", "chart.piecelabel.js": "^0.15.0", "cordova-browser": "^6.0.0", "cordova-ios": "^5.0.1", "cordova-plugin-add-swift-support": "git+https://github.com/akofman/cordova-plugin-add-swift-support.git", "cordova-plugin-advanced-http": "2.0.9", "cordova-plugin-compat": "^1.2.0", "cordova-plugin-datepicker": "0.9.3", "cordova-plugin-device": "^2.0.3", "cordova-plugin-file": "^6.0.1", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-hotspot": "1.2.10", "cordova-plugin-ionic": "^5.3.0", "cordova-plugin-ionic-keyboard": "^2.1.3", "cordova-plugin-ionic-webview": "^2.3.2", "cordova-plugin-screen-orientation": "3.0.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-unvired-sdk": "git+https://github.com/unvired/cordova-plugin-unvired-sdk.git", "cordova-plugin-whitelist": "^1.3.3", "core-js": "^2.5.4", "dayspan": "^0.12.5", "es6-promise-plugin": "^4.2.2", "gijgo-angular-wrappers": "^1.9.13", "hammerjs": "^2.0.8", "igniteui-angular": "^7.3.5", "ionic-tags-input": "^0.1.2", "ionic2-calendar": "^0.5.2", "ionic2-super-tabs": "^4.1.4", "jquery": "^3.4.1", "lokijs": "^1.5.6", "material-design-icons": "^3.0.1", "mobiscroll-angular": "^4.0.0", "moment": "^2.24.0", "ng-circle-progress": "^1.4.1", "ng-pick-datetime": "^7.0.0", "ng2-bootstrap": "^1.6.3", "ng2-charts": "^2.2.3", "ng2-datepicker": "^3.1.1", "ngx-bootstrap": "^4.3.0", "ngx-moment": "^3.4.0", "ngx-toastr": "^10.0.4", "open-iconic": "^1.1.1", "rxjs": "~6.3.3", "rxjs-compat": "^6.5.2", "time-ago-pipe": "^1.3.2", "uuid": "^3.3.2", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/architect": "~0.11.4", "@angular-devkit/build-angular": "^0.12.4", "@angular-devkit/core": "~7.1.4", "@angular-devkit/schematics": "~7.1.4", "@angular/cli": "~7.1.4", "@angular/compiler": "~7.1.4", "@angular/compiler-cli": "~7.1.4", "@angular/language-service": "~7.1.4", "@ionic/angular-toolkit": "~1.2.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~10.12.0", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.4", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.12.0", "typescript": "~3.1.6" },

Ionic info:

Ionic:
   Ionic CLI                     : 5.4.1 (/Users/dhirendra/.nvm/versions/node/v11.13.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : browser 6.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 11 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/dhirendra/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v11.13.0 (/Users/dhirendra/.nvm/versions/node/v11.13.0/bin/node)
   npm               : 6.11.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

[liamdebeasi]

Thanks for the issue. What device(s) are you testing this on?

[raghu5291]

I encountered same issue, I am testing on OnePlus 5T, Chrome browser

[learnCodeBreak]

Tested with ipad, iphone, onePlus 6T, and other device also

[ilprima]

I have the same issue. On iOS or Android opening the code in the browser I can’t check if Cordova is using or not because the platforms returned don’t include mobileweb. I use this condition to check if I have to use a solution (eg Cordova imgPicker) or another (eg input with type=file).

For example on Android running the code on browser the platforms() returns: [“android”, “cordova”, “mobile”, “hybrid”] but Cordova is not available and this causes problems

[matijagrcic]

Using is("desktop") and is("mobileweb")works on desktop and Chrome emulator but on actual devices platforms() shows [android, cordova, mobile, hybrid]which is useless as it should contain mobileweb also given it's not a native app.

Checking the hostname https://github.com/ionic-team/cordova-plugin-ionic-webview#hostname is currently the only way to detect if running from native app or desktop/mobile browsers.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic/issues/19737.

Due to inconsistencies between platforms and across devices, it is not easy to achieve a 100% success rate with platform detection. For example Android phones typically have mobile in their user agent string; however, a small number of Android phones do not.

We have opted instead to allow developers to override our platform detection methods with other methods that better suit an application's use case.

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