添加到主屏幕沒有出現在我的角度應用程序上

Question

我有一個在angular 7上運行的angular應用程序，我試圖在PWA上打開它，我安裝了pwa 0.6.8，並且一切正常（在localhost中），但添加到主屏幕時卻沒有顯示它來自Google開發人員收費的銀河S5

當我運行審核時，它說它可以為用戶安裝：審核結果

這是我的index.html

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>BSJP</title>
      <base href="/">

       <meta name="viewport" content="width=device-width, initial- 
     scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
  <link rel="manifest" href="manifest.json">
  <link rel="icon" type="image/png" sizes="144x144" href="assets/icons/icon-144x144.png">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>

  </body>
  </html>

我的清單：

{
  "name": "mvp-front",
  "short_name": "BouffeSqueJtePrepare",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

和ngsw.config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我想念什么？

謝謝

Answer 1

只有在訪問該網站至少兩次且兩次訪問之間至少有五分鍾時，才能將Web應用程序添加到主屏幕。

本指南告訴您如何模擬這些事件以進行開發： https : //developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Answer 2

我建議您嘗試將項目托管在Firebase （也可以選擇其他提供程序）。

它是免費的，並且開箱即用地提供了HTTPS。 您可以在Firebase中創建一個項目，並在不到10分鍾的時間內部署解決方案。 然后，您可以使用任何移動設備進行真實測試，無論您的應用是否提示輸入A2HS。

我開始撰寫有關PWA的一系列文章，如果您有興趣了解更多有關PWA的信息，請查看。 第二篇文章恰好涵蓋了A2HS主題：如何在用戶設備上安裝PWA 。

Answer 3

如果您的應用程序滿足以下條件，則會顯示“添加到主屏幕”

的manifest.json
通過https服務器托管的應用程序：例如：您可以使用netlify
至少有一個訪存事件的服務工作人員。

您可以在以下位置找到完整的代碼

https://github.com/rohan12patil/pwa/tree/A2HS

演示https://newpwa.netlify.com

該代碼是基本代碼，您可以輕松理解並集成到您的角度應用程序中

添加到主屏幕沒有出現在我的角度應用程序上

問題描述

3 個解決方案

解決方案1
1 2019-07-06 05:33:15

解決方案2
1 2019-07-08 12:20:56

解決方案3
1 2019-07-09 09:39:50

添加到主屏幕沒有出現在我的角度應用程序上

問題描述

3 個解決方案

解決方案1 1 2019-07-06 05:33:15

解決方案2 1 2019-07-08 12:20:56

解決方案3 1 2019-07-09 09:39:50

解決方案1
1 2019-07-06 05:33:15

解決方案2
1 2019-07-08 12:20:56

解決方案3
1 2019-07-09 09:39:50