How to tell when a user locks or unlocks their computer

Need help
1

I am working on an app and one feature of it is a kiosk screen that will allow other users in the same household to access the app on the same screen. I do have an inactive element that after a couple of min will reset the app to the kiosk login screen, however some users are just locking the computer or tablet instead. This causes the inactive timer to never reach its timeout and when the next users eventually unlocks the computer or tablet they are left on the previous users page.

So, is there a way for the app to know when a user has locked the computer/tablet, or rather unlocked the computer/tablet so I can trigger the app to return to the kiosk log in screen?

Thanks for any help.

2

Bubble doesn’t provide a built-in trigger for detecting when a user’s computer is locked or unlocked by the operating system. However, you can simulate this behavior using the browser’s Page Visibility API or window focus/blur events. When the user locks or unlocks their device, the browser fires visibility events that you can capture with JavaScript and forward to Bubble via Toolbox actions.

1. Using the Page Visibility API

  1. Add an HTML element (e.g., an HTML Header) on your page with the following script:

    <script>
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      // Page is hidden: the user locked the screen, switched apps, or changed tabs
      bubble_fn_kiosk_lock();
    } else {
      // Page is visible again: unlocked or returned to the tab
      bubble_fn_kiosk_unlock();
    }
  });
</script>

  2. Expose JavaScript functions to Bubble using the Toolbox plugin:

    • Add two “Expose JavaScript to Bubble” actions, naming them kiosk_lock and kiosk_unlock.

  3. Create Bubble workflows:

    • When kiosk_lock is triggered: pause timers, clear sensitive data, or perform any lock-related logic.
    • When kiosk_unlock is triggered: navigate the user back to the kiosk login page.

2. Using Window Focus/Blur Events

If you only need to detect when the browser window loses or gains focus:

  1. In the same HTML element, include:

    <script>
  window.addEventListener('blur', () => bubble_fn_kiosk_lock());
  window.addEventListener('focus', () => bubble_fn_kiosk_unlock());
</script>

  2. Expose and handle these events in Bubble exactly as in the Page Visibility API approach.

3. Considerations and Limitations

  • Not a true OS-level event: These methods react to the browser tab or window becoming hidden or losing focus. They cover screen locks and app switches but will also fire on tab changes or window minimization.
  • Mobile support: Some mobile browsers may have limited support or delays for visibilitychange events.
  • Cross-environment testing: Test on all target platforms (Windows, macOS, iOS, Android) to ensure reliability.
3

@carlovsk.edits thanks so much for the info. I will play around with these to see if they will my needs!

1 Like
4

This topic was automatically closed after 70 days. New replies are no longer allowed.