push-reactor
v0.0.4
Published
"push-reactor" is a user-friendly npm package that simplifies the integration of Firebase Cloud Messaging (FCM) for push notifications in your web and mobile applications.
Downloads
27
Readme
Here're some of the project's best features:
- **Simple Integration:** Easily add push notifications to your application with just a few lines of code.
- **Firebase Ready:** Built to work seamlessly with Firebase Cloud Messaging.
- **Customizable:** Configure and style your notifications to match your application's design.
- **Cross-Platform:** Supports web and mobile applications.
npm install push-reactor
yarn add push-reactor
import { GenerateFCMToken } from "push-reactor";
<GenerateFCMToken
firebaseConfig={firebaseConfig}
vapidKey={vapidKey}
inAppNotification={(payload: any) => console.log("in message", payload)}
getDeviceToken={(data) => console.log(data)}
/>
/* eslint-disable no-undef */
// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
importScripts(
"https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"
);
const firebaseConfig = {
apiKey: "<firebase-apiKey>"
authDomain: "<firebase-authDomain>"
projectId: "<firebase-projectId>"
storageBucket: "<firebase-storageBucket>"
messagingSenderId: "<firebase-messagingSenderId>"
appId: "<firebase-appId>"
measurementId: "<firebase-measurementId>"
};
// eslint-disable-next-line no-undef
firebase.initializeApp(firebaseConfig);
// eslint-disable-next-line no-undef
const messaging = firebase.messaging();
// click on notification
self.addEventListener("notificationclick", function (event) {
event.notification.close();
event.waitUntil(clients.openWindow(event.notification.data.url));
});
//set notification
messaging.onBackgroundMessage((payload) => {
console.log(
"[firebase-messaging-sw.js] Received background message ",
payload
);
self.registration.update();
const notification = payload.data;
if (!notification) {
console.warn(
"[firebase-messaging-sw.js] Unknown notification on message ",
payload
);
return;
}
// Customize notification here
const notificationOptions = {
...notification,
data: {
url: payload.data.openURL,
},
};
self.registration.showNotification(notification.title, notificationOptions);
});