如何在Angular PWA中拦截应用程序安装提示? [英] How to intercept app install prompt in Angular PWA?

问题描述

我已使用Angular 准则创建了PWA.我在拦截应用程序安装横幅时遇到问题.我正在使用此代码将其推迟到以后:

I have created a PWA using Angular guidelines. I am facing problem intercepting the app install banner. I am using this code to defer it to a later point:

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中尝试此代码时，console.log中包含的消息将被记录，但是20秒后，我得到一个错误:

When I try this code in localhost, the message included in the console.log is getting logged but after 20 seconds, I am getting an error:

Uncaught (in promise) DOMException

在此行:

deferredPrompt.prompt();

当我托管代码并在移动设备上尝试使用时，应用安装横幅会立即显示，而不是20秒后显示.

When I host the code and try it on mobile, the app install banner shows up instantly instead of after 20 seconds.

我尝试将这段代码放在index.html文件本身中，放在单独的js文件中，然后在index.html文件中调用它.创建服务，并在.ts文件中包含几乎类似的代码.没事.尽管我绝望地尝试了js解决方案，但我还是希望使用Angular解决方案来解决这个问题.理想情况下，我想捕获"beforeinstallprompt"事件并将其存储在全局变量中，并在不同点提示该事件.

I have tried putting this code in the index.html file itself, in a separate js file and calling that in the index.html file. Creating a service and including almost similar code in a .ts file. Nothing has worked. Although I am trying out js solutions out of desperation, I would prefer Angular solutions to the problem. Ideally, I would like to catch and store the 'beforeinstallprompt' event in a global variable and prompt the event at different points.

如何解决这个问题?

推荐答案

您可能做得正确，但是根据 对我来说，它也立即显示出来.

You are probably doing it properly, but according to this article:
"The mini-infobar will appear when the site meets the add to home screen criteria, regardless of whether you preventDefault() on the beforeinstallprompt event or not."
So for me also, it shows immediately.

Pete LePage(@petele)是在Twitter上关注A2HS更新的好人.

Pete LePage (@petele) is a good person to follow on twitter for updates to A2HS.

这是我构建的添加到主屏幕(A2HS)"测试仪.页面底部有一个指向源代码的链接.随意使用任何可能有用的东西.我最近没有将其更新为angular的最新版本.但是，由于它是基本代码，因此它们仍然应该可以正常工作.
https://a2hs.glitch.me

Here is the Add To Home Screen (A2HS) tester I built. There is a link to the source code on the bottom of the page. Feel free to use anything that may be helpful. I have not updated it recently to the most current version of angular. But it should all still work fine since it's basic code.
https://a2hs.glitch.me

这篇关于如何在Angular PWA中拦截应用程序安装提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！