我正在处理一个由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替换文件夹路由,但是没有用。