Question

我有一个在angular 7上运行的angular应用程序，我试图在PWA上打开它，我安装了pwa 0.6.8，并且一切正常（在localhost中），但添加到主屏幕时却不显示我正在从Google dev收费的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)"
        ]
      }
    }
  ]
}

我想念什么？

谢谢

Answer 1

仅当访问该网站至少两次（两次访问之间至少有五分钟）时，才能将网络应用添加到主屏幕。

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

Answer 2

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

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

我开始撰写有关PWA的系列文章，如果您有兴趣了解更多有关PWA的信息，请查看。第二篇文章恰好涵盖了A2HS主题：How to install a PWA on a user's device。

Answer 3

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

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

您可以在

上找到其完整代码。

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

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

该代码是基本代码，您可以轻松理解并集成到您的角度应用程序中

我的角度应用程序上没有显示“添加到主屏幕”

3 个答案: