我有一个Web应用程序,我在Firebase Jmeter 板上发送了一个带有图像的通知,但它没有显示图像。首先是我的代码。
const getMessage = () => {
const messaging = firebase.messaging();
messaging.onMessage(async (message) => {
if (Notification.permission === 'granted') {
if (navigator.serviceWorker) {
navigator.serviceWorker.getRegistration().then(async (reg) => {
if (reg) {
await reg.showNotification(message.notification.title, {
body: message.notification.body,
image: message.notification.image
});
}
});
} else {
await Notification.requestPermission();
}
}
});
};
我试着这样做;
const getMessage = () => {
const messaging = firebase.messaging();
messaging.onMessage(async (message) => {
if (Notification.permission === 'granted') {
if (navigator.serviceWorker) {
navigator.serviceWorker.getRegistration().then(async (reg) => {
if (reg) {
const image = await fetch(message.notification.image).then((r) => r.blob());
await reg.showNotification(message.notification.title, {
body: message.notification.body,
icon: URL.createObjectURL(image)
});
}
});
} else {
await Notification.requestPermission();
}
}
});
};
但是没有用
通知是这样的;
我该怎么办。
3条答案
按热度按时间bjp0bcyl1#
我换了PWA。
我删除了'disable:process.env.NODE_ENV!== 'production'.“在我的下一个。config.js
谢谢你的回答,我将结束这个问题。
ep6jt1vc2#
Service Worker注册可能未正确完成。在此代码之前,您可以使用
navigator.serviceWorker.register()
函数手动注册Service Worker。你能试试吗vjrehmav3#
您正在使用图标功能显示图像,但此功能只能用于在移动终端屏幕上显示收藏夹图标或小图标。对于图片通知,您需要使用图像功能。正确使用第一个代码块。你需要检查你是否得到正确的图像URL。请确保您正确指定了
message.notification.image
,并且可以访问它。如果URL正确,请检查以下步骤。
**镜像大小:**Firebase镜像通知支持的最大镜像大小为1MB。因此,请确保您发送的图像大小小于1MB。
**CORS:**请注意,如果镜像URL托管在Firebase服务器以外的其他服务器上,则镜像服务器必须符合CORS策略。否则,Firebase无法上传图像并在通知中显示。检查映像服务器的CORS策略,并根据需要进行编辑。
**权限:**确保浏览器的通知权限和图片权限设置正确。在某些浏览器中,图片通知可能需要特殊权限。例如,在Chrome浏览器中,您需要为图片通知授予“推送通知”和“通知”权限。
**浏览器兼容性:**部分浏览器和操作系统可能不支持Firebase图片通知。因此,请检查您向其发送通知的浏览器和设备是否受支持。