PWA 推送通知中的重定向 URL答案

【问题标题】：Redirect URL in push notification on PWAPWA 推送通知中的重定向 URL
【发布时间】：2020-02-24 10:32:19
【问题描述】：

目前，我正在 Angular 中启动 PWA。当我单击通知时，我需要拦截一些推送通知并重定向到此应用程序。我正在使用 Firebase 作为推送服务器。今天，我可以收到推送通知，但是当我点击其中一个时，我没有被重定向。我用 Postman 发送请求，我的 HTTP 请求是这样的：

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Authorization: key=XXXX
Content-Type: application/json

{
  "to":"XXXX",
  "content_available": true,
  "notification": {
      "title": "hello",
      "body": "test message",
      "data": {
        "url": "http://myurl.com"
      }
  }
}

在我的网络应用程序中，我收到以下数据：

data:
    gcm.notification.content_available: "true"
    gcm.notification.data: "{"url":"http:\/\/myurl.com"}"
    extra: "juice"
from: "300398521917"
notification:
    title: "hello"
    body: "test message"
collapse_key: "do_not_collapse"

而且，当我点击接收通知时，我的应用程序会拦截事件并记录：

action: ""
notification:
    actions: []
    badge: ""
    body: "test message"
    data: null
    dir: "auto"
    icon: ""
    image: ""
    lang: ""
    renotify: false
    requireInteraction: false
    silent: false
    tag: ""
    timestamp: 1582539931548
    title: "hello"
    vibrate: []

我想在数据部分重新找到我的网址。有人对此有想法吗？

【问题讨论】：

你是如何解决这个问题的？我有同样的问题

标签： firebase http push-notification firebase-cloud-messaging progressive-web-apps

【解决方案1】：

我已经尝试过如下对我有用的方法

{ “到”：“XXXX”， “内容可用”：是的， “通知”： { “标题”：“你好”， "body": "测试信息", "click_action": "https://example.com"

} }

【讨论】：

【解决方案2】：

self.registration.showNotification 方法以 notificationOptions 作为参数。因此，您可以将数据对象（将具有您想要传递的 url 和其他自定义属性）传递到 notificationOption 对象内部，然后在 notificationclick 侦听器中，获取该对象 event.notification.data 并访问所有自定义属性那里。这样你就可以 url 到监听器。

messaging.onMessage(function(payload){
 var dataObj = payload.data; 
 dataObj.someCustomProperty = "xyz";

const notificationOptions = {
  data: dataObj
};

self.registration.showNotification(payload.title,
    notificationOptions);

)

self.addEventListener('notificationclick', function(event){
   const nUrl = event. notification.data.customProperty;

})

【讨论】：