Capacitor Motion Plugin Example / Capacitor Plugin Future

[ion-dev]

Please describe the quesHi all,

I was wondering if anybody played with the the official Capacitor Motion Plugin (v2) yet?

URL: https://capacitorjs.com/docs/apis/motion

I was trying to get it to run, but cannot figure it out.

The recommended way of requesting permissions fails on the web:

 try {
  await DeviceMotionEvent.requestPermission()
 } catch (e) {
   console.log(e)
   return;
 }

TypeError: DeviceMotionEvent.requestPermission is not a function

If I just add the listener and return the event then I get all Acceleration Information to be null:

{
	{
		acceleration: DeviceMotionEventAcceleration
		x: null
		y: null
		z: null
		__proto__: DeviceMotionEventAcceleration
	}, {
		accelerationIncludingGravity: DeviceMotionEventAcceleration
		x: null
		y: null
		z: null
		__proto__: DeviceMotionEventAcceleration
	}
}

Not sure if this is because it is on the web (via ionic serve), but the plugin should work on web, android, iOS. Should I not get readings back from the sensors?

If I run my code native on Android, then the request permission also does not work, and I do not even get the event from the Motion plugin back.

Question:

• Does anybody have any pointers/links to tutorials, github repos, etc. that have a working example of that plugin?
• Has anybody worked with this plugin across PWA, android, iOS and can confirm that it actually works in v2/v3 beta?
• Is there another capacitor kitchen sink repo, because the official one seems to be dead: https://github.com/ionic-team/capacitor-plugin-demo

General questions for the Ionic team:

• With capacitor now in v3 beta, should we still start projects with v2?
• What is going to happen to ionic native long term? Are you maintaining the long existing list of ionic native plugins or will efforts be shifted to grow capacitor? (Apologies if I have missed a blog article on that in the past.)

Any help would be very much welcome.

Thanks.

[ion-dev]

Hi all,

Just wondering if anybody has some ideas around this please. This forum unfortunately seems “pretty quite” - does anybody else have ideas for community support?

Thanks.

[ion-dev]

Hi all,

Apologies for bumping this up. I was hoping to get a response to these two very general questions at least, if possible?

• Does anybody have any pointers/links to working tutorials, github repos, etc. that have a working example of that plugin?
• Has anybody worked with this plugin across PWA, android, iOS and can confirm that it actually works in v2/v3 beta?

Also, I searched online, and all I could find is people having problems with the plugin, either not supported on iOS 13+ or not running at all, forcing them to switch back to cordova plugins: Ionic 5 + Angular + Capacitor + Motion not triggering listener on real Android devices - Stack Overflow

Thanks again.

[jcesarmobile]

You only have to request the permission on iOS 13+, so first check if DeviceMotionEvent.requestPermission is defined, and if not, don’t try to request the permission because it’s not needed and won’t work.

[ion-dev]

Thanks very much @jcesarmobile - much appreciated.

Have you worked with the plugin successfully. I eventually was able to use it on android and iOS native builds, but PWA did not work for me.

Thanks

[piaranda]

Hey , I’m having the exact problem you have with capacitor motion plugin in version 3,have you found out something?

I tried controlling request permission not found exception (on Android), and even then, adding Motion.addlistener returns ok (no catch code being executed) but no event is fired…

I’m starting to get really disappointed with this platform, as I’m having very bad heading measures from background geolocation plugin as well, compared with cordova plugin for this (but at least works, adding the corresponding permissions to Android manifest)…

[IonicGeoff]

Knock Knock - is anybody home?

The documentation for Capacitor Motion is abysmal !

The example code doesn’t work …

await DeviceMotionEvent.requestPermission();
// returns an error in VS Code - the function doesn’t exist - as reported many times

The “orientation” option returns alpha, beta, and gamma - but there is no explanation what these values represent?

Values are returned on an Android device running a PWA, but nothing appears on an iphone running as a PWA.

If anyone knows of a working example can they please point me towards it?

[thomasvidas]

The Motion plugin largely integrates with, the devicemotion event listener, the deviceorientation event listener window.DeviceMotionEvent object. Realistically, you could just use those APIs if the plugin implementation isn’t working as you expect.

