Chrome 未在我的 PWA 中顯示“添加到主屏幕”

Question

我按照 Google 的第一個 PWA 教程創建了自己的項目https://my-pwa-77d8a.firebaseapp.com 。 一切看起來都很好：

• 該項目有一個manifest.json文件
• 我在 Firebase 上使用 HTTPS
• 該代碼具有<meta name="mobile-web-app-capable" content="yes">標簽
• 我的manifest.json文件包含：圖標規格、名稱、short_name、start_url
• 我使用 Vue.js 作為我的主要框架，其余的都是用 vanilla JS 構建的
• 服務工作者設置並運行沒有錯誤
• 控制台沒有顯示錯誤

清單文件

  {
    "short_name": "PizzaApp",
    "name": "My delicious PWA",
    "icons": [
      {
        "src": "img/launcher-icon-2x.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-3x.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-4x.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait"
  }

我可以從移動設備和桌面手動添加到主屏幕。 但 Chrome 從不顯示添加到主屏幕橫幅。 怎么了？

已解決

正如下面所指出的，我的服務工作者試圖緩存丟失的offline.html文件。 我創建了文件，清除了手機的緩存，一切正常。

Answer 1

問題是您的offline.html文件（ https://my-pwa-77d8a.firebaseapp.com/offline.html ）返回 404。