I have a service that tracks network connection state and provides it to components across the application. Then, there’s a popup that has a list view that is supposed to update it’s items async based on new statuses received from network status service, which it does when app is served to chrome or prod built and run on chrome, but it doesn’t when run on android device. Second issue comes when network status triggers setting Login page to root of the main navigation controller. After this change detection starts working only on direct interaction with UI and tabs controllers don’t switch tabs until another page gets focused or app pause/resume.
Any ideas of what may cause this?
package.json
"dependencies": {
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/camera": "5.8.0",
"@ionic-native/core": "5.8.0",
"@ionic-native/document-viewer": "5.8.0",
"@ionic-native/file": "5.8.0",
"@ionic-native/in-app-browser": "5.8.0",
"@ionic-native/network": "5.8.0",
"@ionic-native/photo-viewer": "5.8.0",
"@ionic-native/screen-orientation": "5.8.0",
"@ionic-native/splash-screen": "5.8.0",
"@ionic-native/status-bar": "5.8.0",
"@ionic/storage": "^2.2.0",
"@types/pouchdb": "^6.3.3",
"@types/pouchdb-upsert": "^2.2.6",
"angular-svg-round-progressbar": "2.0.0",
"angular2-signaturepad": "^2.8.0",
"com-sarriaroman-photoviewer": "^1.2.2",
"cordova-android": "^7.1.1",
"cordova-android-support-gradle-release": "^1.4.7",
"cordova-browser": "^5.0.4",
"cordova-ios": "~4.5.5",
"cordova-plugin-advanced-http": "^2.1.1",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-document-viewer": "^0.9.11",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-inappbrowser": "3.0.0",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-screen-orientation": "^3.0.1",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-sqlite-2": "^1.0.6",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.6.0",
"es6-promise-plugin": "^4.2.2",
"ion-datepicker": "2.8.0",
"ionic-angular": "3.9.6",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "1.2.2",
"ionicons": "^3.0.0",
"ng2-validation": "^4.2.0",
"npm": "^4.6.1",
"pouchdb": "^7.0.0",
"pouchdb-adapter-cordova-sqlite": "^2.0.5",
"pouchdb-upsert": "^2.2.0",
"rxjs": "5.5.2",
"sw-toolbox": "^3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.4",
"cordova-plugin-advanced-http": "~2.0.9",
"ionic": "^4.12.0",
"typescript": "2.8.1"
},
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-sqlite-storage": {},
"cordova-plugin-camera": {},
"cordova-plugin-screen-orientation": {},
"com-sarriaroman-photoviewer": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-document-viewer": {},
"cordova-android-support-gradle-release": {
"ANDROID_SUPPORT_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-network-information": {},
"cordova-plugin-sqlite-2": {},
"cordova-plugin-advanced-http": {
"OKHTTP_VERSION": "3.10.0"
}
},
"platforms": [
"browser",
"android",
"ios"
]
}
Environment.service.ts AKA network status provider
@Injectable()
export class EnvironmentService {
public isOnline: boolean;
public isOnline$: BehaviorSubject<boolean>;
private onlineDelay = 5000;
constructor(private network: Network, private platform: Platform, private apRef: ApplicationRef, private ngZone: NgZone) {
this.isOnline = navigator.onLine;
this.isOnline$ = new BehaviorSubject<boolean>(navigator.onLine);
let onlineSource$: Observable<boolean>;
let offlineSource$: Observable<boolean>;
if (this.platform.is('mobileweb')) {
onlineSource$ = fromEvent(window, 'online').mapTo(true).delay(this.onlineDelay);
offlineSource$ = fromEvent(window, 'offline').mapTo(false);
}
else {
onlineSource$ = this.network.onConnect().mapTo(true).delay(this.onlineDelay);
offlineSource$ = this.network.onDisconnect().mapTo(false);
}
let networkStatus$ = onlineSource$.merge(offlineSource$);
this.ngZone.run(() => {
networkStatus$.subscribe(status => {
this.isOnline = status;
this.apRef.tick();
this.isOnline$.next(status);
});
})
}
app.component.ts
snippet responsible for navigation based on network status
this.environment.isOnline$
.pipe(
skip(1),
filter(isOnline => isOnline),
flatMap(() => this.auth.isAuthenticated()),
).subscribe(isAuthenticated => {
if (isAuthenticated) {
this.processStashedActions();
}
else {
this.nav.setRoot(LoginPage);
}
});