iOS13以降、DeviceMotionEventにアクセスするためにはパーミッション取得が必要 📱

f:id:kimizuka:20201009231253p:plain

実装のたびに調べている気がするので、まとめておきます。

iOS12.2からブラウザから加速度センサの値にアクセスするには、ユーザーからパーミッションを取ることが必須になりました。

iOS12.2では設定アプリからパーミッションを取る形式だったのですが、iOS13では、Safari内でアラートに応える形でパーミッションを取得する必要があります。
アプリを跨がない分、iOS12.2よりもシンプルになりましたが、ユーザーのアクションきっかけでないとパーミッションを取れないため、ウェブサイトにアクセスされると同時に加速度センサにアクセスすることはできなくなりました。

iOS13でのパーミッションの取るためのコードですが、

document.getElementById('btn').addEventListener('click', () => {
  if (window.DeviceMotionEvent && window.DeviceMotionEvent.requestPermission) {
    DeviceMotionEvent.requestPermission()
                     .then((state) => {
                       if (state === 'granted') {
                         // パーミッションを取れた際の処理
                       } else {
                         // パーミッションを取れなかった際の処理
                       }
                     })
                     .catch((err) => console.error(err));
  } else {
    // window.DeviceMotionEvent.requestPermissionが無いブラウザでの処理
  }
});