Angular 7 PWA 配置推送通知

Question

我正在使用 angular 7 创建一个 PWA，但我正在努力处理推送通知。

我按照 this 的教程学习和 this使用 SWPush 和 Vapid key 对。我能够订阅和取消订阅，我的服务器部分也能正常工作，但不幸的是，教程不包括在应用程序中显示实际通知。

据我了解，通知应该会自动弹出，而无需在代码中调用它，对吗？。您只需订阅，ngsw 会完成剩下的工作。不幸的是，他们没有出现在我的案例中。我只能通过在代码中手动调用它们来显示它们，如下所示:

 this.swPush.messages.subscribe(
  (notification: any) => {
    console.log("received push message", notification);

    let options = {
      body: notification.body,
      icon: "assets/icon/favicon.png",
      actions: <any>notification.actions,
      data: notification.data,
      vibrate: [100, 50, 10, 20, 20]
    };
    this.showNotification(notification.title, options)
  },

  err => {
    console.error(err);
  }
);

[...]

showNotification(title: string, options: NotificationOptions) {
    navigator.serviceWorker.getRegistration().then(reg => {
      reg.showNotification(title, options).then(res => {
        console.log("showed notification", res)
      }, err => {
        console.error(err)
      });
   });
}

但这似乎只有当应用程序/页面在前台时才有效。否则我会收到类似“该网站已在后台更新”的通知。显然我在这里做错了什么。但是什么？

1. 当应用程序处于后台时，我必须做什么才能显示通知？

2. 有没有办法处理通知上的点击事件？

这里的 ng 文档真的很少。

Answer 1

经过大量的努力，我找到了一些东西并将其分享给其他人:

深入研究通过运行 build --prod 创建的 ngsw-worker.js 有这个函数:

onPush(msg) {
    // Push notifications without data have no effect.
    if (!msg.data) {
        return;
    }
    // Handle the push and keep the SW alive until it's handled.
    msg.waitUntil(this.handlePush(msg.data.json()));
}
...
handlePush(data) {
    return __awaiter$5(this, void 0, void 0, function* () {
            yield this.broadcast({
                type: 'PUSH',
                data,
            });

            if (!data.notification || !data.notification.title) {
                return;
            }

            const desc = data.notification;

            let options = {};
            NOTIFICATION_OPTION_NAMES.filter(name => desc.hasOwnProperty(name))
                .forEach(name => options[name] = desc[name]);
            yield this.scope.registration.showNotification(desc['title'], options);
    });
}

因为它看起来像 angular 订阅并为您显示通知，所以没有必要在您自己的代码中订阅和显示它。我的发送库 ( https://github.com/laravel-notification-channels/webpush ) 有问题，它发送的有效负载是这样的:

payload = {"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}

但是 Angular 显然期望是这样的:

payload = {
    "notification":{"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}
}

导致 ngsw-worker.js 中的这一行失败:

if (!data.notification || !data.notification.title) {
    return;
}

因此，没有显示任何通知，但浏览器在后台报告有更新。希望这对某人有帮助。