Issue with Wake Lock API not releasing after service worker notification click in Vue.js PWA on Xperia 10 V device

Question

I'm using the Wake Lock API in my Vue.js PWA to prevent the screen from going to sleep.

I request the wake lock with:

wakelock = navigator.wakeLock.request('screen');

Later, I release the wake lock with:

this.wakeLock.release();

I store my wake lock (wakeLockSentinel) object in Pinia to ensure that I can retrieve it even if the application is sent to the background and then brought back to the foreground.

import { defineStore } from 'pinia';

export const useWakeLockStore = defineStore('wakeLock', {
  state: () => ({
    wakeLock: null,
  }),
  actions: {
    async requestWakeLock() {
      if ('wakeLock' in navigator) {
        try {
          
          const lock = await navigator.wakeLock.request('screen');
          this.$patch({ wakeLock: lock });
          alert('Screen wake lock acquired');
          alert(`wakeLock: ${this.wakeLock}`);
        } catch (err) {
          alert(`Failed to acquire wake lock: ${err.message}`);
        }
      } else {
        alert('Wake Lock API is not supported in this browser');
      }
    },

    async releaseWakeLock() {
      alert(`wakeLock: ${this.wakeLock}`);
      if (this.wakeLock !== null) {
        try {
          this.wakeLock.release().catch((error) => {
            alert('Failed to release wake lock on page unload:', error);
          });
          this.wakeLock.active = false;
          this.$patch({ wakeLock: null });
          alert('Wake lock released');
        } catch (err) {
          alert(`Failed to release wake lock: ${err.message}`);
        }
      } else {
        alert(`Wake lock released`);
      }
    },

    resetNavigatorWakelock() {
      if (this.wakeLock !== null) {
        alert(`wakeLock: ${this.wakeLock}`);
  
        try {
          // Attempt to release the existing wake lock
          this.wakeLock.release();
          this.$patch({ wakeLock: null });
          alert('WackLock has been released successfully.');
        } catch (err) {
          alert(`Failed to release existing wake lock: ${err.message}`);
        }
      } else {
        alert('No active wake lock to release.');
      }
    }
  },
  persist: true,  
});

This works as expected.

However, when I use a service worker to handle a notification click event, go back to the page (using client.navigate) and then try to release the wake lock, I can retrieve the wakeLockSentinel object and call release() without any errors, but the screen does not return to sleep mode as expected.

Another strange behavior I noticed is that after calling release(), the wakelock variable becomes null, indicating that it was successfully deleted. It should be OK...

I suspect that the issue occurs after handling the notification click event in the service worker with:

  // Navigate to the app and release the wake lock
});```

Is this a known issue with the Wake Lock API or an Android-specific bug? Are there any workarounds to ensure the screen returns to sleep mode after releasing the wake lock in this scenario?

Any insights or suggestions would be greatly appreciated.

I have tried several approaches to request and release the wake lock, including:

-Handling the wake lock directly inside the page.
-Using a utility function to manage it.
-Storing the wakeLockSentinel object in Pinia.
-Avoiding client.navigate inside the service worker and instead using a goBack method to return to the page without reloading it.
-Clearing storage using:

```localStorage.clear();
sessionStorage.clear();```

to prevent any hidden wake lock instances.
-Using adb shell dumpsys power to debug

Despite all these attempts, the issue persists. The code says that the "wakelockSentinel" has been released.

What's strange is that I am successfully releasing the correct wake lock "wakelockSentinel" instance, but the screen still remains awake.

Any ideas on how to resolve this?