Как перехватить приглашение установки приложения в Angular PWA? - PullRequest
Новая
       67

Как перехватить приглашение установки приложения в Angular PWA?

0 голосов
/ 13 февраля 2019

Я создал PWA, используя Angular guide .У меня проблема с перехватом баннера установки приложения.Я использую этот код, чтобы отложить его до более поздней точки: 

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;
  console.log("Intercepting the app install banner prompt");

  setTimeout(function() {
    deferredPrompt.prompt();
  }, 20000);

  // 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;
  });
});

Мой файл манифеста: 

{
  "name": "TreadWill",
  "short_name": "TreadWill",
  "theme_color": "#2a3b3d",
  "background_color": "#2a3b3d",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Когда я пытаюсь этот код в localhost, сообщение включается в консоль.журнал регистрируется, но через 20 секунд я получаю сообщение об ошибке: 

Uncaught (in promise) DOMException

в этой строке: 

deferredPrompt.prompt();

Когда я размещаю код и пробую его на мобильном устройстве, приложениеБаннер установки отображается сразу, а не через 20 секунд.

Я попытался поместить этот код в сам файл index.html, в отдельный файл js и вызвать его в файле index.html.Создание сервиса и включение почти аналогичного кода в файл .ts.Ничего не сработало.Хотя я пробую js решения из отчаяния, я бы предпочел угловые решения проблемы.В идеале я хотел бы перехватить и сохранить событие beforeinstallprompt в глобальной переменной и запросить событие в разных точках.

Как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 17 февраля 2019

Ссылки, приведенные в ответе Матиаса, помогли мне решить проблему.Я просто добавляю несколько моментов, которые явно не упомянуты в ответе, но могут помочь кому-то еще.

  • Баннер установки приложения может отображаться только в некоторых действиях пользователя.Например - нажатие кнопки.Это не может быть запрошено через setTimeout.
  • В настоящее время перехватывает beforeinstallprompt и показывает его позже, работает в Chrome и Edge, потому что Chrome и Edge запускают событие автоматически, когда пользователь посещает сайт.Firefox не запускает событие beforeinstallprompt и, следовательно, он не работает в Firefox.
0 голосов
/ 16 февраля 2019

Вы, вероятно, делаете это правильно, но согласно этой статье :
"Мини-инфобар появится, когда сайт соответствует критериям добавления на главный экран, независимо от о том, предотвращаете ли вы функцию Default () в событии beforeinstallprompt или нет. "
Так что для меня это также показывает сразу.

Пит ЛеПейдж (@petele) - хороший человек, чтобы следить за обновлениями A2HS в Твиттере.

Вот тестер Add To Home Screen (A2HS), который я построил.Внизу страницы есть ссылка на исходный код.Не стесняйтесь использовать все, что может быть полезным.Я недавно не обновлял его до самой последней версии angular.Но все должно работать нормально, так как это основной код.
https://a2hs.glitch.me

...