I have Cordova-Angular project (not Ionic), with ionic-webview. I’m trying to use cordova-geolocation plugin to get current-location and device-orientation (compass heading) with a “location.service” I created.
Im using:
- @angular/cli 7.3.9
- cordova-lib@9.0.1
- platforms:
- android 8.1.0
- ios 5.1.1
- plugins (shorten):
- cordova-plugin-ionic-webview 4.1.1 “cordova-plugin-ionic-webview”
- cordova-plugin-geolocation 4.0.2 “Geolocation”
- platforms:
It used to work both on android and ios, now on ios, I get the location, but with an error for device orientation.
[blocked] Access to geolocation was blocked over insecure connection to ionic://localhost.
Geolocation PositionError {code: 1, message: “Origin does not have permission to use GeolocThis text will be blurredation service”
in my *.plist file:
My location.service:
import {Injectable} from '@angular/core';
import {BehaviorSubject, combineLatest, fromEvent, Observable, of, timer} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {map, switchMap} from 'rxjs/operators';
import { Globals } from '../globals';
export interface DefiLocation {
accuracy: number;
altitude: number;
altitudeAccuracy: number;
heading: number;
latitude: number;
longitude: number;
speed: number;
compass: number;
}
@Injectable({
providedIn: 'root'
})
export class LocationService {
errorMessage$: string;
currentLocation$: BehaviorSubject<{
accuracy?: number,
altitude: number,
altitudeAccuracy: number,
heading: number,
latitude: number,
longitude: number,
speed: number
}> = new BehaviorSubject({
accuracy: 0,
altitude: 0,
altitudeAccuracy: 0,
heading: 0,
latitude: 32.5,
longitude: 35,
speed: 0,
});
currentCompass$: BehaviorSubject<number> = new BehaviorSubject(0);
currentCompass: number = 0;
currentPosition: {
accuracy: 0,
altitude: 0,
altitudeAccuracy: 0,
heading: 0,
latitude: 32.5,
longitude: 35,
speed: 0,
};
locationTimer;
sendLocationError: boolean = true;
constructor(public globals: Globals) {
this.isCurrentPosition$.next(true);
this.trackMe();
}
private trackMe() {
if (this.globals.iphone) {
window.addEventListener('deviceorientation', (event) => {
this.currentCompass$.next(Math.round(event['webkitCompassHeading']));
});
// }
} else {
window.addEventListener('deviceorientationabsolute', (event) => {
this.currentCompass$.next(360 - Math.round(event['alpha']));
}, true);
}
if (navigator.geolocation) {
this.locationTimer = timer(0, 100).subscribe(tick => {
navigator.geolocation.getCurrentPosition((position) => {
this.currentLocation$.next(position.coords);
this.isCurrentPosition$.next(true);
this.sendLocationError = true;
}, (err) => {
this.isCurrentPosition$.next(false);
this.sendError(err.message);
console.log(err);
this.errorMessage$ = err.message;
console.log(this.errorMessage$);
}, {
enableHighAccuracy: true
});
});
} else {
alert('Geolocation is not supported by this browser.');
this.sendError('navigator.geolocation = null ("Geolocation is not supported by this browser.")');
}
}
getCurrentLocation$(): Observable<DefiLocation> {
return combineLatest(this.currentCompass$.asObservable(), this.currentLocation$.asObservable())
.pipe(
map(([compass, location]) => {
return {
longitude: location.longitude,
latitude: location.latitude,
accuracy: location.accuracy,
altitude: location.altitude,
altitudeAccuracy: location.altitudeAccuracy,
heading: location.heading,
speed: location.speed,
compass
};
}
));
}
sendError(error) {
if (this.sendLocationError) {
this.sendLocationError = false;
window['cordova'].plugins.firebase.analytics.logEvent('user_location_failed', {param1: error});
setTimeout(function() { this.sendLocationError = true; }, 5000);
}
}
}
### Detailed logs:
When I run cordova build ios , and then run it from Xcode on my iPhone (ios 13.4.1) and check Safari’s develop console:
