angular - Angular 和自定义安装中的 PWA

Question

问这个问题我觉得很愚蠢，但我对 Angular 和 javascript 很陌生，所以我在这里不知所措。我的项目运行良好（相当简单），并对其进行了所有更改以使其成为 PWA（确实如此），但有一件事我无法理解。

我的问题是我的应用似乎没有触发该beforeinstallprompt操作。我已经运行了 lighthouse，我的应用程序完全可以安装并且 pwa 准备就绪（https、service worker、manifest 等），但我无法追踪为什么没有触发这个事件（控制台什么也没显示）。

实际上，问题更大，因为我一生都无法理解我如何才能真正构建一个自定义的，比如说，用于安装 pwa 的按钮。我已经读过这个和这个，我已经看过很多次了，除了大量相同的，或多或少的问题，但我无法弄清楚一些基本的东西。例如，我到处都可以看到这个监听事件并将其存储以供以后使用的片段：

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 非常漂亮和整洁，但我很愚蠢？

感谢您花时间阅读本文，非常感谢。

标签： angularinstallationprogressive-web-apps