如何在create-react-app项目中的服务工作者文件上添加通知图标

时间:2018-08-28 01:15:05

标签: reactjs firebase push-notification firebase-cloud-messaging progressive-web-apps

我正在处理一个由create-react-app样板创建的react项目,并且我渴望利用PWA方面,例如推送警报。因此,我制作了一个用于推送警报的服务工作者文件,该文件由如下所示的google firebase支持。

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

firebase.initializeApp({
  messagingSenderId: "416......630"
})

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function(payload) {
  const title = payload.notification.title;
  const options = {
    body: payload.notification.body,
    icon: '/images/icon/appicon.png',
    badge: '/images/icon/appicon.png'
  }
  return self.registration.showNotification(title, options);
})

self.addEventListener("notificationclick", function(event) {
  const clickedNotification = event.notification;
  clickedNotification.close();
  const promiseChain = clients
    .matchAll({
      type: "window",
      includeUncontrolled: true
    })
    .then(windowClients => {
      let matchingClient = null;
      for (let i = 0; i < windowClients.length; i++) {
        const windowClient = windowClients[i];
        if (windowClient.url === feClickAction) {
          matchingClient = windowClient;
          break;
        }
      }
      if (matchingClient) {
        return matchingClient.focus();
      } else {
        return clients.openWindow(feClickAction);
      }
    });
  event.waitUntil(promiseChain);
})

这是服务工作者文件,还有另一个文件可以初始化firebase cloude消息传递,它们工作得很好。尽管我声明了showNotification的选项,但我看不到图标。

服务工作者文件位于public文件夹中,而appicon.png文件位于public/images/icon文件夹中。我已经尝试用部署的URL替换文件夹路由,但是没有用。

0 个答案:

没有答案