How to send push notifications with Firebase and React

npm i -g firebase-tools

npx degit https://github.com/jeremytenjo/starter-demo.git firebase-messaging-with-react && cd firebase-messaging-with-react && npm i && npm run dev

npm i firebase @useweb/use-firebase-messaging @useweb/use-firebase

firebase init hosting

? What do you want to use as your public directory? public? Configure as a single-page app (rewrite all urls to /index.html)? Yes? Set up automatic builds and deploys with GitHub? No

{  "gcm_sender_id": "103953800507"}

/* eslint-disable no-undef */importScripts('https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js')importScripts('https://www.gstatic.com/firebasejs/8.6.8/firebase-messaging.js')const firebaseConfig = undefined // firebaseConfig is requiredfirebase.initializeApp(firebaseConfig)const messaging = firebase.messaging()messaging.onBackgroundMessage((payload) => {  console.log('[firebase-messaging-sw.js] Received background message ', payload)  const notificationTitle = payload.notification.title  const notificationOptions = {    body: payload.notification.body,    icon: payload.notification.icon || payload.notification.image,  }  self.registration.showNotification(notificationTitle, notificationOptions)})self.addEventListener('notificationclick', (event) => {  if (event.action) {    clients.openWindow(event.action)  }  event.notification.close()})

import React from 'react'import { FirebaseProvider } from '@useweb/use-firebase'import { initializeApp } from 'firebase/app'import { getMessaging } from 'firebase/messaging'const firebaseConfig = undefined // firebaseConfig is requiredconst firebaseApp = initializeApp(firebaseConfig)const messaging = getMessaging(firebaseApp)const envIsDev = process.env.NODE_ENV === 'development'const vapidKey = undefined // vapidKey is requiredexport default function Firebase({ children }) {  return (    <FirebaseProvider      firebaseConfig={firebaseConfig}      firebaseApp={firebaseApp}      envIsDev={envIsDev}      messaging={messaging}      messagingOptions={{        vapidKey,      }}    >      {children}    </FirebaseProvider>  )}

import React from 'react'import ReactDOM from 'react-dom'import Firebase from './services/firebase/firebase'import Router from './pages/router'import Theme from './theme/theme'function App() {  return (    <Firebase>      <Theme>        <Router />      </Theme>    </Firebase>  )}ReactDOM.render(<App />, document.getElementById('root'))

import React, { useEffect } from 'react'import Box from '@mui/material/Box'import Button from '@mui/material/Button'import LinearProgress from '@mui/material/LinearProgress'import useFirebaseMessaging from '@useweb/use-firebase-messaging'import CopyToClipboard from '../../lib/components/CopyToClipboard/CopyToClipboard'import Text from '../../lib/components/Text/Text'import Header from '../../lib/components/_unique/Header/Header'import useSnackbar from '../../lib/components/Snackbar/Snackbar'export default function HomePage() {  const snackbar = useSnackbar()  const firebaseMessaging = useFirebaseMessaging({    onMessage: (message) => {      console.log(`Received foreground message`, message)      snackbar.show({        message: message?.notification?.title || message?.data?.title,      })    },  })  useEffect(() => {    firebaseMessaging.init()  }, [])  return (    <Box>      <Header        title='Firebase Messaging Push Notification Example'        tutorialLink='how-to-send-push-notifications-with-firebase-and-react'        repoLink='https://github.com/jeremytenjo/how-to-send-push-notifications-with-firebase-and-react'      />      {firebaseMessaging.initializing && (        <>          <Text            text='Initializing Firebase Messaging (enable notifications for this page)'            sx={{ mb: 2 }}          />          <LinearProgress />        </>      )}      {firebaseMessaging.error && (        <Text text={firebaseMessaging.error.toString()} sx={{ color: 'red' }} />      )}      {firebaseMessaging.fcmRegistrationToken && (        <>          <Box            sx={{              display: 'grid',              gridAutoFlow: 'column',              justifyContent: 'start',              alignItems: 'center',              mb: 1,              gridGap: '10px',            }}          >            <Text text='FCM Registration Token:' />            <CopyToClipboard text={firebaseMessaging.fcmRegistrationToken}>              <Button>Copy</Button>            </CopyToClipboard>          </Box>          <Text            text={firebaseMessaging.fcmRegistrationToken}            sx={{              width: '100%',              overflowWrap: 'break-word',              fontSize: '14px',              color: 'grey.main',            }}          />        </>      )}    </Box>  )}

const messaging = useFirebaseMessaging({  onFcmRegistrationToken: (fcmRegistrationToken) => {    console.log(fcmRegistrationToken)  },})

        const message = {          data: {            title: `New episodes aired recently!`,            image: `/images/logo/assets/logo.png`,            icon: `/images/logo/assets/logo.png`,            body,            actions: JSON.stringify(actions),          },          tokens: fcmRegistrationToken,        }        functions.logger.info('FCM Message', message)        // https://firebase.google.com/docs/cloud-messaging/send-message#send-messages-to-multiple-devices        const response = await messaging.sendMulticast(message)