Anyone tried MS AppCenter with Ionic?

Hi,

AppCenter from Microsoft sounds great - it’s got push, deployment, UI testing on 1000s of real devices and CI build processes - anyone tried integrating an Ionic project with it? https://appcenter.ms/

Problem: There is no Cordova plugin / SDK available (yet?). So you would have to either create one or implement the native stuff in the generated iOS and Android project manually.

Hmm - yes, the documentation seems a bit raw still - it seems that CodePush (a component of AppCenter) has a Cordova plugin but all the rest of the documentation does not mention Cordova). Hopefully they add Cordova compatibility (or MS would be missing a huge market). It looks like a great product in theory…

2 Likes

Looks like Cordova has finally been added. Good Luck trying to understand what they are saying! For MS documentation this isn’t too bad, but a bit rough around the edges.

I’ve tried it.
I was able to install the plugins, but when building there is an error message saying "Module AppCenter not Found"
Anyone having the same issue?

Were you able to resolve this? How are you liking it so far?

Did you added the AppCenterPush to your app.module.ts providers? I’ve tryed to implement this but now, the Android build fails due of unresolved dependecies…

I gave up. It now only seems to work with Ionic v4, but I am not ready to upgrade my apps to v4.

Today, still unresolved (24 January 2019 20:41)…

ionic info

Ionic:

ionic (Ionic CLI) : 4.4.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 19 other plugins)

System:

NodeJS : v10.3.0 (/usr/local/bin/node)
npm : 6.5.0
OS : macOS
Xcode : Xcode 10.1 Build version 10B61

It doesn’t work with v3. You have to upgrade to v4. Yes, this answer sounds horrible, but don’t waste your time trying to get it to work. It won’t. Only v4.

1 Like

I searched all day maybe find a solution, but nothing could fix it. Yes, it is unacceptable on end of the day. I will try to migrate to ionic v4.

I have tried on ionic v4 then It does not worked. I wish they will find an solution.

It does work for me with Ionic v4 … Although it doesn’t work as you would expect. Takes two new sessions before new update appears.

@edriven Could you explain more which part is working and which does not? I m still not able to integrate AppCenter from Ionic4

All of it worked.

When you first push a build to AppCenter… you need to make sure the version numbers has NOT changed. It will NOT push new versions in your app. These version numbers are the ones inside of CONFIG.xml. Do NOT change these or it will not update your app.

Second! It takes a while to download the new app in the background…so the app needs to open for a while to allow the download to take place.

Third… once there is a new update … the app has to restart in order to view it.

The biggest thing for me was the version number. I see their point , but it is rather annoying as that wouldn’t a design pattern I’d use. I would guess most people would be like me and just want the latest version to override everything on the phone regardless of what starting version they got from the app store. This means you have to store the AppCenter pushed Version in another place… which makes ZERO sense.

@edriven does it have a live update like AppFlow?

Yes. That is the entire function of the service.

Hello Guys,

I got these plugins integrated and working. I would say that issue comes with the deployment using Azure DevOps, it seems that it is not getting the plugins added even though that logs show the installation of the plugins done satisfactorily.
I will appreciate any experience deploying the Ionic iOS app using Azure DevOps.

Ionic:

Ionic CLI : 6.4.0

Utility:

cordova-res : 0.15.1
native-run : 1.0.0

System:

NodeJS : v10.18.0
npm : 6.13.4
OS : Windows 10

package.json

` "dependencies": {
    ...,
    "@ionic-native/app-center-analytics": "^5.29.0",
    "@ionic-native/app-center-crashes": "^5.29.0",
    "@ionic-native/app-version": "^5.28.0",
    "@ionic-native/camera": "^5.28.0",
    "@ionic-native/core": "^5.28.0",
    "@ionic-native/file": "^5.28.0",
    "@ionic-native/native-page-transitions": "^5.28.0",
    "@ionic-native/network": "^5.28.0",
    "@ionic-native/network-interface": "^5.28.0",
    "@ionic-native/splash-screen": "^5.28.0",
    "@ionic-native/sqlite": "^5.28.0",
    "@ionic-native/sqlite-porter": "^5.28.0",
    "@ionic-native/status-bar": "^5.28.0",
    "@ionic-native/unique-device-id": "^5.28.0",
    "@ionic/angular": "^5.3.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-networkinterface": "^2.0.0",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-sqlite-storage": "^5.0.1",
     ....,
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.1",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    ...,
    "cordova": "^10.0.0",
    "cordova-android": "^9.0.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-ios": "^6.1.1",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appcenter-analytics": "^0.5.1",
    "cordova-plugin-appcenter-crashes": "^0.5.1",
    "cordova-plugin-appcenter-shared": "^0.5.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-res": "^0.15.1",
    "gulp-sass": "^4.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "native-run": "^1.0.0",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-uniquedeviceid": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-networkinterface": {},
      "uk.co.workingedge.cordova.plugin.sqliteporter": {},
      "cordova-sqlite-storage": {},
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "26.+"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-appcenter-crashes": {},
      "cordova-plugin-appcenter-analytics": {}
    },
    "platforms": [
      "browser",
      "android",
      "ios"
    ]
  }`

app.module.ts

`
...
import { AppVersion } from '@ionic-native/app-version/ngx';
import { AppCenterAnalytics } from '@ionic-native/app-center-analytics/ngx';
import { AppCenterCrashes } from '@ionic-native/app-center-crashes/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    ...
    IonicModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    AppRoutingModule,
   ...
  ],

  providers: [
    StatusBar,
    NativePageTransitions ,
    SplashScreen,
    AppVersion,
    AppCenterAnalytics,
    AppCenterCrashes,
    ApiService,
    EmployeeService,
     ....
  ],
  exports: [TranslateModule],
  bootstrap: [AppComponent],
})
export class AppModule implements OnDestroy{
  /**
   *
   */
  constructor( private network: NetworkService,
               
               private auth: AuthService,
               private appCenterAnalytics: AppCenterAnalytics,
               private appCenterCrashes: AppCenterCrashes
              ) {

   this.network.initializeNetworkEvents();
   this.appCenterCrashes.setEnabled(true);
   this.appCenterAnalytics.setEnabled(true);

  }
  
  ngOnDestroy(): void {
    this.auth.logout();
  }
}
`

This pretty much does the magic after adding the app identifier provided from App Center to the config.xml file.

Thank you,

Hey all, we’ve seen folks be successful with AppCenter for those using Cordova. For Capacitor (and Cordova!), our own service Appflow has full support for live app updates for Capacitor.

We’ve just rolled out a bunch of features like live web previews, ability to fully customize the build stack used for builds, monorepo support coming soon, and some other fun stuff in the pipeline.

Either way, can’t go wrong (except note AppCenter and CodePush doesn’t support Capacitor)