Ionic 3 super slow with firebase on device/emulator

I have had my app running perfectly on Angular 2 and Ionic 2 till I had to upgrade it to solve the scroll issue on iOS addressed here and was solved in the recent Ionic release [https://github.com/driftyco/ionic/issues/10936] (https://github.com/driftyco/ionic/issues/10936) and I used npm outdated to update other dependencies at the same time. Then once I started the app I have noticed dramatic slowness in the start up of the app. I had no idea where was it coming from and kept troubleshooting and breaking down the app into little pieces till I have figured out it came from firebase. So I have made a new simple app that only retrieves small data from firebase to test it as you can see, and have uploaded it on git repository I’ve linked to earlier.

The dependencies I used before:


"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angularfire2": "^2.0.0-beta.7",
    "firebase": "^3.6.8",
    "firebase-admin": "^4.1.0",
    "ionic-angular": "2.0.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "typescript": "2.0.9"
  },
Dependencies now:
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.5.0",
    "@ionic-native/splash-screen": "3.5.0",
    "@ionic-native/status-bar": "3.5.0",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^2.0.0-beta.8",
    "firebase": "^3.8.0",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.4",
    "typescript": "~2.2.1"
  },

Current ionic info output:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.2.1 Build version 8C1002

Can you try mocking out the AngularFire library with something that returns a User object using Observable.of(user).delay(500) or somesuch so that we have consistent predictable latency from the remote database and can eliminate the network connection as a factor? That would also allow other people to clone your app without needing Firebase access.

If you haven’t done this sort of thing before, you just create a class with some of the same methods as the one you’re trying to mock and then in your app module you remove the import for the real thing and add {provide: RealService, useClass: MockService} to the providers stanza. Client code shouldn’t know the difference.

@Shaarawy130, I am having the same issue after upgrading to Ionic 3. Everything is working with browser but not for device.

There is a huge delay to fetch data from Firebase but it will eventually get fired. (More than 30s in my case). This is only happened to first Firebase connection. Subsequent Firebase listeners are all working fine.

I am suspecting there is some blocking during first Firebase initialization or socket connection to Firebase server.

I had tried to downgrade Firebase version to 3.7.6 and the delay is noticeably reduced.

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/core": "3.5.0",
    "@ionic-native/geolocation": "3.5.0",
    "@ionic-native/google-maps": "3.5.0",
    "@ionic-native/splash-screen": "3.5.0",
    "@ionic-native/status-bar": "3.5.0",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angular2-qrcode": "2.0.1",
    "angularfire2": "2.0.0-beta.8",
    "firebase": "^3.8.0",
    "geofire": "4.1.2",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "ngx-pipes": "1.5.9",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.4",
    "typescript": "2.2.2"
  },
 ordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed
2 Likes

@rapropos Thank you very much for your idea, but I’m not sure if I understood what you meant, maybe a little bit of explanation would make it easier for me.
Also I forgot to mention that the problem only appears for the first connection to firebase when it runs on device.

@jasonhoch23 Finally someone else experiencing the same problem after updating. I have created an issue https://github.com/shaarawy130/innotest maybe you can explain the experience you faced there also.

Here are my console log from Android device.

There are 48s delay for me. Not sure if it is Firebase v3.8.0 or Ionic 3 which is blocking the websocket.

2017-04-21 21:04:50.211 main.js:122484 Ionic Native: deviceready event fired after 3091 ms
2017-04-21 21:04:50.406 assets/icon/favicon.ico Failed to load resource: net::ERR_FILE_NOT_FOUND
2017-04-21 21:05:01.875 assets/icon/favicon.ico Failed to load resource: net::ERR_FILE_NOT_FOUND
2017-04-21 21:05:02.726 main.js:40326 p:0: Listen called for /firebaseURL-not-shown {"ep":"w238~","i":"g","sp":"w238s"}  
2017-04-21 21:05:02.730 main.js:40326 p:0: Listen called for /irebaseURL-not-shown {"ep":"w238s","i":"g","sp":"w238h"}  
2017-04-21 21:05:50.156 main.js:40326 p:0: Auth token refreshed  
2017-04-21 21:05:50.159 main.js:40326 getToken() completed. Creating connection. 
2017-04-21 21:05:50.164 main.js:40326 c:0:0: Connection created  
2017-04-21 21:05:50.175 main.js:40326 c:0:0:0 Websocket connecting to wss://s-usc1c-nss-132.firebaseio.com/.ws?v=5&ns=firebaseURL-not-shown  
2017-04-21 21:05:52.693 main.js:40326 c:0:0:0 Websocket connected.  
2017-04-21 21:05:52.708 main.js:40326 c:0:0: Realtime connection established.  
2017-04-21 21:05:52.710 main.js:40326 p:0: connection ready  
2017-04-21 21:05:52.718 main.js:40326 p:0: reportStats {"c":{"sdk.js.3-8-0":1,"framework.cordova":1}}  
2017-04-21 21:05:52.720 main.js:40326 p:0: {"r":1,"a":"s","b":{"c":{"sdk.js.3-8-0":1,"framework.cordova":1}}}  
2017-04-21 21:05:52.728 main.js:40326 p:0: Listen on /firebaseURL-not-shown for default

It’s probably moot now that @jasonhoch23 has chimed in, but for posterity and in case anybody else is interested, something like this:

export class AngularFireAppMock {
  db = AngularFireDatabaseMock();   
  database(): AngularFireDatabaseMock { return db; }
}

export class AngularFireDatabaseMock {
  object(): Observable<any> {
    return Observable.of({name: "nancy"}).delay(500);
   }
}

