我已经尝试了很多方法来通过Express.js并使用服务工作者来使PWA Angular正常工作,但是它们都没有达到我的预期。 我想做一个简单的网站。如果用户订阅,它将通过Express.js发出通知
我是这个PWA和Service Worker的新手。
我正在附上我到目前为止已经完成的代码。
reloadCache() {
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm("New version available. Load New Version?")) {
window.location.reload();
}
});
}
}
subscribeToNotification(){
if (this.swUpdate.isEnabled) {
this.swPush.requestSubscription({
serverPublicKey: this.VAPID_KEY
})
.then(sub =>{
this._ws.postSubscription(sub).subscribe();
})
}
}
postSubscription(sub: PushSubscription){
return this._http.post('http://localhost:3000/subscribe', sub)
}
在express.js =>
app.get('/', (req, res)=>{
res.send('this is push notification server use post')
});
app.post('/subscribe', (req, res)=>{
let sub = req.body;
res.set('Content-Type', 'application/json');
webpush.setVapidDetails(
"mailto:gmail.com", //why this part is used..if possible please explain it
"public-key",
"private-key"
);
let payload= JSON.stringify({
"notification":{
"title":"demo",
"body": "did it",
"icon": ""
}
});
Promise.resolve(webpush.sendNotification(sub, payload))
.then(()=> res.status(200).json({
message: "notification send"
}))
.catch(err=>{
console.error(err);
res.sendStatus(500);
})
})
app.listen(3000, ()=> {
console.log("Server Up");
});
它是一个工作代码。但是我已经通过使用web-push generate-vapid-keys --json
生成了vapid和onclick按钮上,我添加了一个触发器来获取通知。 我想让用户订阅并将其存储在数据库中时自动获得公共的VAPID。然后我想从数据库向用户发送通知。
不知道进一步。 请帮助我解决这个问题。