I'm creating a PWA with JavaScript and shake.js
First I allow DeviceMotion by clicking the button. Then when the phone detects a shake event, it will pick a random item from an array and display it.
I wanted to add a vibration when an item is displayed on the screen as feedback for the user.
I'm testing the app on my iPhone XR in a Chrome browser, but the vibration doesn't seem to work. Does iOS support the vibration API?
window.onload = function () {
var myShakeEvent = new Shake({
threshold: 15
});
const activities = [
"Watch a movie",
"Play cards",
"Bake a dessert",
"Have a picnic",
"Have a photo competition",
"Go jog with friends",
"Climb a mountain",
"Try out a new cuisine you never had before"
];
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur() {
const random = Math.floor(Math.random() * activities.length);
deviceMotion.innerHTML = activities[random];
deviceMotion.style = "font-size: 20px; margin-top: 20px; color: blue"
alert.innerHTML = "Shake again for a new activity suggestion!";
window.navigator.vibrate(200);
}
}
var deviceMotion = document.getElementById('deviceMotion');
var alert = document.getElementById('alert');
function permission () {
if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
// (optional) Do something before API request prompt.
DeviceMotionEvent.requestPermission()
.then( response => {
// (optional) Do something after API prompt dismissed.
if ( response == "granted" ) {
window.addEventListener( "devicemotion", (e) => {
})
}
deviceMotion.innerHTML = "Shake your phone!"
})
.catch( console.error )
} else {
alert( "DeviceMotionEvent is not defined" );
}
}
const btn = document.getElementById( "request" );
btn.addEventListener( "click", permission );<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="theme-color" content="#252A5C">
<link rel="stylesheet"href="src/styles.css">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="img/logo192.png">
<script src="node_modules/shake.js/shake.js"></script>
<title>Device Motion</title>
</head>
<body>
<button id="request">Allow Device Motion Tracking</button><br><br>
<div id="deviceMotion">Device Motion not allowed yet</div><br><br>
<div id="alert"></div>
<script src="src/main.js"></script>
</body>
</html>