2

Goal

I would like to access the current battery status in an Ionic 4 / Angular + Cordova application.

What I have tried

I followed the instruction https://ionicframework.com/docs/native/battery-status on a clean blank Ionic 4 app.

app.module.ts

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 { BatteryStatus } from '@ionic-native/battery-status/ngx';

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

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

home.page.ts

import { Component } from '@angular/core';
import { BatteryStatus } from '@ionic-native/battery-status/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(private batteryStatus: BatteryStatus) {
    // watch change in battery status
    const subscription = this.batteryStatus.onChange().subscribe(status => {
      console.log(status.level, status.isPlugged);
    });
  }
}

The Problem

Sadly I always get the following error, anyone an idea what I'm doing wrong?

Error

ERROR TypeError: Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at new HomePage (home.page.ts:12)
    at createClass (core.js:22150)
    at createDirectiveInstance (core.js:22029)
    at createViewNodes (core.js:23255)
    at createRootView (core.js:23169)
    at callWithDebugContext (core.js:24177)
JilReg
  • 382
  • 1
  • 3
  • 16

2 Answers2

0

The code looks correct.

Probably what you are experiencing is that the Battery Status API is obsolete.

I think that basically it was abused by tracking tools as it could easily be combined with other techniques to digitally fingerprint a user:

Obsolete

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

rtpHarry
  • 13,019
  • 4
  • 43
  • 64
0

@rtpHarry

Thank you for your reply! But I think something else is causing this problem.

From my understanding, only the web integration of the cordova-plugin-battery-status is using the obsolete API you mentioned. And the iOS and Android implementation should use native connection to iOS or Android.

Regarding the obsolete Battery Status API - Web APIs | MDN, it is actually, at least right now, working on Chrome, Android Webview and Chrome for Android.

If I just wanted to implement the battery status for Android, this is working for me:

    let windowNavigator: any;
    windowNavigator = window.navigator;
    windowNavigator.getBattery().then(battery => {
      console.log(battery.level);
      battery.addEventListener('levelchange', function() {
        console.log(this.level);
      });
    });

But I would like to use the plugin, rather than the obsolete Battery Status API. So if anyone has an idea what cases the error 

Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)

I would love to hear it.

JilReg
  • 382
  • 1
  • 3
  • 16