angular - 角度服务工作者 swpush.messages 响应（通知）对象未加载

Question

我最近开始研究Angular Server Worker. 我已经成功地使推送通知工作，但我需要通知数据作为回报（用于应用程序内消息）swPush.messages.subscribe(data // <-- this is empty)。

这是我到目前为止所做的。

创建posts.component.ts

// Here I'm sending notification data. *Works fine*

model = { title: '', category: '', description: '' };
constructor(private http: HttpClient) { }

ngOnInit(): void {}
  submit(model: any) {

  console.log('model', model);
  // here I'm sending notification data to *node.js Api*
  let req = this.http.post('http://localhost:3000', {notification: {title: model.title, data: model, vibrate: [100]}});
  req.subscribe((obs) => {
    console.log('obs', obs);
  }, (err) => {
    console.error('err', err);
  });
}

显示posts.components.ts

// <-- here I'm getting response in *swPush.messages.subscribe(data)* and its empty.
export class ShowPostsComponent implements OnInit {

  notification: any;
  loaded: boolean = false;
  publicKey = 'BBkVm5IPDR5w-rxw244QyRB9GDv5PIHzWx8bh-6F5j99L_Hjs6Pz36XoXLcpgI6LaZTzhi5AnexAXaitXkPadyo';

  constructor(private swPush: SwPush, swUpdate: SwUpdate) { }

  ngOnInit(): void {
    this.pushNotification().then(() => {
      this.swPush.messages.subscribe((data) => {
        this.notification = data;
        console.log(this.notification); // <-- here it prints the whole object with notification.

[![enter image description here][1]][1]

            console.log(this.notification.data); // **Problem** <-- here it shows **undefined**. But I need data for In-App-Messaging.


            if (this.notification.data)
              this.loaded = true;
          })
        })
      }
      // <-- request subscription is working perfectly.
      async pushNotification() {
        if(this.swPush.isEnabled) {
          this.swPush.requestSubscription({
            serverPublicKey: this.publicKey
          });
        }
      }
    }

这是我的 nodejs 文件

index.js

const webPush = require('web-push');
const app = require('express')();
const cors = require('cors');
const bodyParser = require('body-parser');

let publicKey = 'BBkVm5IPDR5w-rxw244QyRB9GDv5PIHzWx8bh-6F5j99L_Hjs6Pz36XoXLcpgI6LaZTzhi5AnexAXaitXkPadyo';
let privateKey = 'meBpuRD1OfgUw-g9NCYssu1cw3aLCIR83Ktp0AKS0gY';
webPush.setVapidDetails('mailto:[e-mail]', publicKey, privateKey)

let options = {
    "endpoint":"https://fcm.googleapis.com/fcm/send/dF3FY5wFI1Y:APA91bG5DNt4cmLC9Bv9Qy204mSbf0_o5Xpyc1rzWd1nA8rVEy8v94Y57jJ74gLntDMekkR5mEUkFWZz9s4Q3iZpOl7_h44Koh0KYQLyUYgN6S4z4roISxcMdC4QY32VwHuc1RyFz2C5",
    "expirationTime":null,
    "keys":{
        "p256dh":"BLH-k9C9ITeZr1IM26jK159fTQsJ-QnhWaZIOyz3N4GM1H3OueJBfM7e5G4pUxseQephs75bi_rYHs6oOHcKuN4",
        "auth":"J5CAUF5jQIGPDSb3fwPZzQ"
    }
}
app.use(cors())
app.use(bodyParser.json({extended: true}))

app.post('/', (req, resp) => {
    console.log(req.body); // <-- here it recieves the data from *create-posts*
    // <-- here it sends the notification.
    webPush.sendNotification(options, JSON.stringify(req.body)).then((res) => {
        // console.log(req);
        resp.send(res)
    }).catch((err) => {
        resp.send({error: err})
        console.error(err);
    })
})

app.listen(3000, () => {
    console.log('server running at port 3000');
});

请帮助解决这个问题。

也欢迎任何类型的建议。

标签： angularpush-notificationservice-worker