Vue PWA blank screen after closing the app

Question

I have created a PWA Application and it works fine.

Problem is:

User installing the PWA on Desktop and it works fine but after closing and re-opening it show blank page.

Also on mobile it show blank page after adding the website to home page.

var deferredPrompt;

LINK

https://gogrocery.tk

Answer 1

The problem is with the manifest.json start_url.

{
  "name": "front-end",
  "short_name": "front-end",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Once installed the browser users index.html as the starting URL and that doesn't render the app. You should either change start_url to / or have /index.html render the app.