打开应用程序时不显示网络推送通知

Question

我已经在 PWA 上实现了网络推送通知，并且一切正常，但是当打开 PWA 应用程序时，通知也会显示，这使得它们不太有用。

来自服务器的有效负载是：

    {
  "notification": {
    "title": "Dylan",
    "body": "test message",
    "icon": null,
    "badge": null,
    "requireInteraction": true,
    "action_url": null,
    "vibrate": [
      100,
      50,
      100
    ],
    "data": {
      "convId": 7343039,
      "badge": 1,
      "messageType": 1,
      "message": "test message",
      "fromUserId": 1256086,
      "pushNotificationType": 1,
      "badgeCount": 4
    },
    "actions": []
  }
}

在客户端使用

Angular SwPush

创建订阅。

我的桌面 Chrome 浏览器以及 IOS pwa 应用程序都存在相同的问题：即使应用程序位于前台也会出现通知。 是否可以只在应用程序处于后台/关闭时才显示它们？

Answer 1

您可以创建一项服务来检查不活动或离开屏幕的情况 我已经实现了类似的事情。

import { Injectable } from '@angular/core';
import { EventService } from './event.service';

@Injectable({
  providedIn: 'root'
})
export class InactivityService {

  private _isScreenActive: boolean;

  constructor(private eventService: EventService) { }

  public set isScreenActive(isActive: boolean) {
    this._isScreenActive = isActive;
  }

  public get isScreenActive() {
    return this._isScreenActive;
  }

  /**
  * @description register visibility change event to dom.
  * @isScreenActive false when user is away from tab, true when back on tab.
  */
  applyEvent() {
    let visibilityHidden, visibilityChange;
    // Opera 12.10 and Firefox 18 and later support
    if (typeof document.hidden !== 'undefined') {
      visibilityHidden = 'hidden';
      visibilityChange = 'visibilitychange';
    } else if (typeof (document as any).mozHidden !== 'undefined') {
      visibilityHidden = 'mozHidden';
      visibilityChange = 'mozvisibilitychange';
    } else if (typeof (document as any).msHidden !== 'undefined') {
      visibilityHidden = 'msHidden';
      visibilityChange = 'msvisibilitychange';
    } else if (typeof (document as any).webkitHidden !== 'undefined') {
      visibilityHidden = 'webkitHidden';
      visibilityChange = 'webkitvisibilitychange';
    }

    document.addEventListener(visibilityChange, () => {
      if (document[visibilityHidden]) {
        this.isScreenActive = false;
      } else {
        this.isScreenActive = true;
        this.eventService.broadcast(this.eventService.eventNames.SCREENACTIVEAGAIN, {});
      }
    });
  }
}