[v1.0.0b] - 'Keep Screen Awake' doesn't work for iOS PWA

mealie-recipes / mealie

Mealie is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the url and mealie will automatically import the relevant data or add a family recipe with the UI editor

https://docs.mealie.io

GNU Affero General Public License v3.0

6.69k stars 689 forks source link

[v1.0.0b] - 'Keep Screen Awake' doesn't work for iOS PWA #2305

Open ghuser238490 opened 1 year ago

ghuser238490 commented 1 year ago

First Check

[X] This is not a feature request
[X] I added a very descriptive title to this issue.
[X] I used the GitHub search to find a similar issue and didn't find it.
[X] I searched the Mealie documentation, with the integrated search.
[X] I already read the docs and didn't find an answer.

What is the issue you are experiencing?

On iOS 16.4 (iPhone 12) the switch "Keep Screen Awake" on the recipe pages doesn't prevent the device from turning the display off.

Deployment

Docker (Linux)

Deployment Details

Version nightly Build 027fcbdcef743ff2767782f34fff7593ab32f1cf

hay-kot commented 1 year ago

Can you go here

https://vueuse.org/core/useWakeLock/#usewakelock

And tell me what these say?

It looks like it's unsupported on your browser, but I'm not sure why it is even an option then. I see the same thing on my IPad.

https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API#browser_compatibility

ghuser238490 commented 1 year ago

Hi @hay-kot, thanks for looking into this!

Output on https://vueuse.org/core/useWakeLock/#usewakelock in iOS Safari and macOS Safari 16.4 is the same as in your screenshot above:

Is Supported: true
Is Active: false

I did some tests:

iOS Safari: It's working (screen stays active)
iOS PWA on homescreen: It's not working, screen locks after the declared time in the iOS settings (PWA was reinstalled before)
macOS Chrome (ver. 111.0) PWA: It's working (screen stays active)
macOS Safari 16.4: It's working (screen stays active)

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

brent20 commented 9 months ago

I can confirm this also does not work for me when I'm using Mealie added to my homescreen as a web app. Latest iOS, iPhone 14 Pro.

boc-the-git commented 9 months ago

@brent20 just confirming you're running a recent version of Mealie, as it relates to your recent comment? Can you please go to https://yourmealieurl/admin/site-settings, hit "Bug Report" and send us that info? Can you please also test deleting the "re-installing" the PWA on your phone, just to rule out any issues there.

cmintey commented 9 months ago

I'll also add my hat into the ring here. Just tested with a recent nightly on the latest iOS. The screen stays awake when using the Safari browser, but does not work when the PWA is installed. I did a "reinstall" of the PWA and it still didn't work.

**Details**
Version: nightly
Build: b28aa828469f898b936337b679cbfdf75fa7ffad
Application Mode: Production
Demo Status: Not Demo
API Port: 9000
API Docs: Enabled
Database Type: postgres
Recipe Scraper Version: 14.52.0

**Checks**
Secure Site: Yes
Server Side Base URL: Yes
LDAP Ready: Yes
Email Configured: Yes
Docker Volume: success

brent20 commented 8 months ago

Hey there, sorry for the delay, but yes, it was still not working - thank you @cmintey for also confirming. I just updated my docker containers recently and it is still not working as expected. Here’s my Bug Report details as requested:

Details Version: nightly Build: 46cb36212a7dfbfbe051fed1782dba1fdcc00b9b Application Mode: Production Demo Status: Not Demo API Port: 9000 API Docs: Enabled Database Type: postgres Recipe Scraper Version: 14.53.0

Checks Secure Site: Yes Server Side Base URL: Yes LDAP Ready: No Email Configured: No

jebabin commented 8 months ago

This is an IOS bug. The bug is described here https://bugs.webkit.org/show_bug.cgi?id=205104 and is fixed in WebKit but not yet in Safari/IOS An alternative is to use a JavaScript lib like NoSleep (https://github.com/richtr/NoSleep.js/). It use alternative like playing a background empty audio file to prevent screen going in sleep mode when the WakeLock api is not supported As recent IOS version report to support the API but it’s broken in WPA mode, a patch is needed to still use the sound trick on IOS 16.4+ See https://github.com/richtr/NoSleep.js/issues/156

ChipSkylark37 commented 1 week ago

Just throwing in a quick comment that this is still broken on iOS 17.6.1 using the 'Add to Homescreen' feature.

Is there any idea of a timeline to fix this? Is this just an iOS Bug and there's no control over it? As its been an issue since 2023 without any real resolution.

boc-the-git commented 5 days ago

Is there any idea of a timeline to fix this? Is this just an iOS Bug and there's no control over it? As its been an issue since 2023 without any real resolution.

Yes @ChipSkylark37, this is iOS specific. Feature works great on Android. I went down a rabbit hole about 3 weeks ago based on @jebabin's comment, looking to see if there was a good solution for iOS.. I can't recall my specific findings other than it being a lot of trouble and maybe not possible. I'm not sure if there might be hacky solutions that could work; I had already invested too much time in it.

ChipSkylark37 commented 5 days ago

I wonder if a native iOS app wouldn't have that limitation. I'm sure that would be no simple task to attempt, even with TestFlight.

Anyways, good to at least get confirmation - I thought I was going crazy with it not keeping the screen on

Cheers.