Firebase 网络推送通知,点击无效

Gan*_*esh 7 javascript push-notification firebase service-worker firebase-cloud-messaging

自从我试图完成它以来的几天,但我完全被困在这一点上。

这是我的服务工作者文件中的代码

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

firebase.initializeApp({
    messagingSenderId: "xxxxxxxxxxxx"
});

var messaging = firebase.messaging();


messaging.setBackgroundMessageHandler(function(payload) {

    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    var notificationTitle = payload.data.title; //or payload.notification or whatever your payload is
    var notificationOptions = {
      body: payload.data.body,
      icon: payload.data.icon,
      image: payload.data.image,

      data: { url:payload.data.openURL }, //the url which we gonna use later
      actions: [{action: "open_url", title: "View"}]
    };

    return event.waitUntil(self.registration.showNotification(notificationTitle,
      notificationOptions));
});

 self.addEventListener('notificationclick', function(event) {


    console.log('event = ',event);
    event.notification.close();
    event.waitUntil(clients.openWindow(event.notification.data.url));

    switch(event.action){
      case 'open_url':
        window.open(event.notification.data.url);
      break;
      case 'any_other_action':
        window.open(event.notification.data.url);
      break;
    }


}, false);
Run Code Online (Sandbox Code Playgroud)

并且数据采用这种格式

$data=[
        'title' => 'message title',
        'body' => 'description body',
        'icon' => 'https://i.ytimg.com/vi/gXSyP9ga-ag/hqdefault.jpg',
        'image'=>'https://i.ytimg.com/vi/gXSyP9ga-ag/mqdefault.jpg',
        'openURL'=>'https://google.com'
      ];
Run Code Online (Sandbox Code Playgroud)

现在问题很多。

  • 在移动设备上单击推送通知正文时,它不会打开 url,而只会关闭它(仅单击操作按钮会打开链接

  • 我在网上做了一些阅读,发现

    event.waitUntil(clients.openWindow(event.notification.data.url));
    
    Run Code Online (Sandbox Code Playgroud)

    不适用于 safari 和 safari iPhone,有人可以帮助我找出如何实现可与苹果设备一起使用的单击偶数侦听器吗?

任何帮助,将不胜感激

Duc*_*Mai 5

在搜索了许多解决方案后,我找到了自己。这是完整的工作示例:

// firebase-messaging-sw.js (client side)

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

self.addEventListener('notificationclick', function (event) {
  console.debug('SW notification click event', event)
  const url = '<get your url from event>'
  event.waitUntil(
    clients.matchAll({type: 'window'}).then( windowClients => {
        // Check if there is already a window/tab open with the target URL
        for (var i = 0; i < windowClients.length; i++) {
            var client = windowClients[i];
            // If so, just focus it.
            if (client.url === url && 'focus' in client) {
                return client.focus();
            }
        }
        // If not, then open the target URL in a new window/tab.
        if (clients.openWindow) {
            return clients.openWindow(url);
        }
    })
);
})

firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
})

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
})
Run Code Online (Sandbox Code Playgroud)

这是 NodeJS 端的代码:

var admin = require("firebase-admin");
// This is a specific account key file generated through the firebase UI
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});
const payload = {
  "token": "FCM TOKEN HERE",
  "notification": {
    "title":"James",
    body: '14100000'
  },
  "webpush": {
    "fcm_options": {
        "link": "https://google.com"
    },
  },
};
admin.messaging().send(payload).then(res => {
  console.log('SUCCESS ', res);
}).catch(err => {
  console.log(err);
}).finally(() => {
  process.exit(0);
});
Run Code Online (Sandbox Code Playgroud)

问题是如果我放在notificationclick底部,它不会点火,真的不知道为什么,然后我将它移到顶部并且它起作用了。我可以从服务器发送推送通知(使用 firebase-admin),并显示推送通知(当应用程序处于后台时),单击通知打开我想要的链接。