Кнопка PWA Добавить на главный экран в Chrome с Angular 4 - PullRequest
Новая
       45

Кнопка PWA Добавить на главный экран в Chrome с Angular 4

0 голосов
/ 23 мая 2018

Я начал работать над PWA с Workbox3.И это работает довольно удивительно до сих пор.Я добавил код к кнопке Добавить на главный экран , чтобы пользователь мог добавить его на главный экран мобильного.Но окно с предложением добавить значок на главном экране показывает только один раз.После того, как я добавил этот значок на главный экран, затем, если я удалю его и попробую снова, он ничего не отобразит.

Я проверяю Настольный Chrome из Chrome DevTool-> Application-> Mainfest sectoin-> Add to Home Screen .Мой Сервисный работник установлен правильно и работает нормально.

Не показывает никаких ошибок, нет консоли ничего.Так что я не могу отследить, в чем проблема.

Вот мой код, который я уже сделал для добавления на главный экран.Я добавил эту кнопку в нижний колонтитул. 

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The user has had a postive interaction with our app and Chrome
        // has tried to prompt previously, so let's show the prompt.
        deferredPrompt.prompt();

        // Follow what the user has done with the prompt.
        deferredPrompt.userChoice.then(function(choiceResult) {

          console.log(choiceResult.outcome);

          if(choiceResult.outcome == 'dismissed') {
            console.log('User cancelled home screen install');
          }
          else {
            console.log('User added to home screen');
          }

          // We no longer need the prompt.  Clear it up.
          deferredPrompt = null;
        });
      }
    });

    window.addEventListener('appinstalled', (evt) => {
      app.logEvent('a2hs', 'installed');
      console.log("dfadf    ");
    });

Она показывает только до того, как событие ProminPort запустило эту консоль только один раз.Если я снова попробую, то ничего не покажу.

1 Ответ

0 голосов
/ 23 мая 2018

Если вам нужно снова показать приглашение на установку на некоторых устройствах, где вы можете изменить флаг Chrome, вы можете сделать это, включив этот флаг, 

chrome://flags/#bypass-app-banner-engagement-checks

Браузеры показывают приглашение на установку только один раз, еслисайт соответствует всем критериям PWA, и пользователь посещает сайт достаточно много раз, удовлетворяя порогу вовлеченности (который не является жестко определенным ни одним поставщиком браузеров или W3C).

В вашем случае он показал приглашение, которое вы использовали, но удалил установленное приложение, что означает, что вам нужно подождать, чтобы достичь порога участия, установленного браузером (который вы переопределяете с помощью вышеуказанного флага).Снова нет официальной документации или стандартов о том, как часто браузеры проверяют наличие установленных приложений и выдают повторные запросы.В то время как работа этих подсказок все еще находится в процессе развития (некоторые списки браузеров / ОС на данный момент даже не отображаются), этот флаг экономит усилия разработчиков по тестированию.

...