如何通过VAPID使用服务和express.js在pwa角度向用户发送通知

时间:2019-05-14 07:11:43

标签: javascript node.js angular typescript progressive-web-apps

我已经尝试了很多方法来通过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。然后我想从数据库向用户发送通知。

不知道进一步。 请帮助我解决这个问题。

0 个答案:

没有答案