feat: add reacquireOnPageVisible functionality (#279)

* Add reacquireOnPageVisible functionality

- Implement `reacquireOnPageVisible` option in the hook
- Add tests to verify `reacquireOnPageVisible` functionality
- Solves issue #273

* Document the `reacquireOnPageVisible` prop

Added documentation and updated the usage example

Author: Deftera186

README.md

@@ -60,6 +60,7 @@ function Component() {
     onRequest: () => alert('Screen Wake Lock: requested!'),
     onError: () => alert('An error happened 💥'),
     onRelease: () => alert('Screen Wake Lock: released!'),
+    reacquireOnPageVisible: true,
   });
 
   return (
@@ -69,10 +70,7 @@ function Component() {
         <br />
         Released: <b>{`${released}`}</b>
       </p>
-      <button
-        type="button"
-        onClick={() => (released === false ? release() : request())}
-      >
+      <button type="button" onClick={() => (released === false ? release() : request())}>
         {released === false ? 'Release' : 'Request'}
       </button>
     </div>
@@ -84,11 +82,12 @@ export default Component;
 
 ## Props
 
-|    Prop     |                          description                          |   default   | required |
-| :---------: | :-----------------------------------------------------------: | :---------: | :------: |
-| `onRequest` |      called on successfully `navigator.wakeLock.request`      | `undefined` |  false   |
-|  `onError`  | called when caught an error from `navigator.wakeLock.request` | `undefined` |  false   |
-| `onRelease` |               called when wake lock is released               | `undefined` |  false   |
+|           Prop           |                          description                          |   default   | required |
+| :----------------------: | :-----------------------------------------------------------: | :---------: | :------: |
+|       `onRequest`        |      called on successfully `navigator.wakeLock.request`      | `undefined` |  false   |
+|        `onError`         | called when caught an error from `navigator.wakeLock.request` | `undefined` |  false   |
+|       `onRelease`        |               called when wake lock is released               | `undefined` |  false   |
+| `reacquireOnPageVisible` | Reacquires the wake lock when the page becomes visible again  |   `false`   |  false   |
 
 ### Returns
 

src/use-wake-lock.ts

@@ -7,12 +7,14 @@ export interface WakeLockOptions {
   onError?: (error: Error) => void;
   onRequest?: () => void;
   onRelease?: EventListener;
+  reacquireOnPageVisible?: boolean;
 }
 
 export const useWakeLock = ({
   onError,
   onRequest,
   onRelease,
+  reacquireOnPageVisible = false,
 }: WakeLockOptions | undefined = {}) => {
   const [released, setReleased] = React.useState<boolean | undefined>();
   const wakeLock = React.useRef<WakeLockSentinel | null>(null);
@@ -68,6 +70,26 @@ export const useWakeLock = ({
     wakeLock.current && (await wakeLock.current.release());
   }, [isSupported]);
 
+  React.useEffect(() => {
+    if (reacquireOnPageVisible) {
+      const handleVisibilityChange = async () => {
+        if (wakeLock.current && document.visibilityState === 'visible') {
+          try {
+            wakeLock.current = await navigator.wakeLock.request('screen');
+          } catch (error: any) {
+            onError?.(error);
+          }
+        }
+      };
+
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+      return () => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      };
+    }
+    return undefined;
+  }, [reacquireOnPageVisible, onError]);
+
   return {
     isSupported,
     request,

test/use-wake-lock.test.tsx

@@ -171,3 +171,37 @@ test('useWakeLock should call `onRelease` when wakeLockSentinel is released', as
 
   expect(handleRelease).toHaveBeenCalledWith(expect.any(Event));
 });
+
+test('useWakeLock reacquires wake lock on page visibility change when `reacquireOnPageVisible` is true', async () => {
+  const handleError = jest.fn();
+  const { result } = renderHook(() => useWakeLock({ reacquireOnPageVisible: true, onError: handleError }));
+
+  await act(async () => {
+    await result.current.request();
+  });
+
+  expect(window.navigator.wakeLock.request).toHaveBeenCalledTimes(1);
+  expect(result.current.type).toEqual('screen');
+  expect(result.current.released).toBe(false);
+
+  // Mock document.visibilityState to 'hidden'
+  Object.defineProperty(document, 'visibilityState', {
+    value: 'hidden',
+    configurable: true,
+  });
+  document.dispatchEvent(new Event('visibilitychange'));
+
+  // Mock document.visibilityState to 'visible'
+  Object.defineProperty(document, 'visibilityState', {
+    value: 'visible',
+    configurable: true,
+  });
+  await act(async () => {
+    document.dispatchEvent(new Event('visibilitychange'));
+  });
+
+  expect(window.navigator.wakeLock.request).toHaveBeenCalledTimes(2);
+  expect(result.current.type).toEqual('screen');
+  expect(result.current.released).toBe(false);
+  expect(handleError).not.toHaveBeenCalled();
+});