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

Question

I have an angular app running on angular 7 and i'm trying to turn it on PWA, i installed pwa 0.6.8 and everything is working (in localhost) except the add to home screen who doesn't show up when i am running it on galaxy S5 from the google dev tolls 我有一个在angular 7上运行的angular应用程序，我试图在PWA上打开它，我安装了pwa 0.6.8，并且一切正常（在localhost中），但添加到主屏幕时却没有显示它来自Google开发人员收费的银河S5

When i run the audit it says that it is installable for the user : Result of the audit 当我运行审核时，它说它可以为用户安装：审核结果

here is my index.html 这是我的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>

my manifest : 我的清单：

{
  "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"
    }
  ]
}

and ngsw.config.json 和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)"
        ]
      }
    }
  ]
}

what am i missing ? 我想念什么？

Thank you 谢谢

Answer 1

A web app can only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits. 只有在访问该网站至少两次且两次访问之间至少有五分钟时，才能将Web应用程序添加到主屏幕。

This guide tells you how you can simulate those events for development: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps 本指南告诉您如何模拟这些事件以进行开发： https : //developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Answer 2

I would suggest you to try to host the project in Firebase (you can also choose another provider). 我建议您尝试将项目托管在Firebase （也可以选择其他提供程序）。

It is free and it gives already HTTPS out of the box. 它是免费的，并且开箱即用地提供了HTTPS。 You can create a project in Firebase and deploy the solution in less than 10 minutes. 您可以在Firebase中创建一个项目，并在不到10分钟的时间内部署解决方案。 Then you can test for real with any mobile device whether you app prompts for a A2HS. 然后，您可以使用任何移动设备进行真实测试，无论您的应用是否提示输入A2HS。

I started writing a series of articles about PWAs, if you are interested to learn more about it you can have a look. 我开始撰写有关PWA的一系列文章，如果您有兴趣了解更多有关PWA的信息，请查看。 The second post covers exactly the A2HS topic: How to install a PWA on a user's device . 第二篇文章恰好涵盖了A2HS主题：如何在用户设备上安装PWA 。

Answer 3

Add to home screen will appear if your application fullfills following criteria 如果您的应用程序满足以下条件，则会显示“添加到主屏幕”

manifest.json 的manifest.json
app hosted over https server : eg: you can use netlify 通过https服务器托管的应用程序：例如：您可以使用netlify
service worker with atleast one fetch event. 至少有一个访存事件的服务工作人员。

You can find the entire code for it at 您可以在以下位置找到完整的代码

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

demo at https://newpwa.netlify.com 演示https://newpwa.netlify.com

The code is basic & you can easily understand & integrate in your angular app 该代码是基本代码，您可以轻松理解并集成到您的角度应用程序中

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

问题描述

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