Skip to content

onShake() not firing on iOS #29

Description

@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

image

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions