CODEWITHSUNDEEP
angularionic-frameworkcapacitor
Olumide Ayeni
Olumide Ayeni

Reputation: 189

I need help implementing ionic foreground service

I am having problem to get my app running in the background, One of the service is for the app to track location when the device is in background mode. Everything works fine, but the background service only work for 2 minute. I am testing on pie - Android 9. I read from android documentation that i need to use a foreground service for android 8 and above. I would like to know the implementation of foreground service in my ionic 4.6 application

My app.component.ts file code.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AngularFireAuth } from '@angular/fire/auth';
import { ForegroundService } from '@ionic-native/foreground-service/ngx';



declare var cordova: any;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private router: Router,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fireAuth: AngularFireAuth,
    public foregroundService: ForegroundService
    ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      cordova.plugins.backgroundMode.on('activate', () => {
        cordova.plugins.backgroundMode.disableWebViewOptimizations();
        cordova.plugins.backgroundMode.disableBatteryOptimizations();
        console.log('ACTIVATE background mode1');
        cordova.plugins.backgroundMode.setEnabled(true);
            });
      this.fireAuth.auth.onAuthStateChanged(user => {
        if (user) {
          this.router.navigate(['/tabs/tab2']);
        } else {
          this.router.navigate(['/slider']);
          this.splashScreen.hide();
        }
      });
      this.statusBar.styleDefault();
      this.foregroundService.start('GPS Running', 'Background Service', 'drawable/fsicon');
    });
  }
}

Upvotes: 2

Views: 2281

Answers (1)

manaschopra98
manaschopra98

Reputation: 101

Add BackgroundMode and ForegroundService to your list of providers in app.module.ts

import { ForegroundService } from '@ionic-native/foreground-service/ngx';
import { BackgroundMode } from '@ionic-native/background-mode/ngx';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    BackgroundMode,
    ForegroundService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Also, you need to add the following code to config.xml file

<platform name="android">
    .
    .
    .
    <config-file parent="/*" target="AndroidManifest.xml">
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    </config-file>
</platform>

Upvotes: 1

Related Questions