@NgModule({
  providers: [ {provide: AngularFireApp, useClass: AngularFireAppMock} ]
})
export class AppModule{}

Obviously that’s extremely bare-bones, and probably not even enough to run with your entire app, but that’s the general idea.

What evidence do you have for this please? This thread has gotten me really curious. I’m still not convinced it’s a Firebase issue, because earlier versions of Firebase would go slow, but the problems turned out to be corruptions on individual devices, and the solutions were along the lines of “delete the Firebase variables in Local Storage so it has to reinitialize.” So casual use of Observables might cause this.

On the other hand, if it is a Firebase issue, I’ll look like a bit of an idiot – which I’m ok with, wouldn’t be either the first or the last time. But I’ve looked at the 3.8 changelog and nothing jumped out at me. The changes in 3.8 are mostly changes to auth, and the OPs repo doesn’t use auth.

Edit: Note that some auth methods have been deprecated. So do you mean “can’t auth with Google at all,” or “can’t auth with Google using previous code?” Because the second behavior is expected.

Hi all,

The solution is here https://groups.google.com/forum/#!topic/firebase-talk/svgk3GNcY0o

We need to install the cordova plugin

1 Like

Excellent detective work.

I don’t think your problem and the OP’s problem are the same. I didn’t mention this when you first posted, because I was already posting too much. But I thought your issue could well be due to Firebase 3.8, because you were getting an auth token and the main change in 3.8 was support for OAuth. But the OP was reporting something different – a problem that had nothing to do with auth requests. Unless you’re seeing the same issues even when you don’t request auth?

Ok have you tested this?

Tested and work like a charm.

2017-04-21 21:05:02.726 main.js:40326 p:0: Listen called for /firebaseURL-not-shown {"ep":"w238~","i":"g","sp":"w238s"}  
2017-04-21 21:05:02.730 main.js:40326 p:0: Listen called for /irebaseURL-not-shown {"ep":"w238s","i":"g","sp":"w238h"}  
2017-04-21 21:05:50.156 main.js:40326 p:0: Auth token refreshed

Above are my log before I installed the cordova plugin. It took ~48s to get the auth token to be refreshed. I was not authenticated during that time.

After I had installed the plugin as mentioned by Bassam, everything is back to normal.

PS: I am using User/Password auth.

What I’m not clear about is whether you would have gotten lag if you’d requested an object from a Firebase location where the database rules didn’t require an auth token. My guess is there would have been no problem. So I still don’t understand the OP. But thanks for finding that, sounds as though you got them to push out a change soon, which is great.

which plugins did you install? all from that list? There are 5 plugins.

reprint:
Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
Plugin to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin --save
Plugin to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
Plugin to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
Plugin to handle deep linking through Custom Scheme for iOS
Substitute com.firebase.cordova with the iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable
URL_SCHEME=com.firebase.cordova --save

I am having the exact SAME issue. Thank god I am not insane I am the only person. Yes, the <div *ngFor="let location of locationList$ | async"> for me does not work anymore. The async pipe could not extract the data. But the subscribe get the data. This is not the case in Ionic 2.x!!

You may try 3.9.0 which auth delay has been fixed.

2 Likes

There’s some other forum where some wrote to downgrade to Corodva@6 and that worked for me

Hell sir, I am facing some another problem, please help me:

  1. I can save sqlite data save to server database by using API (http).
  2. I have 4 data in my sqlite local storage.
  3. Following function: for each data is saved to server database successfully…
    a) after success i got a response from server.
    b) And according success message i run another function for delete single data(delete each data)
    c) But what I am seeing only no. 4 data is delete other remain same.

Here is my code:

synch(){

this.sqlite.create ({ name: “m_ilsapps.db”, location: “default” })
.then((db: SQLiteObject) => {
db.executeSql(“SELECT * FROM m_offline_pod_data ORDER BY m_offline_id ASC”, ).then((data) => {
if(data.rows.length > 0) {
for(var i = 0; i < data.rows.length; i++) {

    this.productInfo.m_offline_id = data.rows.item(i).m_offline_id;
    this.productInfo.m_pod_no = data.rows.item(i).m_pod_no;

this.http.post(“http://example.in/clix_mobile_apps/add-product-offline.php”,this.productInfo).subscribe( data => {
console.log( "SUCCESS => " + data);

let offlineupdate = JSON.parse(data["_body"]);

  if(offlineupdate.status == "success"){

this.MYdeleteData(this.productInfo.m_offline_id);

  }  else if(offlineupdate.status == "podnotmatch"){

 this.toast.show("POD MISMATCH...try again...", '5000', 'center').subscribe(
      toast => {
      console.log(toast);
      }
    );

  }

}, err=>{
  console.log("Error => "+ err);

    this.toast.show("NO SERVER RESPONSE...try again...", '5000', 'center').subscribe(
      toast => {
      console.log(toast);
      }
    );

});
}  // for each end
                       }
    console.log(this.products);
}, (error) => {
    console.log("ERROR: " + JSON.stringify(error));
             });
})

}

// delete function

MYdeleteData(myID){
alert(‘DELETE’+myID);
this.sqlite.create ({ name: “m_ilsapps.db”, location: “default” })
.then((db: SQLiteObject) => {
db.executeSql(“DELETE FROM m_offline_pod_data WHERE m_offline_id = '”+myID+"’", ).then((data) => {

 console.log(this.products);

}, (error) => {
  //alert('delete error v3-10012')
    console.log("ERROR: " + JSON.stringify(error));
  });

}