Манифест: не добавить на домашний экран - PullRequest
0 голосов
/ 16 мая 2019

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

Это мой код:

index.php

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="manifest" crossorigin="use-credentials"  href="manifest.json">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

</html>

manifest.json

{
    "short_name": "BetaPage",
    "name": "BetaPage",
    "theme_color": "#4A90E2",
    "background_color": "#F7F8F9",
    "display": "standalone",
    "icons": [
      {
        "src": "img/apple.png",
        "type": "image/png",
        "sizes": "48x48"
      },
      {
        "src": "img/grapes.png",
        "type": "image/png",
        "sizes": "96x96"
      },
      {
        "src": "img/lemon.png",
        "type": "image/png",
        "sizes": "144x144"
      },
      {
        "src": "img/orange.png",
        "type": "image/png",
        "sizes": "192x192"
      }
    ],
    "start_url": "index.php"
  }

service-worker.js

self.addEventListener('install', function(event) {
    console.log("installed");
});

self.addEventListener('activate', function(event) {
      // Perform some task
    console.log("activated");
    });

self.addEventListener('fetch', function(event) {
    console.log("fetched");
      event.respondWith(
        fetch(event.request).catch(function() {
          return caches.match(event.request);
        })
      );
    });

Но все равно не показываетбаннер, нет ошибок в моем манифесте, хотя.enter image description here

это мой служащий

enter image description here

Как это исправить?В настоящее время я делаю это на моем локальном хосте.

ОБНОВЛЕНИЕ Хорошо, мне удалось выполнить эту работу, используя это руководство https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0

Моя проблема сейчас заключается в том, что приглашение выполняетне показывать в firefox.На следующем рисунке изображены оба Firefox, рабочий и мой локальный хост.

РАБОЧИЙ ОБРАЗЕЦ enter image description here

МОЯ РАБОТА enter image description here

Как вы можете видеть, у другого есть другой значок, в то время как у моей работы нет, но баннер работает на chrome tho

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Установите плагин lighthouse в Chrome, запустите его на своей странице и просмотрите результаты.

0 голосов
/ 16 мая 2019

Посмотрите на этот пост: Советы и рекомендации PWA

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...