[v1.0.0b] PWA shows white-screen when logged in (sometimes)

14wkinnersley commented 2 years 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?

After setting up Mealie 1.0.0b, I added a homescreen shortcut within iOS, and initially it worked, it let me login. After closing out, and closing out from the iOS “task manager”, It will no longer load correctly. I see the login screen for a brief moment, and then it goes to a white page. This only occurs for the iOS Add to Homescreen function.

Deployment

Docker (Linux)

Deployment Details

I run this within docker on Ubuntu Server 20.04 Headless. I run the site behind Nginx Proxy Manager.

hay-kot commented 2 years ago

I noticed this today as well on Android, seems intermittent for me. Will dig into it this week.

hay-kot commented 2 years ago

~~Okay, so I was able to replicate this pretty easily on iOS, Android, and MacOS. I'm thinking it has something to do with SSR but I'm pretty stumped on what's causing the issue.~~

Hoping someone else might have an idea of what's going on.

As a temporary work around, if you can tap login fast enough it will let you pass the login screen, which I know is not ideal 😞

Edit: I'm an idiot and used fetch on the server. See here

https://github.com/hay-kot/mealie/pull/1086/commits/b10ce50f7261ccdacf0876cf2d36e96a188f8cc3

Should be fixed when that PR is merged

zierbeek commented 2 years ago

thinks this is still happening?

hay-kot commented 2 years ago

thinks this is still happening?

I haven't been able to replicate it with the most recent build. Make sure you grab the latest build of the nightly containers. You might also need to reinstall the PWA.

14wkinnersley commented 2 years ago

thinks this is still happening?

I haven't been able to replicate it with the most recent build. Make sure you grab the latest build of the nightly containers. You might also need to reinstall the PWA.

I did some testing:

It works ✅ if I add the PWA homescreen icon for the direct local IP Address to Mealie.

It does not ❌ work if mealie is behind a reverse proxy (NGINX Proxy Manager in my case) ie: accessing mealie from https://mealie.domain.com

zierbeek commented 2 years ago

issues are indeed gone after a removal :) both on Nginx and local :)

14wkinnersley commented 2 years ago

issues are indeed gone after a removal :) both on Nginx and local :)

Hmm ill do some more testing. It only works the first time behind NGINX for me. After I close out the PWA from the "task manager" it no longer works, and I get the same issues as before. I did try setting it up on a whole new subdomain and it still did not work. Do you use NGINX Proxy Manager?

zierbeek commented 2 years ago

Ah yeah indeed, after force closing it, issues return! Using SWAG

Van: Wells @.> Verzonden: woensdag 23 maart 2022 16:54 Aan: hay-kot/mealie @.> CC: zierbeek @.>; Comment @.> Onderwerp: Re: [hay-kot/mealie] [v1.0.0b] PWA shows white-screen when logged in (sometimes) (Issue #1077)

issues are indeed gone after a removal :) both on Nginx and local :)

Hmm ill do some more testing. It only works the first time behind NGINX for me. After I close out the PWA from the "task manager" it no longer works, and I get the same issues as before. I did try setting it up on a whole new subdomain and it still did not work. Do you use NGINX Proxy Manager?

— Reply to this email directly, view it on GitHubhttps://github.com/hay-kot/mealie/issues/1077#issuecomment-1076507154, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AOCC7WZW6YUZ3F2ZXPXIB7TVBM5C7ANCNFSM5RGSPSBQ. You are receiving this because you commented.Message ID: @.***>

hay-kot commented 2 years ago

~~Does this issues also occur on the Beta sites PWA?~~

~~https://beta.mealie.io/~~

Never-mind, I got it to fail. Back to the drawing board.

14wkinnersley commented 2 years ago

~~Does this issues also occur on the Beta sites PWA?~~

~~https://beta.mealie.io/~~

Never-mind, I got it to fail. Back to the drawing board.

Just tested, no issues with the demo site.

hay-kot commented 2 years ago

Yeah, this is thoroughly confusing. I think the PR I did resolved the core issue that was causing the error, but the PWA is doing some aggressive caching that is causing the pages not to render correctly.

It may be that you need to uninstall the PWA and delete all associated page data and re-install the PWA to get this to be resolved? I've done that and so far so good on my Ipad and Android phone and MacBook 🤞

14wkinnersley commented 2 years ago

Yeah, this is thoroughly confusing. I think the PR I did resolved the core issue that was causing the error, but the PWA is doing some aggressive caching that is causing the pages not to render correctly.

