Angular 以角度显示推送通知

App.ts

const VAPID\u PUBLIC=“XXX”
导出类AppComponent{
标题=‘网络’；
构造函数（swPush:swPush，pushService:PushNotificationService）{
如果（swPush.isEnabled）{
swPush
.requestSubscription({
serverPublicKey：乏味的公共，
})
。然后（订阅=>{
pushService.SendSubscriptionTothe服务器（订阅）。订阅（更改=>{
})
})
.catch（console.error）
}
}

push-notification.service.ts

从'@angular/core'导入{Injectable}
从“@angular/common/http”导入{HttpClient}
const SERVER_URL='1〕http://localhost:3000/subscription'
@可注射（）
导出类PushNotificationService{
构造函数（私有http:HttpClient）{}
服务器上的公共发送订阅（订阅：PushSubscription）{
返回此.http.post（服务器URL，订阅）
}
}

server.js

const express=require（'express'）；
const webpush=require（'web-push'）；
const cors=需要（“cors”）；
const bodyParser=require（'body-parser'）；
康斯特公共图书馆=
"XXX";；
const PRIVATE_VAPID='XXX'；
const fakeDatabase=[]；
常量app=express（）；
应用程序使用（cors（））；
use（bodyParser.json（））；
webpush.setVapidDetails（'mailto:domain@test.com",公共(乏味,私人),；
app.post（'/subscription'，（req，res）=>{
const subscription=req.body；
fakeDatabase.push（订阅）；
});
app.post（“/sendNotification”，（请求、回复）=>{
const notificationPayload={
通知:{
标题：“新通知”，
正文：“这是通知的正文”，
},
};
常量承诺=[]；
fakeDatabase.forEach（订阅=>{
承诺，推动(
webpush.sendNotification(
订阅
stringify（notificationPayload）
)
);
});
承诺。所有（承诺）。然后（（）=>res.sendStatus（200））；
});
app.listen（3000，（）=>{
log（'服务器在端口3000上启动'）；
});

• 通过上面的代码，我尝试使用angular和express显示通知。我在

  http://localhost:3000

  然后运行

  ng build--prod

  然后运行http server dist/apps/projectName

• 通知请求正在工作，无论是否允许，单击“允许”，我将收到200条响应（签入网络选项卡chrome dev tools）。但通知消息不会弹出或显示在浏览器中。我需要帮助解决此问题

我试过了你的密码

---

谢谢。

看起来您忘记添加弹出消息了：

pushService.sendSubscriptionToTheServer(subscription).subscribe(change => {

    //-->Here you need to write popup message after notification

})

---

谢谢，有语法吗？因此没有语法，但您可以使用警报或自定义方式显示消息框。