iOS支持震动吗？
[英]Does iOS support vibration?
问题描述
I'm creating a PWA with JavaScript and shake.js
我正在使用 JavaScript 和 shake.js 创建一个 PWA
First I allow DeviceMotion by clicking the button.首先，我通过单击按钮允许 DeviceMotion。 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.我正在 iPhone XR 上的 Chrome 浏览器中测试该应用程序，但振动似乎不起作用。 Does iOS support the vibration API? 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>
1 个解决方案
解决方案1
1 2022-03-30 12:06:41
Since you're using javascript to build your app, you can integrate with capacitor which is pretty good to use native resources.由于您正在使用 javascript 来构建您的应用程序，因此您可以与电容器集成，这对于使用本机资源非常有用。 In your case you can use the Haptics Capacitor Plugin .在您的情况下，您可以使用Haptics Capacitor Plugin 。 And it's compatible with iOS并且兼容iOS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.