Vue PWA 关闭应用后黑屏

Question

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

Problem is:

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

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

var deferredPrompt;

LINK

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”的路由添加到您的默认路由器中。使用与 '/'

相同的 view/component

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

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

Vue PWA 关闭应用后黑屏

Vue PWA blank screen after closing the app

google-chrome

vue.js

google-chrome-app

progressive-web-apps