添加到主屏幕没有出现在我的角度应用程序上答案

【问题标题】：Add to home screen doesn't appear on my angular apps添加到主屏幕没有出现在我的角度应用程序上
【发布时间】：2019-07-06 05:24:00
【问题描述】：

我有一个在 Angular 7 上运行的 Angular 应用程序，我正在尝试在 PWA 上打开它，我安装了 pwa 0.6.8 并且一切正常（在 localhost 中），除了添加到主屏幕时没有出现我正在通过谷歌开发收费在 Galaxy S5 上运行它

当我运行审核时，它说它可以为用户安装： Result of the audit

这是我的 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)"
        ]
      }
    }
  ]
}

我错过了什么？

谢谢

【问题讨论】：

A2HS 在 HTTPS 主机上安装后应该可以工作并且 Lighthouse 说它是可安装的。

标签： node.js angular service-worker progressive-web-apps

【解决方案1】：

只有在网站至少被访问两次且两次访问之间至少间隔 5 分钟时，才能将网络应用添加到主屏幕。

本指南告诉您如何模拟这些事件以进行开发：https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

【讨论】：

感谢您的回答。是的，我已经看到了，但我的问题是，在 indentity 部分添加到主屏幕的链接永远不会出现，即使是在指南给出的链接上：events.google.com/io2016

【解决方案2】：

如果您的应用程序满足以下条件，将显示添加到主屏幕

manifest.json
通过 https 服务器托管的应用程序：例如：您可以使用 netlify
至少有一个 fetch 事件的服务工作者。

你可以在

找到它的完整代码

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

演示在 https://newpwa.netlify.com

代码是基本的，您可以轻松理解并集成到您的 Angular 应用中

【讨论】：

【解决方案3】：

我建议您尝试将项目托管在Firebase（您也可以选择其他提供商）。

它是免费的，并且提供了开箱即用的 HTTPS。您可以在不到 10 分钟的时间内在 Firebase 中创建一个项目并deploy 解决方案。然后，您可以使用任何移动设备进行真实测试，无论您的应用是否提示 A2HS。

我开始写一系列关于 PWA 的文章，如果你有兴趣了解更多，可以看看。第二篇文章完全涵盖了 A2HS 主题：How to install a PWA on a user's device。

【讨论】：