It may be that you need to uninstall the PWA and delete all associated page data and re-install the PWA to get this to be resolved? I've done that and so far so good on my Ipad and Android phone and MacBook 🤞

No dice for me. I removed all PWA for it, and even setup access on a whole other domain, created the new PWA, and had the same issue. Ill keep doing some testing on my end with the reverse proxy and see if I can get anywhere.

hay-kot commented 2 years ago

Bummer, I'd double check that you've got the latest build docker-compose pull && docker-compose up -d just in case.

hay-kot commented 2 years ago

Checking in on this again. I haven't had the issue since updating and have been using it pretty regularly.

14wkinnersley commented 2 years ago

Checking in on this again. I haven't had the issue since updating and have been using it pretty regularly.

I still have the issue on the latest update. Tried deleting and reinstalling the PWA. Just tried a few minutes ago. No help. Gave up on using it

tbleiker commented 2 years ago

Same here

Android 12 (Pixel 4a)
Docker (Linux), current nightlies, behind proxy (traefik)

CarloDePieri commented 2 years ago

My 2c about this:

as of today, the PWA is not working correctly on my android 11 device (pixel 2xl) and android 12 device (pixel 4a)

My setup is nightlies docker, behind traefik; this stack went up yesterday for the first time on this server so images are up-to-date. On both device I also completely cleared the website data from the browsers (tried chrome, chrome-beta, firefox, kiwi) when reinstalling the pwa.

Thank you for all your work on this project!

hay-kot commented 2 years ago

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

14wkinnersley commented 2 years ago

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

I just tested this using even Microsoft Edge in Windows 11 by adding the "application" to my desktop and had the same issue. I can run debugger tools if needed but I dont really know what im doing with all that. I could create a dummy user account maybe for you to test if you need?

CarloDePieri commented 2 years ago

Not much I can do on this to troubleshoot since I can't replicate the issue with any of my devices. If anyone can troubleshoot on their end with a remote debugger with chrome or eq. and can provide some more information or ideas on what causing the issue that would be really helpful.

I can reproduce this behavior even on chrome (Version 99.0.4844.84 (Official Build) (64-bit)) on my linux machine (the build number of Mealie as reported in Settings -> General about -> Build is 10784b6e242b941b76ce21186c4279bcd4037789 by the way).

How to reproduce on chrome on pc

Uninstall any previously installed pwa version
Clear all website data by clicking on 'clear site data' in the Application -> Storage tab of the Developer Tools (Menu -> more tools -> Developer Tools)
Install the pwa by pressing the button in the address bar or Menu -> Install Mealie...
In the newly installed pwa, log in. Everything should work correctly
Close the application
Open the pwa again by going to chrome://apps, apps tab (or by launching it by the shortcut created by your os)
The login menu flashes for a second, then a blank white screen appears.

All http request succeeded, but the console report an error:

7b44a51.js:2 TypeError: Cannot read properties of undefined (reading '_isDestroyed')
    at destroy (7b44a51.js:2:21512)
    at E (7b44a51.js:2:55951)
    at E (7b44a51.js:2:56050)
    at E (7b44a51.js:2:56050)
    at f.__patch__ (7b44a51.js:2:59472)
    at f.t.$destroy (7b44a51.js:2:36269)
    at destroy (7b44a51.js:2:21555)
    at E (7b44a51.js:2:55951)
    at f.__patch__ (7b44a51.js:2:59472)
    at f.t.$destroy (7b44a51.js:2:36269)

The js is mimified so it's not easly debugged: maybe later I'll manage to setup Mealie in dev mode and look further into this issue.

CarloDePieri commented 2 years 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.

Good bot.

The issue is still relevant though! I just reproduced it with a fresh nightly (beta3) installation following the step I outlined above.

hay-kot commented 2 years ago

Marked it as confirmed, issue should stick around now.

zierbeek commented 2 years ago

Possible fix is uploaded. Could all of you give it a try? Maybe feinstalling thé pwa

tbleiker commented 2 years ago

It seems to work now. Thx!

VS-X commented 2 years ago

Can confirm, @zierbeek's fix seems to work. I exec'd into the running frontend container, changed the static/manifest.json file, ran yarn build and restarted the container. Re-added PWA and it works fine. Thanks!

14wkinnersley commented 2 years ago

Does work by going to the localip and setting PWA so that is good news! Does not work behind Cloudflare tunnel reverse proxy. Ill do some T/S later and try to remove the tunnel and dns altogether and see if a fresh setup will work.

zierbeek commented 2 years ago

