JavaScriptとshake.jsを使用してPWAを作成しています

まず、ボタンをクリックしてDeviceMotionを許可します。次に、電話機がシェイクイベントを検出すると、配列からランダムなアイテムを選択して表示します。

ユーザーへのフィードバックとして、画面にアイテムが表示されたときにバイブレーションを追加したかったのです。

ChromeブラウザのiPhoneXRでアプリをテストしていますが、バイブレーションが機能していないようです。iOSはバイブレーション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>
応答

JavaScriptを使用してアプリを構築しているため、ネイティブリソースを使用するのに非常に適したコンデンサーと統合できます。あなたの場合、HapticsCapacitorプラグインを使用できます。そしてそれはiOSと互換性があります