Блог

Я чувствую себя очень глупо, спрашивая об этом, но я новичок в Angular и javascript в целом, поэтому я здесь в недоумении. Мой проект работает нормально (он довольно прост) и внес все изменения, чтобы он стал PWA (и это так), но есть одна вещь, которую я не могу понять.

Моя проблема в том, что мое приложение, похоже, не запускает beforeinstallprompt действие. Я запустил lighthouse, и мое приложение полностью доступно для установки и готово к pwa (https, service worker, manifest и т. Д.), Но я не могу отследить, почему это событие не запускается (консоль ничего не показывает).

На самом деле проблема больше, поскольку я ни за что на свете не могу понять, как я могу на самом деле создать пользовательскую, скажем, кнопку для установки pwa. Я читал это и это, и я много раз видел это, кроме тонны одного и того же, более или менее, вопроса в SO, но я не могу понять некоторые основные вещи. Например, я повсюду вижу этот фрагмент, который прослушивает событие и сохраняет его для последующего использования:

 let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});
 

или это, которое запускает процесс пользовательской установки:

 buttonInstall.addEventListener('click', (e) => {
 // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install 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 install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  });
});
 

но дело в том, что я не знаю, должно ли это быть в файле шаблона (например example.component.html ), файл ts (например, example.component.ts), корневой файл ts (например, app.component.ts) или мне нужно создать сервис или что-то совершенно другое. Кто-то может — очень правильно — сказать, продолжайте и делайте свою домашнюю работу, но дело в том, что я, похоже, не могу найти нужный ресурс или я настолько глуп (скорее всего, последнее применимо).

Итак, мой реальный вопрос в том, может ли кто-нибудь указать как можно более подробно, где должен находиться мой код, потому что angular очень красивый и аккуратный, но я глупый?

Спасибо, что нашли время для чтения этого, действительно ценю это.