for me, it works behind swag reverse proxy. Have you pulled the nightly?

dronf commented 2 years ago

Working for me on android PWA. For reference, the instance is behind Nginx Proxy Manager.

14wkinnersley commented 2 years ago

Working for me on android PWA. For reference, the instance is behind Nginx Proxy Manager.

Did you have to do anything specific in NPM? I moved mine behind NPM and still no dice.

hay-kot commented 2 years ago

Wanted to clarify that this fix is only available in the nightly release.

You'll also probably have to uninstall the PWA and maybe nuke the cache. Sometimes those manifest can be a bugger to get removed.

14wkinnersley commented 2 years ago

Wanted to clarify that this fix is only available in the nightly release.

You'll also probably have to uninstall the PWA and maybe nuke the cache. Sometimes those manifest can be a bugger to get removed.

Confirmed I am on the nightly image, and PWA/device cache has been removed. Is there any cache within mealie that I would need to clear? On iOS just FYI, right now its behind Nginx Proxy Manager. I will also try setting up mealie on a whole new server from scratch later and see if I can make any progress.

dronf commented 2 years ago

Working for me on android PWA. For reference, the instance is behind Nginx Proxy Manager.

Did you have to do anything specific in NPM? I moved mine behind NPM and still no dice.

I didn't change anything in NPM. It was working before in 0.5.3, then failed in the release 1.0.0b4. You DO need to delete the PWA on your home screen and create a new one. The one I had before the update continued to give the white screen after the update, but a fresh one worked fine(and was even logged in).

14wkinnersley commented 2 years ago

At this point I am not sure what is wrong. Setup mealie on a whole new fresh VM. Behind NPM. Only differences I may have, is running from iOS, and my dns provider is Cloudflare which mealie is not setup through their proxy. Wonder if Cloudflare is causing the issues and could be changing anything somehow. Would like to see if anyone else runs their setup through Cloudflare. Tried from 3 different iOS devices. I do not have an android to test.

hay-kot commented 2 years ago

At this point I am not sure what is wrong. Setup mealie on a whole new fresh VM. Behind NPM. Only differences I may have, is running from iOS, and my dns provider is Cloudflare which mealie is not setup through their proxy. Wonder if Cloudflare is causing the issues and could be changing anything somehow. Would like to see if anyone else runs their setup through Cloudflare. Tried from 3 different iOS devices. I do not have an android to test.

Is CloudFlair doing any kind of cacheing? If it doesn't fetch the new manifest file, it wont apply the update. If CloudFlair is caching the old manifest file that would keep the change from coming through to your end device.

14wkinnersley commented 2 years ago

I disabled and purged all cache. Added a Cloudflare rule to bypass cache, still no luck.

FrouxBY commented 2 years ago

I have tried quickly, it was not working on my side

My test was updating the image, and installing the WPA on an Android phone after wiping all cache on it

I need to do more test on other platform (iOS, windows-Chromium), And restart my forward proxy (Traefik) to be sure I'll keep you informed on those other trials,

Best

14wkinnersley commented 2 years ago

Can confirm, @zierbeek's fix seems to work. I exec'd into the running frontend container, changed the static/manifest.json file, ran yarn build and restarted the container. Re-added PWA and it works fine. Thanks!

Where did you have to run yarn build at? Trying to manually change my setting for testing.

VS-X commented 2 years ago

Where did you have to run yarn build at?

In the /app, the working directory of the container. Forgot to mention that you may also have to run yarn install before yarn build

VS-X commented 2 years ago

Update: just tested on an iPhone (previous test was using Android), and there the issue still happens. What I also noticed is that I can't logout on the Android - I logout, close the PWA, open it again and it loads directly into the app, without any login screens. Not sure if related.

zierbeek commented 2 years ago

Update: just tested on an iPhone (previous test was using Android), and there the issue still happens. What I also noticed is that I can't logout on the Android - I logout, close the PWA, open it again and it loads directly into the app, without any login screens. Not sure if related.

Can confirm the logout behavior

zierbeek commented 2 years ago

@hay-kot could you check if there is a route to '/' ? https://forum.vuejs.org/t/blank-screen-after-pwa-update-on-ios/72504/6

also read about this : https://forum.vuejs.org/t/blank-screen-after-pwa-update-on-ios/72504/3 known issue on iOS https://github.com/PWA-POLICE/pwa-bugs#problem-navigation-to-a-website-has-infinite-loading

zierbeek commented 2 years ago

Let's hope that that fixed it for ios users

