关闭应用程序后Vue PWA空白屏幕

Question

我创建了一个 PWA 应用程序，它工作正常。

问题是：

用户在桌面上安装 PWA，它工作正常，但在关闭并重新打开后显示空白页面。

同样在移动设备上，它在将网站添加到主页后显示空白页面。

var deferredPrompt;

关联

https://gogrocery.tk

Answer 1

问题出在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"
}

将浏览器用户安装index.html为起始 URL 后，不会呈现应用程序。您应该更改start_url为/或已/index.html呈现应用程序。

Answer 2

将“/index.html”的路由添加到默认路由器中。使用与“/”相同的视图/组件

...
    routes: [
        { path: '/', name: 'home', component: HomeView },
        { path: '/index.html', component: HomeView }, // Fix for PWA at /index.html
...

注意：不要对“/index.html”使用重定向，它不能解决移动浏览器上的问题:(