SOLVED

Installed PWA - blank screen on launch

%3CLINGO-SUB%20id%3D%22lingo-sub-1472146%22%20slang%3D%22en-US%22%3EInstalled%20PWA%20-%20blank%20screen%20on%20launch%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1472146%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20web%20PWA%20at%20%3CA%20href%3D%22https%3A%2F%2Fourcardgame.ca%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fourcardgame.ca%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAfter%20opening%20it%20in%20Edge%2C%20the%20option%20(icon%20with%20plus%20symbol)%20to%20install%20the%20App%20appears%20in%20the%20address%20bar.%26nbsp%3B%20Clicking%20that%20and%20choosing%20%22Install%22%20works%20fine.%26nbsp%3B%20The%20PWA%20opens%20in%20a%20stand%20alone%20window.%26nbsp%3B%20Later%2C%20if%20I%20use%20Edge%20to%20visit%20the%20same%20site%2C%20the%20address%20bar%20shows%20an%20icon%20with%20a%20tooltip%20of%20%22To%20open%20this%20link%2C%20choose%20an%20app%22.%20Clicking%20that%20icon%20opens%20the%20standalone%20window%20with%20the%20PWA%20running%20in%20it.%26nbsp%3B%20That%20works%20fine.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20if%20I%20later%20click%20the%20Windows%2010%20start%20menu%20and%20click%20on%20the%20icon%20to%20start%20the%20PWA%2C%20the%20window%20opens%20and%20is%20completely%20blank.%26nbsp%3B%20If%20I%20open%20the%20DevTools%20window%2C%20the%20network%20log%20seems%20to%20be%20fine%20and%20shows%20evidence%20that%20the%20index.html%20file%20is%20loaded%20along%20with%20resources%20referenced%20in%20that%20file.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20the%20screen%20is%20blank.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20before%2C%20if%20I%20first%20open%20the%20web%20page%20and%20click%20to%20open%20it%20in%20the%20app%2C%20it%20opens%20the%20window%20and%20works%20fine.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20ideas%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1472146%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPWA%20progressive%20web%20app%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1472390%22%20slang%3D%22en-US%22%3ERe%3A%20Installed%20PWA%20-%20blank%20screen%20on%20launch%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1472390%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F702705%22%20target%3D%22_blank%22%3E%40glenlittle%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20saw%20what%20you%20have%20said%20and%20I%20am%20also%20seeing%20the%20same.%20I%20would%20recommend%20you%20send%20feedback%20through%20the%20in-app%20feedback%20tool(Alt%2BShift%2BI)%20in%20Microsoft%20Edge%20with%20the%20diagnostics%20data%20attached%20which%20will%20help%20the%20PWA%20team%20to%20look%20after%20and%20resolve%20your%20issue.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1472836%22%20slang%3D%22en-US%22%3ERe%3A%20Installed%20PWA%20-%20blank%20screen%20on%20launch%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1472836%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F537238%22%20target%3D%22_blank%22%3E%40theshaunsaw%3C%2FA%3E%26nbsp%3BThanks%20for%20the%20suggestion.%20I've%20done%20that%20now.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1472872%22%20slang%3D%22en-US%22%3ERe%3A%20Installed%20PWA%20-%20blank%20screen%20on%20launch%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1472872%22%20slang%3D%22en-US%22%3E%3CP%3EIt%20turns%20out%20that%20the%20problem%20was%20in%20the%20PWA's%20manifest.json%20file%20as%20described%20here%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fstackoverflow.com%2Fquestions%2F54928050%2Fvue-pwa-blank-screen-after-closing-the-app%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F54928050%2Fvue-pwa-blank-screen-after-closing-the-app%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBy%20default%2C%20the%20manifest%20file%20had%20%22.%2Findex.html%22%20as%20the%20start%20URL.%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%22start_url%22%3A%20%22.%2Findex.html%22%0A%7D%20%20%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChanging%20that%20to%20be%20%22%2F%22%20resolved%20the%20problem.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I have a web PWA at https://ourcardgame.ca

 

After opening it in Edge, the option (icon with plus symbol) to install the App appears in the address bar.  Clicking that and choosing "Install" works fine.  The PWA opens in a stand alone window.  Later, if I use Edge to visit the same site, the address bar shows an icon with a tooltip of "To open this link, choose an app". Clicking that icon opens the standalone window with the PWA running in it.  That works fine.

 

However, if I later click the Windows 10 start menu and click on the icon to start the PWA, the window opens and is completely blank.  If I open the DevTools window, the network log seems to be fine and shows evidence that the index.html file is loaded along with resources referenced in that file.

 

But the screen is blank.

 

As before, if I first open the web page and click to open it in the app, it opens the window and works fine.

 

Any ideas?

3 Replies

@glenlittle 

I saw what you have said and I am also seeing the same. I would recommend you send feedback through the in-app feedback tool(Alt+Shift+I) in Microsoft Edge with the diagnostics data attached which will help the PWA team to look after and resolve your issue.

@TheShaunSaw Thanks for the suggestion. I've done that now.

Best Response confirmed by glenlittle (New Contributor)
Solution

It turns out that the problem was in the PWA's manifest.json file as described here: https://stackoverflow.com/questions/54928050/vue-pwa-blank-screen-after-closing-the-app

 

By default, the manifest file had "./index.html" as the start URL.

{
 "start_url": "./index.html"
}  

 

Changing that to be "/" resolved the problem.