hay-kot commented 2 years ago

Just merged a possible fix from @zierbeek (Thanks!). If you're still experiencing the issues, please try to latest nightly build once it's finished building.

Additionally, if you're still experiencing the issue please provide the following details

Phone Type Android / IPhone / Other and Version
Browser being used
Mealie Git Commit Hash (from your settings page)
What proxy you're using and if you're using CloudFlair.

FrouxBY commented 2 years ago

I have tried again with the latest build (505e594758038b36caba7510f8321e8555ff05ff on settings pages) No Luck on my side on any of those 3 devices: Safari on iPad Pro iOS 15 Chrome on Android 11 (Samsung) Vivaldi (chromium) on Windows 10

On Windows 10, if I hard refresh, or delete cookies, It works again, and I can get the following error in the JS console

TypeError: Cannot read properties of undefined (reading '_isDestroyed') at destroy (63b08e6.js:2:21513) at E (63b08e6.js:2:55952) at E (63b08e6.js:2:56051) at E (63b08e6.js:2:56051) at f.patch (63b08e6.js:2:59473) at f.t.$destroy (63b08e6.js:2:36270) at destroy (63b08e6.js:2:21556) at E (63b08e6.js:2:55952) at f.patch (63b08e6.js:2:59473) at f.t.$destroy (63b08e6.js:2:36270) re @ 63b08e6.js:2

which does not appear one the browser, only when the PWA is installed and when I get the blank page,

Edit: I use Traefik 2.8 as a reverse proxy, without any caching involved I think

Hope this can help

14wkinnersley commented 2 years ago

Issue is persisting. iOS 15.6 on two separate iphones. iOS 16 Beta on one iphone. Safari browser.

Build 505e594758038b36caba7510f8321e8555ff05ff

Reverse proxy: Nginx Proxy Manager DNS: Cloudflare

epheterson commented 2 years ago

This is still happening for me too, same config as above.

iPhone / iOS 16 56eb0bca7142715984c8028c4c881f086e979564 Synology DSM reverse proxy, I believe it's Nginx underneath DNS: Cloudflare

Edit: Actually it was doing this the last couple days, but just tried today and seems to be resolved! Thanks!

Edit 2: It is still failing on my wife's iPad running iOS 15.6

m10x commented 2 years ago

Android 12 & 13 Build 13850cda1f9cb02a8c788030ba6cfa96bba33571 Browsers used: Vanadium, Firefox, Brave Proxy: Traefik / Caddy (happens with both)

https://mealie.mydomain.de/?standalone=true shows shortly (half second) the mealie login page (w/o darkmode), then white blank screen. When i press fast enough on a button (e.g. login or reset password) I'm logged in and can use mealie as normal. when using https://mealie.mydomain.de/?standalone=false, mealie behaves totally normal. I'm logged in and it uses the darkmode as specified

Using the internal ip (both with standalone true or false), mealie behaves normal, too.

So to circumvent this bug, I refresh the pwa and try to spam a button. If I'm fast enough and press a button during the half second they are shown, I can use it as normal

HoroTW commented 2 years ago

Hey hey, found this bug too and can easily recreate it on the desktop too (PWA on Desktop Chromium). To recreate I just create a PWA and then I can trigger it by logging in and then refreshing the pwa with F5 - a invalidate cache and refresh (ctrl+F5) brings the PWA back - with F5 its back to white again and so on....

So the fix https://github.com/hay-kot/mealie/pull/1526 did sadly not reslove it. (I used the current nightly to test it)

As @m10x said it has to do with the standalone=true which is the default start_url for pwa sites in nuxt....

As I don't have that much web developer knowledge I think the following could be helpful:

Maybe it has todo with my setup - I run the beta 4 in docker with compose behind a second caddy as reverse proxy. If I go directly to the mealie frontend the bug is gone.... but yeah not really a solution - It feels like the second caddy instance triggers ssr and caching at the same time or something like that :see_no_evil: (again not a web dev guy)

@hay-kot What is the setup on the Demo Server?

Bottleface commented 1 year ago

Can confirm that this issue still exists on beta5. I can reproduce easily on 2 Android phones, a chromebook, and windows. The site works fine if I remove the standalone=true query string, or set it to false. Issue is that you can't really do that with a PWA.

I am running mealie in docker with the reverse proxy built into synology's NAS devices. As far as I can tell everything is working perfectly minus this bug.

Opethel commented 1 year ago

Also experiencing this issue on v1.0.0beta-5, IOS16.

mealie-recipes / mealie