Icon not displaying in Firebase background service worker notifications with JavaScript

Although my firebase-messaging-sw.js is functioning properly in displaying background notifications, I have encountered an issue where the icon does not show up even though notification.title and notification.click_action are working correctly.

Here is the code snippet from my service worker's messaging.setBackgroundMessageHandler:

messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
    body: 'Background Message body.',
    icon: '/image/logo.png'
};

return self.registration.showNotification(notificationTitle,
    notificationOptions);

This is where I included the link to my icon: https://i.sstatic.net/JOLcZ.png

And this is the visual outcome:

https://i.sstatic.net/GskwO.png

Your assistance is greatly appreciated. Thank you for your time.

Answer №1

It took me several days of trial and error, but I finally solved the issue by including {"icon":"/image/logo.png"} in the FCM Server Post request body instead of keeping it within firebase-messaging-sw.js as the default location.

Additionally, I discovered that the IIS server must serve static content for the hosted web project to allow logo.png to be accessed by the public.

Here is my updated Post Request Body, formatted in JSON:

{
"notification": {
    "title": "New Appointment Requested",
    "body": "5 to 1",
    "icon": "/image/logo.png",
    "click_action": "<host>/subpage"
},
"to": "token"
}

Answer №2

Upload your image to the main directory and verify it.

For more information, you can visit this link:

https://github.com/firebase/quickstart-js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

Technique for adding an element's attribute to a span based on the element's class

I am aiming to display a maximum of three selections within my h4 tag, based on the number of options that the user clicks. For instance, the h4 tag should show 'Department1, Department 2,' if no elements are selected or have the class active, i ...

Exploring the Possibilities with NodeJS and Socket.IO

I've encountered an interesting issue with my use of NodeJS and Socket.io. The server receives data through ZeroMQ, which is working perfectly fine. However, when there are a large number of connected clients (over 100), it appears that there is a de ...

Unable to retrieve the $onAuth property with angularfire

I am currently working on integrating firebase auth into my app. The login controller is functioning properly, but I am facing an issue where the user gets logged out immediately after logging in. .controller('LoginCtrl', function ($scope, $loca ...

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

How can I simply show a specific value from an object in Vue?

I've created a Vue application that filters messages and displays them on a page. Currently, when a user selects a message from the list, the entire JSON data associated with that message is shown on the page. However, I want to only display a specifi ...

Tips for creating a new route within a separate component in React JS without causing the previous one to unmount

I am currently developing a recipe website using React JS and React Router. On the HomePage, I have set up a display of cards, each representing a preview of a recipe. Each card is enclosed within a <Link></link> tag. When one of these cards ...

Elaborate on the specific error message within the .error() jQuery function

Currently, I am utilizing .error() as the callback for .post(). Here is an example of how I am using it: $.post("url", function(data){}) .error(function(){ alert("some error"); }); If an error occurs, I would like to display a detailed error ...

Are your Promises.all functions executing at the incorrect timing?

I can't seem to understand why Promise.all is not working as expected. Even though the log shows that data for "Streak" and "Last Activity" is successfully retrieved towards the end, I want Promise.all to fetch the data only when everything is filled ...

Nested function unable to assign values to variables

I am currently working on a function in Discord.js that collects users who reacted to a message. I have managed to gather all the user IDs inside a nested function, but when trying to return the array to the caller, it does not seem to work as expected. He ...

Issue with Nextjs 13: Unable to locate 'src/app/dashboard/layout.tsx' (deleted optional layout)

Deciding to start a fresh Nextjs 13.4.5 project, I set up an app directory. Within the app directory, I created a new dashboard directory and added page and layout components. Everything seemed to be functioning smoothly with two layout components - one i ...

In what ways can you shut down an electron application using JavaScript?

My Electron app is running an express server. Here is the main.js code: const electron = require("electron"), app = electron.app, BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow () { ma ...

unable to apply angular measurement inside quotation marks

What is the reason for this issue: <ul class="dropdown-menu"> <li ng-repeat="choice in dropDownItems"> <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a> </li> </ul> However, this code wo ...

Why does this switch case statement fail to effectively replace the elements of the text in order to unravel this JavaScript problem?

Question I need help converting special characters to HTML entities in a string: &, <, >, " (double quote), and ' (apostrophe). My Code function convertHTML(str) { let tempArr = ['a']; let newArr = []; let regex ...

Perform a search within an iframe

Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...

Arrays Filtering without Containing Elements

Is there a utility function in Knockout to filter one array based on another array, or will I need to use JavaScript? First : var obj1 = [{ "visible": "true", "id": 1 }, { "visible": "true", "id": 2 }, { "visible": "true", "id": ...

Error loading Azure Active Directory web form: Server returned a 401 status code for the requested resource

I recently made changes to my web site (incorporating a web form and entity framework) to use AAD connection, following the guidance in this insightful blog post. However, I am encountering an issue where scripts and css files are not loading properly. Th ...

Ways to send distinct values to updateMany $set in mongodb

I have encountered an issue while trying to generate unique passwords for each document in a MongoDB collection. The current function I am using, however, generates the same password for every user. Below is the code snippet that I am working with: func ...

Having trouble properly sending gender value through javascript/ajax functionality

Within my database, the gender_id attribute is configured as an enum with options ('M', 'F') and M serves as the default selection. Gender Selection Form <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <label>Gend ...

Puppeteer throwing an error when querying selectors cannot be done (TypeError: selector.startsWith is not a supported function)

I recently installed Puppeteer and ran into an issue when trying to query a selector. I keep receiving a TypeError: selector.startsWith is not a function error. I attempted to resolve the problem by tweaking the core code and adding toString(), but unfort ...