Firebase 推送通知点击不起作用

Question

我在使用 firebase 实现通知时遇到问题。点击事件不起作用。我正在使用发送不记名令牌的 HTTP 1 版本。

{
  "message": {
    "token": "8888****usertoken****8888",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

我还尝试了 click_action、action 和许多其他变体，但都不起作用。

我使用的是 8.0.0 版

根据此链接https://firebase.google.com/docs/cloud-messaging/js/send-multiple 上的文档，我应该可以使用 fcm_options 来实现它。

我尝试了实现messaging.onBackgroundMessage 的解决方法，但是当我实现此方法并使用self.registration.showNotification 时，通知会显示两次。一个由浏览触发，另一个由此代码触发。

注册 self.addEventListener('notificationclick' 似乎只有在我实现 onBackgroundMessage 时才有效。

我遵循了文档，但它让我发疯。

这是我的服务工作者代码：

importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js');

var firebaseConfig = {
    apiKey: "xxxxxx",
    authDomain: "xxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxx.firebaseio.com",
    projectId: "xxx-xxx",
    storageBucket: "xxx-xxx.appspot.com",
    messagingSenderId: "222222222",
    appId: "1:2222:web:22222"
};
console.log("fire base messaging")

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();


messaging.onBackgroundMessage(function (payload) {
    console.log("onBackgroundMessage", payload)
    var dataFromServer = payload.notification;
    var notificationTitle = dataFromServer.title;
    var notificationOptions = {
        body: dataFromServer.body,
        image: dataFromServer.image,
        data: {
            url: "https://google.com"
        }
    };
    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

////Code for adding event on click of notification
self.addEventListener('notificationclick', function (event) {
    console.log("notificationclick", event)
    var urlToRedirect = event.notification.data.url;
    event.notification.close();
    event.waitUntil(self.clients.openWindow(urlToRedirect));
});

Answer 1

原来我将整个 URL 传递给 webpush.fcm_options.link = "https://google.com"，我所要做的就是只传递相对路径，如 webpush.fcm_options.link = "/mypage ”。

所以发送的请求是这样的：

{
  "message": {
    "token": "8888****usertoken****8888",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "/mypage" 
      }
    }
  }
}

我没有在文档中看到它只是相对路径。它甚至声明需要 HTTPS。我花了几个小时在这个上，我希望它可以帮助其他人。

https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#WebpushFcmOptions

Answer 2

我遇到了同样的问题。我添加了一个notificationclick 事件处理程序。您可以在通知事件中使用data 参数来打开一个新选项卡或聚焦已打开的选项卡。

您已经拥有的代码很好，现在添加监听器如下所示：

// messaging.onBackgroundMessage(...);

function handleClick (event) {
  event.notification.close();
  // Open the url you set on notification.data
  clients.openWindow(event.notification.data.url)
}
self.addEventListener('notificationclick', handleClick);

这些资源可能会有所帮助

• similar question on SO
• showNotification
• notificationclick

Answer 3

通知正在使用legacy API，但不幸的是，单击通知仍然没有任何作用。这是我发送通知的代码。

var notification = {
  'title': title,
  'body': body,
  'icon': 'hourglass.png',
  'click_action': router.resolve(route).href
}
var payload = {
  'notification': notification,
  // 'webpush': {
  //   'fcm_options': {
  //     'link': '/' + router.resolve(route).href
  //   }
  // }
}
if(registrationIds.length == 1) {
  payload['to'] = registrationIds[0]
} else if( registrationIds.length > 1){
  payload['registration_ids'] = registrationIds
}
return new Promise((resolve, reject) => {

  if (registrationIds.length) {
    fetch('https://fcm.googleapis.com/fcm/send', {
      'method': 'POST',
      'headers': {
        'Authorization': 'key=' + key,
        'Content-Type': 'application/json'
      },
      'body': JSON.stringify(payload)
    }).then(function(response) {
      resolve(true)
    }).catch(function(error) {
      console.error('sendNotification error', error);
      reject(false)
    })

  }
  else {
    console.log('This timer has no registered clients.')
    reject(false)

  }

})

编辑：我认为我的大部分困惑源于使用 V1 API 查找示例并将它们与旧 API 混合。我需要click_action 而不是有效载荷中的fcm_options.link。我更新了我的代码，现在正在按预期工作。