Dev Push Notification

The easiest way to add push notifications and email sending to your React web applications.

Features

✅ Web Push Notifications

✅ Foreground Notifications

✅ Background Notifications

✅ FCM Token Generation

✅ Email Sending

✅ Multiple Email Recipients

✅ Multiple Device Notifications

✅ React Friendly API

Installation

Install the package:

npm install dev-push-notification

Service Worker Setup

Download the service worker file:

https://dev-push-notification.vercel.app/dpn-sw.js

Place it inside your project's public folder:

/public/dpn-sw.js

Example:

my-project/
├── public/
│   └── dpn-sw.js
├── src/
└── package.json

⚠️ Important:

The file must be named exactly dpn-sw.js and must be located inside the public folder.

API Key

An API key is required to use this package.

Get your API key from:

https://dev-push-notification.vercel.app/api-section

Example:

const API_KEY = "YOUR_API_KEY";

Available Methods

| Method | Description | | ------------------- | ----------------------------------- | | getToken() | Generate FCM device token | | initMessaging() | Initialize Firebase messaging | | onMessageListener() | Listen for foreground notifications | | sendNotification() | Send push notifications | | sendMail() | Send emails |

Complete Push Notification Example

import { useState, useEffect } from "react";
import {
  getToken,
  sendNotification,
  onMessageListener,
  initMessaging,
} from "dev-push-notification";

function App() {
  const [token, setToken] = useState(null);
  const [loading, setLoading] = useState("");

  const API_KEY = "YOUR_API_KEY";

  useEffect(() => {
    initMessaging(API_KEY);

    const unsubscribe = onMessageListener(async (payload) => {
      console.log("Foreground notification received:", payload);

      const { title, body, image } = payload.notification;

      const link = payload.data?.clickUrl || "/";

      const registration = await navigator.serviceWorker.ready;

      registration.showNotification(title, {
        body,
        icon: image,
        data: {
          clickUrl: link,
        },
      });
    });

    return () => unsubscribe();
  }, []);

  const handleGetToken = async () => {
    try {
      setLoading("getToken");

      const tokenData = await getToken(API_KEY);

      setToken(tokenData.token);

      console.log("Token Response:", tokenData);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading("");
    }
  };

  const handleSendNotification = async () => {
    try {
      setLoading("sendNotification");

      const response = await sendNotification({
        apiKey: API_KEY,
        title: "Hello User",
        body: "This is a test notification",
        icon: "https://your-domain.com/icon.png",
        link: "https://your-domain.com/dashboard",
        fcmTokens: [token],
      });

      console.log(response);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading("");
    }
  };

  return (
    <div>
      <button onClick={handleGetToken}>
        {loading === "getToken"
          ? "Generating..."
          : "Generate Token"}
      </button>

      <button
        disabled={!token}
        onClick={handleSendNotification}
      >
        {loading === "sendNotification"
          ? "Sending..."
          : "Send Notification"}
      </button>
    </div>
  );
}

export default App;

Generate Device Token

Generate an FCM token for the current device.

import { getToken } from "dev-push-notification";

const tokenData = await getToken(API_KEY);

console.log(tokenData);

Example Response:

{
  "success": true,
  "token": "fcm_device_token_here"
}

Send Push Notification

import { sendNotification } from "dev-push-notification";

const response = await sendNotification({
  apiKey: API_KEY,
  title: "Welcome",
  body: "This is a test notification",
  icon: "https://your-domain.com/icon.png",
  link: "https://your-domain.com/dashboard",
  fcmTokens: [
    "token_1",
    "token_2",
    "token_3"
  ]
});

console.log(response);

Parameters

| Parameter | Type | Required | Description | | --------- | -------- | -------- | --------------------------------------- | | apiKey | string | ✅ | Your API key | | title | string | ✅ | Notification title | | body | string | ✅ | Notification body | | icon | string | ❌ | Notification icon URL | | link | string | ❌ | URL opened when notification is clicked | | fcmTokens | string[] | ✅ | One or more FCM tokens |

Example Response

{
  "success": true,
  "message": "Notification sent successfully"
}

Listen for Foreground Notifications

Place this inside your root component (recommended: App.jsx).

import {
  initMessaging,
  onMessageListener,
} from "dev-push-notification";

useEffect(() => {
  initMessaging(API_KEY);

  const unsubscribe = onMessageListener(
    async (payload) => {
      console.log(payload);
    }
  );

  return () => unsubscribe();
}, []);

Send Email

Send emails directly using your API key.

import { sendMail } from "dev-push-notification";

const response = await sendMail({
  apiKey: API_KEY,
  from: "Buddy Space",
  mails: [
    "[email protected]",
    "[email protected]"
  ],
  subject: "Welcome Email",
  htmlContent: `
    <h1>Hello!</h1>
    <p>Welcome to our platform.</p>
  `
});

console.log(response);

Send Email to a Single Recipient

await sendMail({
  apiKey: API_KEY,
  from: "Buddy Space",
  mails: "[email protected]",
  subject: "Hello",
  htmlContent: "<h1>Welcome</h1>"
});

Send Email to Multiple Recipients

await sendMail({
  apiKey: API_KEY,
  from: "Buddy Space",
  mails: [
    "[email protected]",
    "[email protected]",
    "[email protected]"
  ],
  subject: "Announcement",
  htmlContent: `
    <h2>Important Update</h2>
    <p>Thank you for using our service.</p>
  `
});

Email Parameters

| Parameter | Type | Required | Description | | ----------- | ----------------- | -------- | ------------------ | | apiKey | string | ✅ | Your API key | | from | string | ✅ | Sender name | | mails | string | string[] | ✅ | Recipient email(s) | | subject | string | ✅ | Email subject | | htmlContent | string | ✅ | Email HTML content |

Email Response Example

{
  "success": true,
  "message": "Email successfully sent",
  "creditsUsed": 2,
  "remainingCredits": 98
}

Credits System

Basic User

• 1 recipient = 1 credit
• 10 recipients = 10 credits

Example:

mails: [
  "[email protected]",
  "[email protected]",
  "[email protected]"
];

Credits Used:

3

Premium User

Unlimited email sending.

No credits are deducted.

Important Notes

Service Worker Required

Make sure:

/public/dpn-sw.js

exists in your project.

HTTPS Required

Push notifications work only on:

• HTTPS domains
• localhost

Browser Permission

Users must allow notification permission in their browser before receiving notifications.

Store Tokens

It is recommended to save generated FCM tokens in your database so you can send notifications later.

Multiple Tokens Supported

You can send notifications to multiple devices simultaneously.

await sendNotification({
  apiKey: API_KEY,
  title: "New Update",
  body: "Version 2.0 released",
  fcmTokens: [
    token1,
    token2,
    token3
  ]
});

Support

If you encounter any issues or have questions, please visit:

https://dev-push-notification.vercel.app

Happy Coding 🚀