App Wake Lock Plugin

v2.34+

Recipe pages, boarding passes, presentations, navigation views: some screens must stay on while the user is not touching the device. The AppWakeLock plugin wraps the Screen Wake Lock API so that a single request() keeps the screen awake for as long as you want it to, and release() lets the device go back to its normal timeout.

// quasar.config file

return {
  framework: {
    plugins: [
      'AppWakeLock'
    ]
  }
}

Usage

import { AppWakeLock } from 'quasar'

// Keep the screen awake:
AppWakeLock.request()
  .then(() => {
    // success!
  })
  .catch(err => {
    // page hidden, battery saver, or not capable
  })

// Let the screen turn off again:
AppWakeLock.release()

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.wakeLock.request()
    .then(() => {
      // success!
    })
    .catch(err => {
      // page hidden, battery saver, or not capable
    })

  // ...later
  $q.wakeLock.release()
}

The browser releases the lock on its own

A wake lock only lives while the page is visible. As soon as the user switches tabs, minimizes the browser or locks the phone, the browser releases the lock, and isActive drops to false. The plugin remembers that you asked for the lock and requests it again the moment the page becomes visible, until you call release(). There is nothing to wire up on your side: one request() on mount and one release() on unmount is all a component needs.

<template>...</template>

<script setup>
  import { useQuasar } from 'quasar'
  import { onBeforeUnmount } from 'vue'

  const $q = useQuasar()

  $q.wakeLock.request().catch(() => {
    // not available; the page still works, the screen just times out
  })

  onBeforeUnmount(() => {
    $q.wakeLock.release()
  })
</script>

isActive always reflects the actual state: true only while a lock is really held. Watch it if your UI shows the current status.

Browser support

The Screen Wake Lock API needs a secure context (HTTPS or localhost) and is available in Chromium-based browsers, Safari 16.4+ and Firefox 126+. Check $q.wakeLock.isCapable before showing a “keep screen on” control; where it is false, the methods reject with a Not capable error.

SSR and SSG

There is no screen on the server, so isCapable and isActive are both false there and the methods resolve without doing anything. On the client, isCapable gets its real value only after hydration completes, which keeps markup that depends on it (a v-if around your toggle) from mismatching the server render.