We explicitly link out to the DeviceMotionEvent docs that explain what the alpha, beta, and gamma coordinates mean since MDN is an excellent resource.

[IonicGeoff]

Thanks Thomas,

I read those documents to learn that the motion plugin is virtually incompatible with Safari, which would have saved me some time.

The example code supplied on the Capacitor page doesn’t work with Ionic, so that also wastes time.

I used Ionic because it is meant to save me time. There are web based compass examples that do appear to work, but I am not knowledgeable enough to know how to implement that code within Ionic.

[Loiic]

Hello @ion-dev,

Did you find a fix or an alternative solution for this issue?

Regards,
Loïc

[julio-ionic]

You can check the Motion page on our capacitor-testapp repository, it’s react based, but should be similar on any framework.

ionic-team/capacitor-testapp/blob/c3e2eb93492d1167594341bd01e253c0da9ad614/src/pages/Motion.tsx

Since on iOS 13+ you have to request permissions, you have to check DeviceOrientationEvent !== undefined && typeof DeviceOrientationEvent.requestPermission === 'function' and show some button to request permissions if that returns true (should return true on iOS 13+ only).

[Loiic]

Hello @julio-ionic,

Thanks for your reply!

in fact, it was precisely a problem with the function that allows me to request permissions. So the following code returned an error:

CODE:

if( DeviceOrientationEvent !== undefined && typeof DeviceOrientationEvent.requestPermission === 'function' ) {…}

ERROR:

=> Property 'requestPermission' does not exist on type '{ new (type: string, eventInitDict?: DeviceOrientationEventInit): DeviceOrientationEvent; prototype: DeviceOrientationEvent; }'.ts(2339)

I tried without this function and it works fine on my side but, I suppose I have to ask the permission to the user.

Regards,
Loïc

[julio-ionic]

Well, that’s typescript complaining about a web API that it doesn’t understand, might be a configuration thing on your side or a bug on some typing file.

You can always cast to any to get rid of those kind of issues, something like (DeviceMotionEvent as any).requestPermission

[Loiic]

Hello @julio-ionic,

Yes this is exactly what I did and with this workaround, it works fine. It seems to work also with array.

So to sum up:

❌ DeviceOrientationEvent.requestPermission()
✅ (DeviceOrientationEvent as any).requestPermission()
✅ DeviceOrientationEvent['requestPermission']()

However, this plugin works on native devices (not with the live reload mode without SSL) but I don’t get the prompt that ask me to accept or reject the permission. I don’t know if this is the normal behavior. I suppose, not.

Given that it’s a fresh blank install of Ionic, I don’t think this is an issue in my code since there is nothing but this plugin with the basic configuration. I saw that other people have a similar problem. So I guess it’s a problem in the plugin code or in the Typescript checker of Visual Studio Code (which is the software I use).

Thanks for your help
Loïc

[julio-ionic]

But do you get granter or rejected on the requestPermission call?
Do you get the motion data?
Depending on the iOS version it will prompt every time you call requestPermission or will just ask the first time you call requestPermission and remember for the following calls.

[Loiic]

1. I actually didn’t have the requestPermission dialog. I tried to uninstall the app and re-install it to try to show this prompt message but nothing. Maybe Should I have to define something in the info.plist or something else?
2. Yes I get the motion data.

[julio-ionic]

On iOS 15+ it automatically grants permission without prompting (because of this capacitor code capacitor/WebViewDelegationHandler.swift at d4047cfa947676777f400389a8d65defae140b45 · ionic-team/capacitor · GitHub), but you still have to call requestPermission or the listeners won’t work.
On iOS 13 and 14 will prompt because that code is only available for iOS 15+.

I thought it would still request the permission once, but that’s for getUserMedia permissions, not for motion. (we have this similar code for getUserMedia to prevent from prompting for permissions every time the user wants to use it capacitor/WebViewDelegationHandler.swift at d4047cfa947676777f400389a8d65defae140b45 · ionic-team/capacitor · GitHub)

[Loiic]

Ok thank you for the information