[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 1 year ago

I was able to reproduce the issue and the fix in #1982 did resolve it on my laptop's PWA. If you can, once the build is finished - try the latest nightly and let me know if this issue is still present.

14wkinnersley commented 1 year ago

I was able to reproduce the issue and the fix in #1982 did resolve it on my laptop's PWA. If you can, once the build is finished - try the latest nightly and let me know if this issue is still present.

I only saw API-Nightly update, and can confirm the issue persists after upgrading, clearing caches, and trying across multiple iOS devices and windows 11.

michael-genson commented 1 year ago

I only saw API-Nightly update, and can confirm the issue persists after upgrading, clearing caches, and trying across multiple iOS devices and windows 11.

It's still building, it usually takes 2-3 hours https://github.com/hay-kot/mealie/actions/runs/3834700359

hay-kot commented 1 year ago

I'm got some confirmations on discord that this issue is resolved on the latest nightly image.

To use the fix, be sure to

Delete your current PWA installation
Clear cookies and storage for the website.

After that things should work as expected. Please report back good or bad results!

michael-genson commented 1 year ago

Doesn't seem to be working for me. It looks like it's correctly logging me back in (I don't have to login twice) but the redirect from the login screen isn't working (it goes to a white screen).

On the site in mobile I can manually go to another page (e.g. all recipes) and it loads fine (and I'm logged-in) but the initial state in the app fails to redirect to the home page.

I tried killing site data and cookies in like 5 different ways (thanks Android) but similar results for all of them. Also the app name is "mealie" with a lowercase m now, weirdly

14wkinnersley commented 1 year ago

I'm got some confirmations on discord that this issue is resolved on the latest nightly image.

To use the fix, be sure to

Delete your current PWA installation

Clear cookies and storage for the website.

After that things should work as expected. Please report back good or bad results!

On the latest build, issue is still occurring for me. Steps taken:

iPhone 14: Cleared cache and website data, tested on wifi. cleared cache and data again, tested on cellular. Issue persisted.

iPhone 12: Cleared cache and website data, tested on wifi. cleared cache and data again, tested on cellular. Issue persisted.

Cloudflare: Purged all cache

Nginx proxy manager: removed, then re-added the configuration for mealie, issue persisted. Then removed it entirely, set up a reverse proxy with Cloudflare tunnel, issue persisted.

Windows 11: Issue resolved.

Seems like the issue may still be impacting Apple iOS devices.

hay-kot commented 1 year ago

I'm getting a similar, but slight different issue now. I think I've solved the auth issue that was part of the problem. The problem I'm seeing now is the redirect is broken, and never mounts the home page. If you navigate to another page the site seemingly works fine.

Will take another crack resolving that issue and report back!

michael-genson commented 1 year ago

I'm getting a similar, but slight different issue now. I think I've solved the auth issue that was part of the problem. The problem I'm seeing now is the redirect is broken, and never mounts the home page. If you navigate to another page the site seemingly works fine.

FWIW I'm seeing it on desktop now, too. Easy workaround is to just go directly to any other page, for now.

hay-kot commented 1 year ago

Okay this build might fix it!

https://github.com/hay-kot/mealie/actions/runs/3843774919

But who knows at this point 🤷

14wkinnersley commented 1 year ago

Okay this build might fix it!

https://github.com/hay-kot/mealie/actions/runs/3843774919

But who knows at this point 🤷

@hay-kot I can now confirm, the issue is resolved for me! Tested on iOS. Thank you so much for all the hard work that went into fixing this! 😀

michael-genson commented 1 year ago

This fixed it on my phone's browser, but the PWA still doesn't redirect properly (white screen). But if I go to my browser and hit "open in Mealie" it brings me to the recent recipes page, which works...

The fact that I'm getting different behavior is strange, so maybe my phone is caching something (despite nuking my cache)

hay-kot commented 1 year ago

This fixed it on my phone's browser, but the PWA still doesn't redirect properly (white screen). But if I go to my browser and hit "open in Mealie" it brings me to the recent recipes page, which works...

The fact that I'm getting different behavior is strange, so maybe my phone is caching something (despite nuking my cache)

Are you deleting the PWA and reinstalling it? I believe you have to do that to get the new manifest.

michael-genson commented 1 year ago

Yeah, I tried uninstalling the app, clearing all data in Chrome, clearing all of Chrome's app data, no dice. Conveniently, if I do the workaround once (open in Chrome, then choose "open in mealie") it keeps me in the right place when I re-open the app (no white screen). However if I close the app and re-open it, or hit back a few too many times, the redirect doesn't work properly (white screen).

Interestingly, if I open the PWA first, get the white screen, then choose "open in Chrome" the white screen persists in Chrome, indicating it's not strictly a PWA issue. But I have no way of reproducing this using only the browser, I have to cause the issue in the PWA first.

14wkinnersley commented 1 year ago

I may have spoke too soon. I am also getting the white screen. I attempted to set the PWA on another device, and after logging in, closing the PWA completely, then reopening; the white screen shows.

For the device that it worked on initially, I noticed when I first added to homescreen this morning and it worked, it had only the base URL. Now when going to add mealie to homescreen it has /?standalone=true appended at the end of the base url.

articuno1au commented 1 year ago

Just cross-linking. I started encountering this issue after installing the attempted fix for #1816. I've completely blown away the storage for the site and all cookies, but the issue persists.

I wasn't previously encountering the problem, so this is a new behaviour. Let me know if there's any testing I can perform for you.

I've got my configuration listed in https://github.com/hay-kot/mealie/issues/1816#issue-1446750910

hay-kot commented 1 year ago

@articuno1au, do you know the last good build number where you weren't experiencing the PWA error?

michael-genson commented 1 year ago

FWIW I wasn't experiencing it before either, but that's because it logged me out every time I opened the PWA, so I never had the chance for the redirect to fail (because it never redirected).

So the issue still existed, it just basically got cancelled out by the login state not persisting

hay-kot commented 1 year ago

Trying another fix

https://github.com/hay-kot/mealie/actions/runs/3858063510

Will give it a try again once the build is complete. 🤞

14wkinnersley commented 1 year ago

Trying another fix

https://github.com/hay-kot/mealie/actions/runs/3858063510

Will give it a try again once the build is complete. 🤞

Tested and confirmed its operational for me across multiple devices! Thanks so much!!

articuno1au commented 1 year ago

EDIT:: Actually, I can't confirm this is fixed on my end. I'm getting a JSON dump appearing in the PWA window when opening it

{
  "name": "Mealie",
  "short_name": "mealie",
  "icons": [
    {
      "src": "/_nuxt/icons/icon_64x64.af4555.png",
      "sizes": "64x64",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_120x120.af4555.png",
      "sizes": "120x120",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_144x144.af4555.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_152x152.af4555.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_192x192.af4555.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_384x384.af4555.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/_nuxt/icons/icon_512x512.af4555.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "start_url": "",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#E58325",
  "lang": "en",
  "title": "Mealie",
  "share_target": {
    "action": "/",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "recipe_import_url"
    }
  }
}

I've cleared all the data, and same result. I've also confirmed I'm on the latest nightly docker container (might not have made it to Docker yet?).

hay-kot commented 1 year ago

Actually, I can't confirm this is fixed on my end. I'm getting a JSON dump appearing in the PWA window when opening it

I was getting the same earlier today. Trying another fix, should be built soon.

https://github.com/hay-kot/mealie/actions/runs/3859534260

michael-genson commented 1 year ago

Latest one seems to work correctly!

hay-kot commented 1 year ago

Looks to be working for me as well!

articuno1au commented 1 year ago

So, it's not working for me, but I'm unsure if I have the correct code.

I'm currently running the following front-end hash: sha256:400eb63197207faa11d1370f29abbf237dbf9b35628a0306cd85dabdd767b56c back-end hash: sha256:98fe68351473c00b596117fdd20e344dad8a1cf9b9b89be330f512e1cac0d76c

hay-kot commented 1 year ago

Didn't mean to close this, whoops!

@articuno1au, did you do the following?

To use the fix, be sure to

Delete your current PWA installation

Clear cookies and storage for the website.

articuno1au commented 1 year ago

Didn't mean to close this, whoops!

@articuno1au, did you do the following?

To use the fix, be sure to

Delete your current PWA installation

Clear cookies and storage for the website.

Yeah, I cleared data. ~~I just revalidated and am still seeing the same problem.~~

Scrub that. It seems to be resolved. I had been logging in then installing the PWA. I installed the PWA then logged in and it started working. I've tested a bunch of times, still working without issue. Not sure why that would make a difference.. Lgtm.

SimSon2710 commented 1 year ago

Android 11, Samsung S10
Firefox 108.2.0
latest mealie nightly: v1.0.0beta-5 (container updated on 07.01.22) running on Ubuntu behind SWAG proxy

I can't confirm that it works :/

I uninstalled the PWA, deleted all browser data in firefox, installed the PWA w/o prior login and then logged in inside the PWA. This worked better than before, but when I closed the PWA and tried to reenter, mealie first asks me to enter my credentials, but then the screen turns blank as before.

articuno1au commented 1 year ago

@SimSon2710 - Just for isolation testing, do you want to try again with a clean browser like Chrome or Vivaldi? I found some weird caching stuff with the PWA.

SimSon2710 commented 1 year ago

@articuno1au - I just tried both, completely new and clean installation of Vivaldi and Chrome, but the issue persist :/

articuno1au commented 1 year ago

Worth a try. I can't replicate on my end I'm sorry. Good luck getting it sorted.

hay-kot commented 1 year ago

I just tried both, completely new and clean installation of Vivaldi and Chrome, but the issue persist :/

Up until the most recent builds I've been able to replicate the issue but now the PWA works as expected. As such, there's not much else I can do without any kind of ability to reproduce the issue. I would make sure / try the following

You've got the latest frontend container (nightly).
You've restarted your container since updating
Verify your browser isn't deleting cookies and session data on exit of the PWA (common in firefox)
Delete all installed versions of the PWA and clear session/cookies before re-installing
Try the PWA on the demo site and see if the same issue occurs https://demo.mealie.io/

If none of that works, I'd need to get some information from your browser console on your phone which is a whole thing... Let me know!

Zipties 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.

Good bot.

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

Same here on the latest nightly.

@hay-kot are you still looking for someone to send debug logs?

SimSon2710 commented 1 year ago

Sorry I haven't answered anymore, but I was lost under a heap of work. I just updated mealie, and now it seems to work fine!

m10x commented 1 year ago

It works now for us, too! :) Thank you

mealie-recipes / mealie