✨ (wake lock) ask for permission to lock the screen

src/hooks/useTimer.ts

@@ -2,6 +2,7 @@ import { ref, computed, watch } from '@vue/composition-api'
 import { StopwatchState } from '@/types/StopwatchState'
 import { notify } from '@/utils/notification'
 import { useInterval } from './useInterval'
+import { useWakeLock } from './useWakeLock'
 
 const format = (num: number) => {
   return num.toString().padStart(2, '0')
@@ -15,6 +16,8 @@ const formatSeconds = (seconds: number) => {
 }
 
 export const useTimer = () => {
+  const { askWakeLockPermission, releaseWakeLock } = useWakeLock()
+
   const timeState = ref<StopwatchState>('stopped')
   const seconds = ref(0)
   const { interval } = useInterval()
@@ -33,6 +36,7 @@ export const useTimer = () => {
   })
 
   const start = () => {
+    askWakeLockPermission()
     timeState.value = 'started'
 
     stopwatchId = setInterval(() => {
@@ -56,6 +60,7 @@ export const useTimer = () => {
   }
 
   const pause = () => {
+    releaseWakeLock()
     timeState.value = 'stopped'
     if (stopwatchId) {
       clearInterval(stopwatchId)

src/hooks/useWakeLock.ts

@@ -0,0 +1,40 @@
+interface WakeLock {
+  request(type: string): Promise<WakeLockSentinel>
+}
+
+type WakeLockType = 'screen' | null
+
+interface WakeLockSentinel {
+  release(): Promise<void>
+  readonly WakeLocktype: WakeLockType
+}
+
+interface NavigatorExtended extends Navigator {
+  readonly wakeLock: WakeLock
+}
+
+export const useWakeLock = () => {
+  let wakeLock: WakeLockSentinel | null = null
+
+  const askWakeLockPermission = async () => {
+    if (!('wakeLock' in navigator)) {
+      return
+    }
+
+    try {
+      wakeLock = await (navigator as NavigatorExtended).wakeLock.request(
+        'screen'
+      )
+    } catch (err) {
+      console.error(`${err.name}, ${err.message}`)
+    }
+  }
+  const releaseWakeLock = () => {
+    wakeLock?.release()
+  }
+
+  return {
+    askWakeLockPermission,
+    releaseWakeLock
+  }
+}