Как реализовать установку на экран домой через кнопку?

Question

[LBo39]

Недавно заинтересовался PWA технологией в разработке сайтов.Решил создать тестовый сайт + добавить кнопку,которая бы добавляла приложение на экран домой.Смотрел уже везде где только можно,но у меня вечно что-то идет не так...
В общем и целом решил скачать готовый проект и порыться в его исходном коде и сравнить с собственным,однако следющий вопрос. Вот пример Pwa сайта: https://mdn.github.io/pwa-examples/a2hs/ При переходе на него сразу видна кнопка add to home screen,но,когда я запустил этот же сайт на локальном хосте ( предварительно скачав его отсюда:https://github.com/mdn/pwa-examples/tree/master/a2hs) то эта самая кнопка не появляется..... То есть при ребуте страницы она появляется на несколько секунд,а потом исчезает. Подскажите в чем может быть проблема и что надо сделать для ее решения.
(все что можно было я уже подключил, и очевидно поменял адресацию файлов на то место где они хранятся уже у меня.Если все же понадобится,то могу приложить исходники кода сюда)
Заранее спасибо!

Answer 1

[Николай]

Случайно не сталкивались с этой статьей https://web.dev/i18n/ru/customize-install/?

Answer 2

[Гульназ]

// Code to handle install prompt on desktop

let deferredPrompt;
const addBtn = document.querySelector('.КЛАСС_КНОПКИ');
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', () => {
    // 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;
    });
  });
});