I am trying to make run a background mode with Ionic, but when I am playing a song, and I enabled the Backgound Mode, the app crashes.
Actually, is posible make the background mode with Ionic?
This is my code:
import { Component } from '#angular/core';
import {NavController} from '#ionic/angular';
import {NativeAudio} from '#ionic-native/native-audio/ngx';
import {BackgroundMode} from '#ionic-native/background-mode/ngx';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public navCtrl: NavController,
public nativeAudio: NativeAudio ,
public backgroundMode: BackgroundMode) {
this.nativeAudio.preloadSimple('audio1', 'assets/audio1.mp3').then((msg) => {
console.log('message: ' + msg);
}, (error) => {
console.log('error: ' + error);
});
}
public playAudio(){
this.backgroundMode.enable();
this.backgroundMode.on('activate').subscribe(() => {
this.nativeAudio.play('audio1');
});
this.nativeAudio.play('audio1', () => console.log('audio1 is done playing'));
}
}
This is my current config.
/bg-mode-example$ ionic info
Ionic:
Ionic CLI : 6.11.11 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.3.5
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)
Utility:
cordova-res (update available: 0.15.1) : 0.6.0
native-run (update available: 1.2.1) : 0.2.8
System:
Android SDK Tools : 26.1.1 (/home/gabriel/Android/Sdk)
NodeJS : v10.19.0 (/usr/bin/node)
npm : 6.14.8
OS : Linux 5.4
Addionationally, I have a gitlab repo https://gitlab.com/gabrielrincon/bgmode-testing/
What is wrong?
Thanks very much.
I can make it.
The problem is a permission. The FOREGROUND_SERVICE.
I add to platforms/android/app/src/main/AndroidManifest.xml and work
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
I hope that it help you
Related
My project is running.it is code working.I was use admob-free npm plugin then show the error on android build time.i was user firebase notification.I show all list of plugin and ionic info.
Show Error
ERROR in ./src/app/service/admobfree.service.ts Module build failed
(from ./node_modules/#ngtools/webpack/src/index.js): Error: E:\git
Live Project\service
app\Service-User-App-\src\app\service\admobfree.service.ts is missing
from the TypeScript compilation. Please make sure it is in your
tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (E:\git Live Project\service
app\Service-User-App-\node_modules#ngtools\webpack\src\angular_compiler_plugin.js:938:23)
at E:\git Live Project\service app\Service-User-App-\node_modules#ngtools\webpack\src\loader.js:42:31
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5) # ./src/app/app.module.ts
29:0-63 56:12-28 # ./src/main.ts # multi ./src/main.ts [ERROR] An
error occurred while running subprocess ng.
ng.cmd run app:ionic-cordova-build:production --platform=android exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
My ionic Info
Ionic:
Ionic CLI : 6.19.0 (C:\Users\abc\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 5.5.2
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.15.4
native-run : 1.5.0
System:
Android SDK Tools : 26.1.1 (D:\androidsdk\Sdk)
NodeJS : v16.15.0 (C:\Program Files\nodejs\node.exe)
npm : 8.5.5
OS : Windows 10
My plugin Info
cordova-admob-sdk 0.24.1 "AdMob SDK"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-admob-free 0.27.0 "Cordova AdMob Plugin"
cordova-plugin-androidx-adapter 1.1.3 "cordova-plugin-androidx-adapter"
cordova-plugin-androidx 3.0.0 "cordova-plugin-androidx"
cordova-plugin-app-version 0.1.12 "AppVersion"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-firebasex 11.0.3 "Google Firebase Plugin"
cordova-plugin-geolocation 4.1.0 "Geolocation"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-nativegeocoder 3.4.1 "NativeGeocoder"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-x-socialsharing 6.0.2 "SocialSharing"
cordova-promise-polyfill 0.0.2 "cordova-promise-polyfill"
es6-promise-plugin 4.2.2 "Promise"
my service pagecode( admobfree.service.ts)
import { Injectable } from '#angular/core';
import {
AdMobFree,
AdMobFreeBannerConfig,
AdMobFreeInterstitialConfig,
} from '#ionic-native/admob-free/ngx';
import { Platform } from '#ionic/angular';
#Injectable({
providedIn: 'root'
})
export class AdmobfreeService {
interstitialConfig: AdMobFreeInterstitialConfig = {
isTesting: true, // Remove in production
autoShow: false,
id: "ca-app-pub-3940256099942544/1033173712"
};
constructor(private admobFree: AdMobFree,public platform: Platform) {
platform.ready().then(() => {
this.admobFree.interstitial.config(this.interstitialConfig);
this.admobFree.interstitial.prepare()
.then(() => { }).catch(e => alert(e));
});
this.admobFree.on('admob.interstitial.events.CLOSE').subscribe(() => {
this.admobFree.interstitial.prepare()
.then(() => {}).catch(e => alert(e));
});
}
showBannerAd() {
let bannerConfig: AdMobFreeBannerConfig = {
isTesting: true, // Remove in production
autoShow: true,
bannerAtTop: false,
id: "ca-app-pub-3940256099942544/6300978111"
};
this.admobFree.banner.config(bannerConfig);
this.admobFree.banner.prepare().then(() => {
// success
}).catch(e => alert(e));
}
showInterstitialAd() {
this.admobFree.interstitial.isReady().then(() => {
this.admobFree.interstitial.show().then(() => {
})
.catch(e =>alert("show "+e));
})
.catch(e =>alert("isReady "+e));
}
}
i'm using this code in my app.component.ts to handle hardware back button :
this.platform.backButton.subscribeWithPriority(10, (processNextHandler) => {
console.log('Back press handler!');
if (this.location.isCurrentPathEqualTo('/home')) {
// Show Exit Alert!
console.log('Show Exit Alert!');
this.showExitConfirm();
processNextHandler();
} else {
// Navigate to back page
console.log('Navigate to back page');
this.router.navigateByUrl['/home'];
this.location.back();
}
});
but it's not working it works only when lunch the app for the first time,later when I press back button the app closes ,I've tried many solutions but none of them works , both on simulator and real device with different versions of android (8,9,10) and same behaviour
my ionic info :
Ionic CLI : 5.4.16
Ionic Framework : #ionic/angular 5.6.13
#angular-devkit/build-angular : 0.803.29
#angular-devkit/schematics : 8.3.29
#angular/cli : 8.3.29
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)
Utility:
cordova-res : 0.15.1
native-run : 1.4.0
System:
Android SDK Tools : 26.1.1 ()
NodeJS : v12.16.1 ()
npm : 6.13.4
OS : Windows 10
This is my Working Code here
this.plt.backButton.subscribeWithPriority(5, () => {
console.log("Back button Clicked")
var backRoute = this.prevRoute.getPreviousUrl();
if (this.auth.isAuthenticated.value && backRoute == '/login') {
navigator['app'].exitApp();
} else {
this.router.navigateByUrl(backRoute)
}
})
the same code works for me , the issue was in ionViewWillLeave() function , when I remove it , the code works
I have an issue with an ionic app and branch SDK, at test ENV everything works as expected but users' in PROD crash continuously.
As stated in the branch docs I have initialized branch on platform ready event at app.component.ts:
app.component.ts
import { Component } from "#angular/core";
import { Platform } from "ionic-angular";
import { StatusBar, Splashscreen } from "ionic-native";
import { TabsPage } from "../pages/tabs/tabs";
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
branchInit();
});
platform.resume.subscribe(() => {
branchInit();
});
// Branch initialization
const branchInit = () => {
// only on devices
if (!platform.is("cordova")) {
return;
}
const Branch = window["Branch"];
Branch.initSession().then(data => {
if (data["+clicked_branch_link"]) {
// read deep link data on click
alert("Deep Link Data: " + JSON.stringify(data));
}
});
};
}
}
The error is as follows:
Unable to instantiate receiver io.branch.referral.InstallListener: java.lang.ClassNotFoundException: Didn't find class "io.branch.referral.InstallListener"
Here's my ionic info
Ionic:
Ionic CLI : 5.4.15 (/Users/path/.nvm/versions/node/v9.6.0/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.11.5
#angular-devkit/build-angular : 0.12.4
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.2.4
#ionic/angular-toolkit : 1.3.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 30 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 0.3.0) : 0.2.7
System:
Android SDK Tools : 26.1.1 (/Users/path/Library/Android/sdk)
NodeJS : v9.6.0 (/Users/path/.nvm/versions/node/v9.6.0/bin/node)
npm : 2.15.12
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61
I didn't find good documentation about the issue and I am not sure if removing the library will result in not getting the install referrer, but after some investigation, I decided to remove these lines from AndroidManifest.xml
<receiver android:name="io.branch.referral.InstallListener" android:exported="true">
<intent-filter>
<action android:name="com.android.vending.INSTALL_REFERRER" />
</intent-filter>
</receiver>
The following link talks about a communication sent by branch and outdated documentation and makes allusion to the above solution.
https://github.com/BranchMetrics/unity-branch-deep-linking-attribution/issues/171
I think it can be fixed with switching to new Install referrer. Because this crash started from builds that have been released in March, and it tells that from March 1, 2020 it's deprecated: https://android-developers.googleblog.com/2019/11/still-using-installbroadcast-switch-to.html
I'm having difficulties with getting GeoLocation working in Ionic 3. I've
looked at several tutorials and run into the same problem with all of them.
Here is my setup.
PS C:\> ionic info
cli packages: (C:\Users\myID\AppData\Roaming\npm\node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 8.1.2 (cordova-lib#8.1.1)
local packages:
#ionic/app-scripts : 3.1.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.10.0
npm : 5.6.0
OS : Windows 10
PS C:\>
PS C:\>
PS C:\>
PS C:\> ionic cordova plugin list
> cordova plugin ls
v Running command - done!
cordova-plugin-geolocation 4.0.1 "Geolocation"
PS C:\>
PS C:\>
PS C:\>
In setting up a hello-world / blank geo location app, I get errors referencing the
GeoLocation plugin.
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // <-- Errors here
]
I can get around this error by adding the ngx suffix:
// app.module.ts
import { Geolocation } from '#ionic-native/geolocation/ngx';
// ...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Geolocation // OK now
]
However, when I actually go to use it:
//home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation/ngx';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
lat: any;
lng: any;
constructor(public navCtrl: NavController,
public geo: Geolocation) {
}
ionViewDidLoad() {
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));
}
}
I start getting this error:
TypeError: Object(...) is not a function at Geolocation.getCurrentPosition
Commenting out the call to getCurrentPosition makes the error go away.
What have I missed? Have I got the wrong version of the plugin? Is there a way
to know which one works with the last version of Ionic 3?
Did you install the Geolocation plugin v3? As you can see here, the command is:
$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
$ npm install --save #ionic-native/geolocation#4
After installing it, you have to import the plugin into app.module as well into your home.ts
import { Geolocation } from '#ionic-native/geolocation';
The code to use the plugin is right, so you don't need to change it.
this.geo.getCurrentPosition().then(pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch(err => console.log(err));
I'm working on an Ionic project based on geolocation and after testing my App on four real devices, I distinguished three different behaviors:
1) Android 4.x ( J1 Samsung) => works Correctly
2) Android 5.0.1 => The first time I install the App all works as expected but when I disable GPS and enable it again, the geolocation returns a position which is far about 1Km of my position and it still bugged until I restart the Phone and then it works correctly again until I restart GPS.
3) Android 5.1 => Same scenario of the Android 5.0.1 but after turning GPS OFF and enabling it again, the geolocation still returning an error "timeout" until I restart the Phone.
Please, I have to know if there is no solution or I can continue with this plugin?
Home.ts:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation';
declare const google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController,
private platform:Platform,
private geolocation:Geolocation) {
}
ionViewDidLoad(){
new Promise(resolve => {
setTimeout(() => {
this.initMap();
resolve();
},2000);
})
.then(()=>{
setTimeout(() => {
this.getGeolocation();
},2000);
});
}
initMap() {
// map implementation
}
getGeolocation(){
this.platform.ready().then(() => {
alert('start geolocation');
var options = {
timeout: 20000,
enableHighAccuracy:true,
};
this.geolocation.getCurrentPosition(options).then(resp => {
alert('done');
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
let origin = new google.maps.LatLng( resp.coords.latitude,resp.coords.longitude);
this.addMarker(origin);
this.map.setCenter(origin);
}).catch((error) => {
this.debugError(error);
alert('error geoloc');
});
});
}
addMarker(location) {
//addMarker implementation
}
debugError(object){
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.log(output);
}
}
ionic info:
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME : xxx
Misc:
backend : pro
cli packages: (/usr/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.9.4
npm : 5.7.1
OS : Linux 4.13
Environment Variables:
ANDROID_HOME: xxx/Sdk
Misc:
backend: pro