How to use cordova plugin BackgroundMode in Ionic 2 with TypeScript?

Ionic Framework ionic-v3
1

I have a noob question … I feel as helpless as a newborn right now lol.

In my Ionic 2 app (TypeScript), I want to use BackgroundMode plugin:
https://github.com/katzer/cordova-plugin-background-mode.
I read the README, I did the installation as described.

Under Usage it says that the plugin can be used like this:

cordova.plugins.backgroundMode.enable();

In my IDE (Atom), when I type that, it says it can’t find cordova.

I googled a lot about cordova plugins and Ionic 2 and in some cases they use
navigator.somePlugin.someFunction() (the window.navigator object if I understand correctly) but that also doesn’t work for me. I did a console.log in my app and chrome device inspector shows this:

JSON.stringify(window.navigator, null, 2)
{
  "app": {},
  "camera": {
    "DestinationType": {
      "DATA_URL": 0,
      "FILE_URI": 1,
      "NATIVE_URI": 2
    },
    "EncodingType": {
      "JPEG": 0,
      "PNG": 1
    },
    "MediaType": {
      "PICTURE": 0,
      "VIDEO": 1,
      "ALLMEDIA": 2
    },
    "PictureSourceType": {
      "PHOTOLIBRARY": 0,
      "CAMERA": 1,
      "SAVEDPHOTOALBUM": 2
    },
    "PopoverArrowDirection": {
      "ARROW_UP": 1,
      "ARROW_DOWN": 2,
      "ARROW_LEFT": 4,
      "ARROW_RIGHT": 8,
      "ARROW_ANY": 15
    },
    "Direction": {
      "BACK": 0,
      "FRONT": 1
    }
  },
  "splashscreen": {}
}

My question is:

How can I make use of the BackgroundMode plugin in ionic 2 TS? I don’t even know how to include it into my project …

2

I really need your help on this one :worried: It can’t be that hard for ionic 2 pros, can it? :slight_smile:

3

I just added it with ionic plugin add cordova-plugin-background-mode

In the code I then add this after the imports:

declare var cordova:any;

and use this:

platform.ready().then(
    () => {
        console.log("MyApp::constructor platform.ready");
        cordova.plugins.backgroundMode.setDefaults({ 
            title: 'My App Name', 
            text: 'Active in background...');
        cordova.plugins.backgroundMode.enable();
    }
);
1 Like
4

Thank you very much for your reply, this works (and I would’ve never guessed the solution grrrr).

To me this seems a little bit like magic. Could you please explain what declare var does and how come cordova is set to anything when I use your code?

5

The declare var as far as I can tell, only tell the Typescript compiler that that variable exists. The :any means it can contain anything, and the compiler should not complain over it or accessing any functions in them.

You’ll often have to do the same for the window object.

Ideally the plugin’s member functions should be declared in the typings directory, but I have no idea how to do that.

The reason cordova is set to anything here, is that in the plugin’s config.xml you’ll find the following

<!-- js -->
<js-module src="www/background-mode.js" name="BackgroundMode">
    <clobbers target="cordova.plugins.backgroundMode" />
    <clobbers target="plugin.backgroundMode" />
</js-module>

telling the plugin manager where to add the functions the plugin provides. clobbers means deleting the path before writing the new data. Merges would just add them to an existing path.

Warning, unrelated to this, but most important to TS.

IF you call a function, passing a class function as a callback parameter, that function will NOT be able to access the parent classes variables or functions as it’ll run inside a separate scope.

Renaming the function from

private functionName(parameters) {

to

private functionName = (parameters) => {

will solve that problem as the function can now read it’s parent’s variables.

1 Like
6

Hi,

I am struggling to get this to work despite following your hints here.

I get : Cannot find module ‘cordova-plugin-background-mode’. when I try to import it an if I don’t import I get undefined objects in the browser.

What should I add as an import?
Are the browser errors due to using the view, i.e would i not get them in the app on a device?

Thanks, peter.

7

ok, I’m starting out, so please forgive me. I found the solution to help get started here:

8

Hello , also this solution not work with me .
i added plugin
implement your code , but not work .

9

AGrandt, How can I update text or title while app is in background ?? please help I’m stuck in it

I’m doing like this:

that.platform.ready().then(() => {
    this.task = setInterval(() => {
      navigator.geolocation.getCurrentPosition(function (position) {
        that.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + ',' + position.coords.longitude + '&key=AIzaSyCnFxcopJ1KvuCfnz2mHgUiZmmKd3eidEE').map(res => res.json()).subscribe(data => {
          that.myPos = data.results[0].address_components[1]['long_name'];
        });
      
        that.backgroundMode.setDefaults({ 
          
          title: 'My App Name', 
          text: 'Lat: '+position.coords.latitude+'  Long'+position.coords.longitude+''
        });
        that.backgroundMode.enable();
      });

      
    }, 7000);
  });
2 Likes