javascript 带图像的Web推送通知

pgpifvop  于 2023-04-28  发布在  Java
关注(0)|答案(3)|浏览(127)

我有一个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();
                }
            }
        });
    };

但是没有用
通知是这样的;

我该怎么办。

bjp0bcyl

bjp0bcyl1#

我换了PWA。
我删除了'disable:process.env.NODE_ENV!== 'production'.“在我的下一个。config.js
谢谢你的回答,我将结束这个问题。

ep6jt1vc

ep6jt1vc2#

Service Worker注册可能未正确完成。在此代码之前,您可以使用navigator.serviceWorker.register()函数手动注册Service Worker。你能试试吗

vjrehmav

vjrehmav3#

您正在使用图标功能显示图像,但此功能只能用于在移动终端屏幕上显示收藏夹图标或小图标。对于图片通知,您需要使用图像功能。正确使用第一个代码块。你需要检查你是否得到正确的图像URL。请确保您正确指定了message.notification.image,并且可以访问它。
如果URL正确,请检查以下步骤。

**镜像大小:**Firebase镜像通知支持的最大镜像大小为1MB。因此,请确保您发送的图像大小小于1MB。
**CORS:**请注意,如果镜像URL托管在Firebase服务器以外的其他服务器上,则镜像服务器必须符合CORS策略。否则,Firebase无法上传图像并在通知中显示。检查映像服务器的CORS策略,并根据需要进行编辑。
**权限:**确保浏览器的通知权限和图片权限设置正确。在某些浏览器中,图片通知可能需要特殊权限。例如,在Chrome浏览器中,您需要为图片通知授予“推送通知”和“通知”权限。
**浏览器兼容性:**部分浏览器和操作系统可能不支持Firebase图片通知。因此,请检查您向其发送通知的浏览器和设备是否受支持。

相关问题