使用与Angular 5兼容的代码提醒您的用户有关您的应用程序的任何相关通知或更改。
在今天的基于网络的应用程序开发中，主要功能之一是信息通知。通知过程或机制总是可以帮助人们按时传递信息并提醒人们他们正在等待的任务。最近对移动用户的一项研究表明，移动用户每天平均收到63条通知，其中大部分来自消息或电子邮件应用。
关于推送通知推送通知基本上是一种用于向用户显示警报信息的服务。此服务将显示哪些用户想要在特定时间从任何特定应用或服务看到的警报消息。这些消息可以来自任何媒体源，如SMS服务，电子邮件服务或由应用程序本身定义的自定义服务。
有时，推送通知也称为服务器推送通知，因为推送通知是从设备上的应用程序传递的，而不需要客户端的任何特定请求。基本上，这是拉通知和推送通知之间的基本区别：对于拉通知，客户端必须向服务器发送信息请求，而推送通知服务器向客户端发送信息，而不从客户端收到任何请求。实际上，最终用户必须选择接受警报，最终用户需要在安装应用程序或启动应用程序时接受该设置。
推送通知实际上让我们的应用程序扩展到浏览器之外，并且它是与用户互动或交互的绝佳强大方式。它基本上执行简单的操作，例如提醒用户有关重要事件，显示图标或显示小文本消息，然后通过单击该消息，用户可以被重定向到相关的网站或应用程序。
什么是推送通知通知总是显示用户设备屏幕上弹出的消息。此通知可以由正在运行的任何应用程序在本地触发，也可以在应用程序未运行时将从服务器获取的通知信息推送到用户设备。这将吸引用户，让他们按时获得信息，而不必记住它。推送通知主要依赖于两个API--通知API和推送API。Notifications API让应用程序在用户屏幕上显示通知信息。Push API允许服务人员进程从服务器获取推送消息，即使应用程序未处于活动状态。
不同类型的通知通常，通常有三种不同类型的通知可用。他们是：
事务性通知 - 事务性通知通常用于通知用户有关特定事件的信息，例如已发送出货的包。
系统通知 - 这种类型的通知用于通知用户有关产品的新功能或任何物品或特别优惠，例如购买特定物品的特殊折扣。
用户通知 - 这种类型的通知用于通知用户来自朋友或其他来源的新消息，如电子邮件，社交网络消息，基于应用程序的自定义消息。
推送通知功能推送通知必须包含以下特征：
通知 - 消息需要显示给用户应用程序UI（即在浏览器中）
推送消息 - 消息必须从服务器发送到客户端，而不需要客户端的任何请求
推送通知 - 需要创建通知以响应推送消息
通知API - 需要配置接口或服务层以向用户显示通知。
推送服务 - 将推送消息从服务器端路由到客户端的过程。每个浏览器都有自己的实现来显示推送消息。
Web推送如何工作每个浏览器都通过自己的系统管理推送通知，通常称为推送服务。首先，用户需要为该网站上的推送通知授予权限; 通过接受权限用户可以将应用程序订阅到浏览器推送服务。这将创建一个特殊的订阅对象，其中包含推送服务的“端点URL”（每个浏览器都有所不同）和公钥。我们将推送消息发送到此URL，推送服务将其发送到浏览器中的正确客户端。
为了在Angular框架中实现推送通知，我们需要开发一个Angular服务，它实际上执行在浏览器中填充通知消息的主要工作。
push.notification.service.ts的示例代码import {Injectable} from '@angular/core';import {Observable} from 'rxjs/Observable';@Injectable()export class PushNotificationsService {public permission: Permission;constructor() {this.permission = this.isSupported() ? 'default' : 'denied';}public isSupported(): boolean {return 'Notification' in window;}requestPermission(): void {let self = this;if ('Notification' in window) {Notification.requestPermission(function(status) {return self.permission = status;});}}create(title: string, options ? : PushNotification): any {let self = this;return new Observable(function(obs) {if (!('Notification' in window)) {console.log('Notifications are not available in this environment');obs.complete();}if (self.permission !== 'granted') {console.log("The user hasn't granted you permission to send push notifications");obs.complete();}let _notify = new Notification(title, options);_notify.onshow = function(e) {return obs.next({notification: _notify,event: e});};_notify.onclick = function(e) {return obs.next({notification: _notify,event: e});};_notify.onerror = function(e) {return obs.error({notification: _notify,event: e});};_notify.onclose = function() {return obs.complete();};});}generateNotification(source: Array < any > ): void {let self = this;source.forEach((item) => {let options = {body: item.alertContent,icon: "../resource/images/bell-icon.png"};let notify = self.create(item.title, options).subscribe();})}}export declare type Permission = 'denied' | 'granted' | 'default';export interface PushNotification {body ? : string;icon ? : string;tag ? : string;data ? : any;renotify ? : boolean;silent ? : boolean;sound ? : string;noscreen ? : boolean;sticky ? : boolean;dir ? : 'auto' | 'ltr' | 'rtl';lang ? : string;vibrate ? : number[];}现在我们需要开发一个Angular组件，它将调用上述推送通知服务并将消息数据发送到服务，以便通知可以填充。
app.component.pushnotifactions.ts的示例代码import {Component,OnInit,EventEmitter,Output} from '@angular/core';import {PushNotificationsService} from './push-notifications.service';@Component({moduleId: module.id,selector: 'push-notification',templateUrl: 'app.component.pushnotification.html',})export class PushNotificationComponent implements OnInit {private title: string = 'Browser Push Notifications!';constructor(private _notificationService: PushNotificationsService) {this._notificationService.requestPermission();}ngOnInit() {}notify() {let data: Array < any >= [];data.push({'title': 'Approval','alertContent': 'This is First Alert -- By Debasis Saha'});data.push({'title': 'Request','alertContent': 'This is Second Alert -- By Debasis Saha'});data.push({'title': 'Leave Application','alertContent': 'This is Third Alert -- By Debasis Saha'});data.push({'title': 'Approval','alertContent': 'This is Fourth Alert -- By Debasis Saha'});data.push({'title': 'To Do Task','alertContent': 'This is Fifth Alert -- By Debasis Saha'});this._notificationService.generateNotification(data);}}app.component.pushnotifications.html的示例代码
{{title}}
当index.html页面加载时，浏览器要求用户允许确认推送通知，以便在需要时自动填充。
上述通知的代码块完全独立于任何库。此代码块可用于任何Angular版本2或更高版本。
閱讀更多 愛碼農 的文章
