關閉應用程序后，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'使用重定向，它不能解決移動瀏覽器上的問題:(