Sort out online notifications using client-side technology

When a notification is sent to a specific topic, such as...

const message = {
  data: { cost: 49 },
  topic: 'apple'
}
admin.messaging().send(message)

The question revolves around controlling/filtering notifications based on user-defined criteria like >= 50. Is it possible using Firestore or localStorage?

How could this be achieved?

I'm assuming it can be accomplished through messaging-sw.js, but how exactly and is it feasible?

Alternatively, are there any better solutions or am I overlooking something?

javascriptfirebasefirebase-cloud-messagingservice-workerfirebase-notifications

Answer №1

Scenario 1: Dealing with messages when your web app is active

Scenario 2: Handling messages when your app is in the background

  • To store the user's data, utilize IndexedDB, as IndexedDB data can be accessed in the service worker
  • Customize the function setBackgroundMessageHandler in the firebase-messaging-sw.js file according to these guidelines to manage user options
  • Note: If you include notification fields in your message payload, the setBackgroundMessageHandler callback will not trigger; instead, the SDK will display a notification based on the payload.

It is advisable to implement filtering on the server-side rather than client-side for better efficiency

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

Execute an AJAX post request to the identical PHP page (utilizing the Jquery Form Plugin)

I am in the process of developing a new web interface using JavaTMP, an AJAX-based admin template. After spending time understanding its functionality, I have created a page with a form to allow users to create projects within my software. Typically, creat ...

javascriptphphtmlajax

Error in AJAX transmission

I am encountering an unusual issue with the jQuery ajax function in my script. The problem is specific to my friend's computer, as I am not experiencing any difficulties on my own computer. While attempting to utilize the error function property to ...

javascriptjqueryajax

AngularJS drag and drop functionality with the ability to edit items

Hello, I am a newcomer to AngularJS and would really appreciate some guidance starting from the basics. My current task involves dragging and dropping items (source) to create a dynamic tree structure (target). Please refer to the provided screenshot for ...

javascriptjqueryangularjsdrag-and-dropangular-ui-router

What's the reason my JavaScript isn't functioning properly?

Brand new to coding and I'm delving into the world of Javascript for the first time. In my code, there's a checkbox nestled within an HTML table (as shown below). <td><input type="checkbox" id="check1"/> <label th:text="${item.co ...

javascriptjqueryhtmlcheckbox

When attempting to log API results in Next.js, a TypeError occurs because the property is undefined

I'm encountering a rather unusual error. In my Next.js app, I am attempting to console log the results of an API call to see what data I receive. The API function is responsible for verifying if a user is logged in, and if they are, I render a specifi ...

javascriptreactjsnext.js

Upon making an axios get request to localhost:4000/, the responseUrl redirects to localhost/ which leads to a 404 error

When enhancing a server extension on an already existing same-server backend, I encountered some issues: import server from 'myserver'; import { verifyJwt } from 'jwt.middleware'; import axios from 'axios'; const app = server ...

javascriptnode.jsexpressaxios

Creating a jQuery plugin that allows for multiple plugin calls with customizable settings

Here is a jQuery plugin that I created: (function($){ $.fn.myPlugin = function(options) { if (!this.length) { return this; } var settings = $.extend(true, {}, $.fn.myPlugin.defaults, options); $w=$(this); $w.bind("click ...

javascriptjqueryobjectjquery-plugins

Implementing row updates using contenteditable feature in Vue.js

I am currently exploring how to detect and update the changes made in a 'contenteditable' element within a specific row. <tbody> <!-- Iterate through the list and retrieve each data --> <tr v-for="item in filteredList& ...

javascriptvue.jsvuejs3

Utilize the context API to efficiently share information from the parent to both its children and sibling children

I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...

javascriptreactjs

What is the technique for transmitting a child element in VueJS?

Is there a way to include HTML code in a VueJS component and have it render properly within the component? <my-vue-component> <div> ect... </div> </my-vue-component> ...

javascripthtmlvue.js

The combination of MUI CardContent and flexBox seems to have issues when used in conjunction with typography and chips

Take a look at this React code using MUI. It's designed to create a Card that showcases Character Information. const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => { return ( <Card sx={{ maxWidth: 256, borderRadius: 4 }}&g ...

javascriptcssreactjsflexboxmaterial-ui

encountering an issue: file or directory does not exist, unable to open 'rds-combined-ca-bundle.pem'

I recently downloaded AWS secure socket for my Node server and integrated it into my index.js folder. However, I encountered an error that reads: "Error: ENOENT: no such file or directory, open 'rds-combined-ca-bundle.pem'. Could someone help me ...

javascriptnode.jsamazon-web-servicesexpress

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

I have the user state stored in my Vue store, but when I try to access it like this: let isLoggedIn = store.getters.isLoggedIn Instead of getting a simple true or false, I see this in the console: ƒ isLoggedIn (state) { return state.user ? true : false ...

javascriptvue.jsvuex

Simple Method to Retrieve one document from Firebase v9 in a React Application

Is it possible to retrieve a document from Firebasev9 using a slug instead of an id with the useDocument Hook? useDocument Hook import { useEffect, useState } from "react" // firebase import import { doc, onSnapshot } from "firebase/firesto ...

javascriptreactjsfirebasegoogle-cloud-firestore

Failed NodeJS API POST request flow issue

I am currently in the process of creating a Node and Express API specifically designed for user authentication. The data is being stored using MongoDB. When I used Postman to submit a /post request, I included the following object: { "username": ...

javascriptnode.jsmongodbexpressmongoose

The combination of "object HTMLDivElement" with outerHTML and replaceWith() yields no results

I can't seem to figure out why this code is failing. I'm attempting to replace a DIV entirely using replaceWith from jQuery. I've tried multiple variations, but nothing seems to work. When I try outerHTML instead of html, I get [object HTML ...

javascriptarraysdomreplacewithouterhtml

Issue with ng-selected not functioning properly

I am facing an issue where the ng-selected is assigned as true but the option is not being selected. The following is my controller code: .controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) { var userData = dataServi ...

javascriptangularjs

Enjoy the convenience of Meteor listening for multiple events and only firing once

One interesting feature of Meteor is the ability to set eventHandlers for templates. I have a text input field where users can type, paste, and more. So far, I've been using this code: Template.myTemplate.events({ 'keyup #inputfield': ...

javascriptjqueryeventsmeteor

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

javascripthtmljqueryselectcustom-data-attribute