时间戳

首页 > 解决方案 > Angular向所有用户发送紧急警报

sql - Angular向所有用户发送紧急警报

问题描述

我想向所有最终用户发送紧急警报。就像“紧急”广播通知一样，因为如果我要更新新版本，他们必须在半小时之前保存他们的作品。

我希望它现在清楚了。一旦检查了 UI 的设计，您就会对此有所了解。

这是概念设计： https ://i.stack.imgur.com/wRqnU.png 像这样我想向所有人发出紧急警报

标签： sqlangularasp.net-web-api

解决方案

如果它是实时和 Web Socket 实现，您可以使用SocketIOWeb socket或SocketIO来发出消息。否则你必须使用Angular PWA来推送通知。

试试这个为PWA您现有的 Angular 应用程序添加功能：

ng add @angular/pwa

然后你必须使用 node web-push 生成一个VAPID密钥对。安装网络推送：

npm install web-push -g

使用以下命令生成 VAPID 密钥对：

web-push generate-vapid-keys --json

然后你必须订阅推送通知。这是一个示例：

app.component.ts

@Component({
    selector: 'app-root',
    template: `
        <button class="button button-primary" (click)="subscribeToNotifications()">
          Subscribe
        </button>
`})
export class AppComponent {

    readonly VAPID_PUBLIC_KEY = "BLBx-hf2WrL2qEa0qKb-aCJbcxEvyn62GDTyyP9KTS5K7ZL0K7TfmOKSPqp8vQF0DaG8hpSBknz_x3qf5F4iEFo";

    constructor(
        private swPush: SwPush,
        private newsletterService: NewsletterService) {}

    subscribeToNotifications() {

        this.swPush.requestSubscription({
            serverPublicKey: this.VAPID_PUBLIC_KEY
        })
        .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())
        .catch(err => console.error("Could not subscribe to notifications", err));
    }
}

有关更多信息，请参阅此处的完整指南：Angular Push Notifications: a Complete Step-by-Step Guide

推荐阅读