Добавить на домашний экран не отображается в моих угловых приложениях - PullRequest
Новая
       15

Добавить на домашний экран не отображается в моих угловых приложениях

2 голосов
/ 06 июля 2019

У меня есть угловое приложение, работающее на Angular 7, и я пытаюсь включить его на PWA, я установил pwa 0.6.8 и все работает (на локальном хосте), за исключением добавления на главный экран, который не отображается, когдая запускаю его на galaxy S5 из Google Dev Tolls

Когда я запускаю аудит, он говорит, что его можно установить для пользователя: Результат аудита

здесьмой 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)"
        ]
      }
    }
  ]
}

что мне не хватает?

Спасибо

Ответы [ 3 ]

1 голос
/ 08 июля 2019

Я бы посоветовал вам попробовать разместить проект в Firebase (вы также можете выбрать другого провайдера).

Это бесплатно и уже дает HTTPS из коробки. Вы можете создать проект в Firebase и развернуть решение менее чем за 10 минут. Затем вы можете проверить на любом мобильном устройстве, действительно ли ваше приложение запрашивает A2HS.

Я начал писать серию статей о PWA, если вы хотите узнать больше об этом, вы можете посмотреть. Второй пост посвящен именно теме A2HS: Как установить PWA на устройство пользователя .

1 голос
/ 09 июля 2019

Добавить на домашний экран появится, если ваше приложение заполнит следующие критерии

  1. manifest.json
  2. приложение, размещенное на сервере https: например: вы можете использовать netlify
  3. работник сервиса, по крайней мере, с одним событием выборки.

Весь код для него можно найти в

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

демо в https://newpwa.netlify.com

Код является базовым, и вы можете легко понять и интегрировать его в свое угловое приложение

1 голос
/ 06 июля 2019

Веб-приложение может быть добавлено на домашний экран, только если сайт посещается не менее двух раз, и между посещениями - не менее пяти минут.

В этом руководстве рассказывается, как можно моделировать эти события для разработки: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

...