阻止在应用程序处于活动状态时显示推送通知（不在后台）答案

【问题标题】：Prevent displaying push notifications when app is active (not in background)阻止在应用程序处于活动状态时显示推送通知（不在后台）
【发布时间】：2019-01-08 11:13:27
【问题描述】：

所以我跳上了服务人员的火车并推送通知。它似乎运作良好，但是当用户在选项卡中处于活动状态时，我无法弄清楚如何抑制浏览器显示的通知，即选项卡被聚焦。即使在用户使用应用程序时显示通知也会给他们带来太多困扰 -> 他们只会关闭它们 -> 如果超过某个阈值，可能会导致消息无法传递。

This document 提到将配置添加到ngsw-config.json，所以我确实放在那里：

"push": {
  "showNotifications": true,
  "backgroundOnly": true
}

无论如何，消息总是会显示出来。

我应该只是简单地订阅消息，将它们作为数据而不是notification 发送并手动显示它们吗？

constructor(swPush: SwPush) {
  if (swPush.isEnabled) {
    swPush.messages.subscribe(message => {
      //display the message if tab is not active
    });
  }
}

如果我这样做，它会在移动设备的后台运行吗？

编辑：这种在代码中决定是否显示消息的方法在 Firefox 中有效，但在 Chrome 中我得到'The site has been updated in the background'message。

坦率地说，我不知道如何继续前进，因为我完全不知道在 SwPush.messages Observable 中做什么才能让 Chrome 开心。 :(

【问题讨论】：

你看npmjs.com/package/activity-detector了吗？
@MaximeGélinas 不，但这不是问题。这与用户是否空闲无关，问题是我确实希望在应用程序在后台运行时显示消息（浏览器在 PC 上启动，随时在移动设备上[？]）而不是当应用程序运行时打开，在活动标签中可见或作为 PWA 启动。
我已将标题更改为可能不那么混乱。

标签： angular push-notification service-worker progressive-web-apps

【解决方案1】：

我知道有人问这个问题已经有一段时间了，但以防万一它对其他人有帮助。

手动处理如何。实施焦点和模糊事件。您还可以包含“beforeunload”事件侦听器以捕获应用从焦点变为关闭的情况。

如果你使用上述事件来捕获一个isActive状态，然后确保只有在isActive为false时才发送通知。

  @HostListener('window:focus')
  onFocus() {
    isActive = true;
  }

@HostListener('window:blur')
  onBlur() {
    isActive = false;
  }

  // Before window is closed
  @HostListener('window:beforeunload')
  beforeunloadHandler() {
    isActive = false;
  }

【讨论】：