Prevent browser from falling asleep if app shows recipe

[christianlupus]

Description
There is a wake lock in place currently for displaying a recipe.
This fails short in case one of these events happen:

• The user turns off the display via power button
• The user switches to another tab
• The user switches to another application

In either case, the wake lock is released by the OS (at least under Android) and must be re-aquired.

Reproduction
Steps to reproduce the behavior:

1. Reduce the display turnoff time to the shortest possible time and make sure the display actually turns off
2. Open a recipe in view mode (at least currently)
3. Wait and see that the wake lock actually works
4. Turn off the display and turn it on again. You see the app again
5. After the turn-off delay the display turns off.

Expected behavior
The turn-off does not depend if the user clicked somewhere unexpected and by accident disabled the wake lock.

Browser
Firefox for Android

Versions
Cookbook version: 0.11.9

Additional point
Ideally the wake log should be extracted into its own composable to be reused by Vue components and stuff whereever needed.

[christianlupus]

See also

Wake Lock Demo
https://mdn.github.io/dom-examples/screen-wake-lock-api/
Screen Wake Lock API - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API#performance_considerations