关闭应用后Vue PWA黑屏答案

【问题标题】：Vue PWA blank screen after closing the app关闭应用后Vue PWA黑屏
【发布时间】：2019-02-28 14:34:39
【问题描述】：

我创建了一个 PWA 应用程序，它运行良好。

问题是：

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

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

var deferredPrompt;

链接

https://gogrocery.tk

【问题讨论】：

标签： google-chrome vue.js google-chrome-app progressive-web-apps

【解决方案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 呈现应用程序。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

经过数周的猜测和尝试，您刚刚拯救了我们。谢谢！！
你也可以使用默认路由而不是写两条路由 { path: '*', name: 'HomeDefault', component: HomeView, },