Как добавить кнопку, чтобы предложить пользователю добавить на домашний экран прогрессивного веб-приложения - PullRequest
0 голосов
/ 21 октября 2018

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

Мой код для script.js

let deferredPrompt;

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;
  btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.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;
    });
});

html code:

<script type="text/javascript" src="/static/script.js"></script>
   <div class="wit-log" style="float:left;margin-left:6.8%">



            <a href="/logout">
            <button class="header logout"
                    style="border-width:0;border-radius:50px;color:white;background-color:#2F5FD2;font-size:1rem;line-height:1.5;padding: .8rem .8rem;padding-left:.8rem; padding-right:.8rem;font-weight:300;width:130px;margin-left:0px;clear:both;display:flex;justify-content:center;font-size:15px;margin:0 auto;outline:none">
                <span style="color:white">Log Out</span>
            </button>
                </a>

            **<button id="btnAdd">Click To Add To Homescreen</button>**
        </div>



    </div>


</div>

Вышеуказанное не работает.Я знаю, что приглашение сработало, но нужно ли мне что-то еще делать?

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