javascriptpush-notificationfirebase-cloud-messagingweb-push

Web push notification with Image


I have a web app and I sent a notification on Firebase dashboard with image but It didn't displaying with image. Firstly my code it was.

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();
                }
            }
        });
    };

I tried like this;

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();
                }
            }
        });
    };

but it didn't work

Notification is look like this;

My notification

What should I do.


Solution

  • I changed use PWA.

    I deleted 'disable: process.env.NODE_ENV !== 'production'. ' in my next.config.js

    Thanks for all answers I will close this question.