onShake() not firing on iOS

[dmazzola]

I have used this code for my University classes for the past few years. This weekend, I have recompiled and tested Android 5.1.1 on Samsung Galaxy and iOS 10.3.3 (iPhone 6) and iOS 11.1.2 on an iPad Air.

onShake doesn't fire on either iOS device. Works fine on Android. Using build.phonegap.com with the following key items from index.xml:

`   <plugin name="cordova-plugin-shake"                         spec="0.6.0" />
    <plugin name="cordova-plugin-device-motion"                 spec="2.0.0" />
    <plugin name="cordova-plugin-statusbar"                     spec="2.3.0" />
    <plugin name="cordova-plugin-whitelist"                     spec="1.2.2" />

    <preference name = "phonegap-version"                value = "cli-6.5.0" />`

I have also tested with cli-6.4.0 cli-6.3.1 and I observe no change (works on android, not iOS)

The index.js code is:

`"use strict;"

/*===========================*/
/* put global variables here */
/*===========================*/

var bodyNode;		// body node in the DOM tree to set the background color
var buttonNode;		// listen for clicks (web) and touches (mobile)
var shakeNode;		// if mobiel, show user shaking is an option
var labelNode;		// the element in the DOM we will set to "rgb(10,23,45);"

/* wait until all phonegap/cordova is loaded then call onDeviceReady*/
document.addEventListener("deviceready", onDeviceReady, false);

/*====================*/
/* put functions here */
/*====================*/

function onDeviceReady(){

	bodyNode 			= document.getElementById('bodyElement');
	buttonNode			= document.getElementById('buttonElement');
	shakeNode			= document.getElementById('shakeElement');
	rgbNode 			= document.getElementById('rgbElement');

	buttonNode.onclick 	= changeColor; // for browser mouse clicks

	// on webapp, shake will be undefined, but it will be on mobile...
	// https://github.com/leecrossley/cordova-plugin-shake
	// place <plugin name="cordova-plugin-shake"/> in config.xml

	if (typeof shake !== 'undefined') {
		// watch for device shaking, if we hit the unit threshold, call onShake
		shakeNode.innerHTML = "or you can shake me!"
		shake.startWatch(onShake, 30, onShakeError);
	}

	changeColor();	

}

var onShake = function() {
	alert("onShake event");
	changeColor();
}

var onShakeError = function() {
	alert("onShakeError occurred");
}

function changeColor() {
	var r = randomColorComponent();
	var g = randomColorComponent();
	var b = randomColorComponent();

	var rgbString = "rgb(" + r + "," + g + "," + b + ")";

	rgbNode.innerHTML = rgbString;
	bodyNode.style.backgroundColor = rgbString;
}

function randomColorComponent() {
	return Math.floor(Math.random() * 256); //make a random int from 0 - 255
}
`

onDeviceReady() is being called as this line is functioning shakeNode.innerHTML = "or you can shake me!" Developer debugging via safari and USB cable shows:

• No console warnings or errors
• No CSP warnings or errors.
• shake is defined
• calling onShake() works in the debugger console (alert is called, color changes).

clicking the "press me" button calls changeColor() and color changes See below

Questions

1. What am I missing? This is working on my Android device.
2. Is there some debugging tips I can try?
3. Do I need the cordova-plugin-device-motion ?

(oh, and the phonegap build logs are clean too)

[Ritzlgrmft]

Have a look at https://github.com/Ritzlgrmft/ionic-feedback-sample. This is a app built with Cordova using the shake event. I just checked, it is working with different iOS devices.

BTW: for iOS, you do not need the device-motion plugin, since the latest version of the shake-plugin relies on the native shake implementation of iOS.