Ionic + Capacitor: Motion does not work on device

问题

I have a simple Ionic page that should tap into the Motion plugin of Capacitor and show the orientation of the compass the device.

Works fine in the Chrome dev console but not on the device itself - whether accessing the ionic server og via XCode.

Code comes here:

import {Component} from '@angular/core';
import {MotionOrientationEventResult, PluginListenerHandle, Capacitor} from '@capacitor/core';

const {Motion} = Capacitor.Plugins;

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {
    private orientation: MotionOrientationEventResult;
    private watchListener: PluginListenerHandle;
    private entered = null;
    private alpha = 0;

    constructor() {

        this.watchListener = Motion.addListener(
            'orientation', (values) => {
                console.log('watchListener', values);
                this.orientation = values;
                this.alpha = values.alpha;
            });
    }
}

And package.json here:

{
  "name": "compass",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ionic-serve-c": "ionic serve --devapp --host=192.168.68.101 --ssl",
    "open-ios": "npx cap open ios"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@capacitor/core": "^2.4.1",
    "@capacitor/ios": "^2.4.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "cordova-plugin-device-motion": "^2.0.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@capacitor/cli": "^2.4.1",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project"
}

The whole project can be seen here: https://github.com/bsnizek/compass

Thanx !

回答1:

On iOS 13+ you need to request a permission with DeviceMotionEvent.requestPermission(); before using motion

It's explained on the docs https://capacitorjs.com/docs/apis/motion#permissions

回答2:

Just an idea but maybe there is a capability missing in info.plist under "Required device capabilities" that the plugin uses. https://developer.apple.com/documentation/bundleresources/information_property_list/uirequireddevicecapabilities Maybe: accelerometer or gyroscope.

来源：https://stackoverflow.com/questions/64023715/ionic-capacitor-motion-does-not-work-on-device