'Why is My Angular PWA Hanging at the Splash Screen?

My Angular PWA is hanging up on the splash screen. It doesn't always do it and I haven't been able to find a way to reproduce it when I want; it seems like it's randomly hanging up sometimes when I open the app.

Here is what it looks like in the debug screen when it hangs up on the splash screen:

enter image description here

You can see that the app window is shown as "untitled"

If I press the back button in that case, the screen appears to refresh or reload and then it goes back to the home screen. When I open the app again, it works:

enter image description here

Here you can see the window "ClientApp."

It loads properly every time after going back to the home screen and reopening the app. I'm not sure exactly what events trigger the problem, but I do know if I get rid of the browser from my activities then it happens more often, if not always.

Here is a look at the manifest.json:

{
"name": "",
"short_name": "Example",
"theme_color": "#000000",
"background_color": "#000000",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [{
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png",
        "purpose": "maskable any"
    },
        {
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
            "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png",
        "purpose": "maskable any"
    },
    {
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable any"
    }
  ]
}

If someone can give me an idea of how to fix this or steps to troubleshoot it, I sure would appreciate it. Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source