Question 49270 in Javascript Question posted in
A very good W3school tutorial can be found here.

Web push notification with Image – Javascript

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.

Tags:

2

Answers


  1. 0

    Service Worker registration may not be done correctly. Before this code, you can manually register the Service Worker by using the navigator.serviceWorker.register() function. Can you try?

    Login or Signup to reply.
  2. 0

    You are using the icon feature to show an image, but this feature should only be used for a favicon or a small icon to display on a mobile device screen. For picture notifications, you need to use the image feature. correct use of the first code block. you need to check if you are getting the image url correctly. Make sure you have specified message.notification.image correctly and that it is accessible.

    If url is correct check below steps.

    Image size: The maximum supported image size for Firebase image notifications is 1MB. So make sure the size of the image you are sending is less than 1MB.

    CORS: Note that if the image URL is hosted on a different server than the Firebase server, the image server must comply with CORS policies. Otherwise, the image cannot be uploaded by Firebase and displayed in the notification. Check the image server’s CORS policies and edit if necessary.

    Permissions: Make sure your browser’s notification and image permissions are set correctly. In some browsers, special permissions may be required for picture notifications. For example, in the Chrome browser, you need to grant "Push notifications" and "Notifications" permissions for picture notifications.

    Browser compatibility: Firebase picture notifications may not be supported by some browsers and operating systems. So, check if the browser and device you sent your notification to are supported.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search