fix(useWakeLock): should delay wake lock request if document is hidden (#4055)

kermanx · web-flow · commit 5ca57d070506 · 2024-07-17T12:42:53.000Z
diff --git a/packages/core/useWakeLock/index.md b/packages/core/useWakeLock/index.md
@@ -11,7 +11,11 @@ Reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API
 ```js
 import { useWakeLock } from '@vueuse/core'
 
-const { isSupported, isActive, request, release } = useWakeLock()
+const { isSupported, isActive, forceRequest, request, release } = useWakeLock()
 ```
 
-If `request` is called,` isActive` will be **true**, and if `release` is called, or other tab is displayed, or the window is minimized,`isActive` will be **false**.
+When `request` is called, the wake lock will be requested if the document is visible. Otherwise, the request will be queued until the document becomes visible. If the request is successful, `isActive` will be **true**. Whenever the document is hidden, the `isActive` will be **false**.
+
+When `release` is called, the wake lock will be released. If there is a queued request, it will be canceled.
+
+To request a wake lock immediately, even if the document is hidden, use `forceRequest`. Note that this may throw an error if the document is hidden.
diff --git a/packages/core/useWakeLock/index.test.ts b/packages/core/useWakeLock/index.test.ts
@@ -4,6 +4,26 @@ import { describe, expect, it } from 'vitest'
 import type { WakeLockSentinel } from '.'
 import { useWakeLock } from '.'
 
+class MockWakeLockSentinel extends EventTarget {
+  released = false
+  release() {
+    this.released = true
+    return Promise.resolve()
+  }
+}
+function defineWakeLockAPI() {
+  const sentinel = new MockWakeLockSentinel()
+  Object.defineProperty(navigator, 'wakeLock', {
+    value: { request: async () => sentinel as WakeLockSentinel },
+    writable: true,
+  })
+  return sentinel
+}
+
+class MockDocument extends EventTarget {
+  visibilityState = 'hidden'
+}
+
 describe('useWakeLock', () => {
   it('isActive not changed if not supported', async () => {
     const { isActive, request, release } = useWakeLock({ navigator: {} as Navigator })
@@ -20,28 +40,13 @@ describe('useWakeLock', () => {
   })
 
   it('isActive changed if supported', async () => {
-    const createWakeLock = () => {
-      let _released = false
-      return {
-        get released() {
-          return _released
-        },
-        release: () => {
-          _released = true
-          return Promise.resolve()
-        },
-      } as WakeLockSentinel
-    }
-
-    Object.defineProperty(navigator, 'wakeLock', {
-      value: { request: () => createWakeLock() },
-      writable: true,
-    })
-    const { isActive, request, release } = useWakeLock()
+    defineWakeLockAPI()
+
+    const { isActive, forceRequest, release } = useWakeLock()
 
     expect(isActive.value).toBeFalsy()
 
-    await request('screen')
+    await forceRequest('screen')
 
     expect(isActive.value).toBeTruthy()
 
@@ -51,23 +56,8 @@ describe('useWakeLock', () => {
   })
 
   it('isActive changed if show other tabs or minimize window', async () => {
-    const createWakeLock = () => {
-      let _released = false
-      return {
-        get released() {
-          return _released
-        },
-        release: () => {
-          _released = true
-          return Promise.resolve()
-        },
-      } as WakeLockSentinel
-    }
-
-    Object.defineProperty(navigator, 'wakeLock', {
-      value: { request: () => createWakeLock() },
-      writable: true,
-    })
+    defineWakeLockAPI()
+
     const { isActive, request } = useWakeLock()
 
     expect(isActive.value).toBeFalsy()
@@ -83,4 +73,76 @@ describe('useWakeLock', () => {
 
     expect(isActive.value).toBeTruthy()
   })
+
+  it('it should delay requesting if document is hidden', async () => {
+    defineWakeLockAPI()
+    const mockDocument = new MockDocument()
+
+    const { isActive, request } = useWakeLock({ document: mockDocument as Document })
+
+    await request('screen')
+
+    expect(isActive.value).toBeFalsy()
+
+    mockDocument.visibilityState = 'visible'
+    mockDocument.dispatchEvent(new Event('visibilitychange'))
+
+    await nextTick()
+    await nextTick()
+
+    expect(isActive.value).toBeTruthy()
+  })
+
+  it('it should cancel requesting if released is called before document become visible', async () => {
+    defineWakeLockAPI()
+    const mockDocument = new MockDocument()
+
+    const { isActive, request, release } = useWakeLock({ document: mockDocument as Document })
+
+    await request('screen')
+
+    expect(isActive.value).toBeFalsy()
+
+    await release()
+
+    expect(isActive.value).toBeFalsy()
+
+    mockDocument.visibilityState = 'visible'
+    mockDocument.dispatchEvent(new Event('visibilitychange'))
+
+    await nextTick()
+    await nextTick()
+
+    expect(isActive.value).toBeFalsy()
+  })
+
+  it('it should be inactive if wake lock is released for some reasons', async () => {
+    const sentinel = defineWakeLockAPI()
+    const mockDocument = new MockDocument()
+    mockDocument.visibilityState = 'visible'
+
+    const { isActive, request } = useWakeLock({ document: mockDocument as Document })
+
+    await request('screen')
+
+    expect(isActive.value).toBeTruthy()
+
+    mockDocument.visibilityState = 'hidden'
+    mockDocument.dispatchEvent(new Event('visibilitychange'))
+    sentinel.dispatchEvent(new Event('release'))
+
+    await nextTick()
+    await nextTick()
+
+    expect(isActive.value).toBeFalsy()
+
+    mockDocument.visibilityState = 'visible'
+    mockDocument.dispatchEvent(new Event('visibilitychange'))
+    await request('screen')
+
+    await nextTick()
+    await nextTick()
+
+    expect(isActive.value).toBeTruthy()
+  })
 })
diff --git a/packages/core/useWakeLock/index.ts b/packages/core/useWakeLock/index.ts
@@ -1,8 +1,10 @@
-import { ref } from 'vue-demi'
+import { computed, ref, shallowRef } from 'vue-demi'
+import { whenever } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
 import type { ConfigurableDocument, ConfigurableNavigator } from '../_configurable'
 import { defaultDocument, defaultNavigator } from '../_configurable'
+import { useDocumentVisibility } from '../useDocumentVisibility'
 
 type WakeLockType = 'screen'
 
@@ -29,42 +31,53 @@ export function useWakeLock(options: UseWakeLockOptions = {}) {
     navigator = defaultNavigator,
     document = defaultDocument,
   } = options
-  let wakeLock: WakeLockSentinel | null
+  const requestedType = ref<WakeLockType | false>(false)
+  const sentinel = shallowRef<WakeLockSentinel | null>(null)
+  const documentVisibility = useDocumentVisibility({ document })
   const isSupported = useSupported(() => navigator && 'wakeLock' in navigator)
-  const isActive = ref(false)
+  const isActive = computed(() => !!sentinel.value && documentVisibility.value === 'visible')
 
-  async function onVisibilityChange() {
-    if (!isSupported.value || !wakeLock)
-      return
+  if (isSupported.value) {
+    useEventListener(sentinel, 'release', () => {
+      requestedType.value = sentinel.value?.type ?? false
+    })
 
-    if (document && document.visibilityState === 'visible')
-      wakeLock = await (navigator as NavigatorWithWakeLock).wakeLock.request('screen')
-
-    isActive.value = !wakeLock.released
+    whenever(
+      () => documentVisibility.value === 'visible' && document?.visibilityState === 'visible' && requestedType.value,
+      (type) => {
+        requestedType.value = false
+        forceRequest(type)
+      },
+    )
   }
 
-  if (document)
-    useEventListener(document, 'visibilitychange', onVisibilityChange, { passive: true })
+  async function forceRequest(type: WakeLockType) {
+    await sentinel.value?.release()
+    sentinel.value = isSupported.value
+      ? await (navigator as NavigatorWithWakeLock).wakeLock.request(type)
+      : null
+  }
 
   async function request(type: WakeLockType) {
-    if (!isSupported.value)
-      return
-    wakeLock = await (navigator as NavigatorWithWakeLock).wakeLock.request(type)
-    isActive.value = !wakeLock.released
+    if (documentVisibility.value === 'visible')
+      await forceRequest(type)
+    else
+      requestedType.value = type
   }
 
   async function release() {
-    if (!isSupported.value || !wakeLock)
-      return
-    await wakeLock.release()
-    isActive.value = !wakeLock.released
-    wakeLock = null
+    requestedType.value = false
+    const s = sentinel.value
+    sentinel.value = null
+    await s?.release()
   }
 
   return {
+    sentinel,
     isSupported,
     isActive,
     request,
+    forceRequest,
     release,
   }
 }
