Сервис-работник не устанавливает только добавляет на домашний экран

Question

Я пытаюсь установить pwa на мое мобильное устройство.Я только могу добавить на домашний экран.У кого-нибудь есть идеи, почему это происходит?

Answer 1

Чтобы установить PWA, вам необходимо выполнить следующие требования:

• Веб-манифест с заполнением правильных полей.
• Веб-сайт, который будет обслуживаться сзащищенный (HTTPS) домен.
• Значок, представляющий приложение на устройстве.
• Сервисный работник, зарегистрированный в обработчике событий выборки, для обеспечения работы приложения в автономном режиме (это требуется только в Chromeдля Android в настоящее время).

Вы должны включить свой файл манифеста в раздел вашего index.html, например:

    <link rel="manifest" href="name.webmanifest">

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

{
"background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

Теперь, когда браузер найдет файл манифеста с выполнением всех требований, он запустит файл beforeinstallprompt и, соответственно, вы должны отобразить диалоговое окно A2HS.

ПРИМЕЧАНИЕ:

• Различные браузеры имеют разные критерии для установки или для запуска события beforeinstallprompt.
• Запуск в Chrome 68 на Android (стабильныйв июле 2018 года) Chrome больше не будет отображать баннер добавления на главный экран.Если сайт соответствует критериям добавления на главный экран, Chrome покажет мини-инфобар.

Для диалогового окна A2HS:

Добавьте кнопку в свой документ, чтобы разрешить пользователю делатьустановка

    <button class="add-button">Add to home screen</button>

Обеспечить некоторую стилизацию

.add-button {
  position: absolute;
  top: 1px;
  left: 1px;
}

Теперь в файле JS, где вы регистрируете своего сервисного работника, добавьте следующий код

let deferredPrompt;

//reference to your install button
const addBtn = document.querySelector('.add-button');

//We hide the button initially because the PWA will not be available for 
//install until it follows the A2HS criteria.
addBtn.style.display = 'none';

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});