🚀 MBNotify

A simple foreground push notification system for Web & Mobile apps built using the MQTT protocol with the HiveMQ public broker.

Lightweight MQTT-based push notification system for Web, React Native/Expo, and Server applications. All in one package with platform-specific entry points.

📦 Installation

✨ New Way (v2.1.0+) - Unified Package

All platforms in a single package with platform-specific entry points:

npm install mbnotify

Server

npm install mbnotify

Mobile (Expo / React Native)

npm install mbnotify
npx expo install expo-notifications @react-native-async-storage/async-storage

Web

npm install mbnotify

🔄 Existing Way - Separate Packages

If you prefer separate packages per platform:

| Package | Purpose | | -------------- | ------------------------------ | | mbnotify | Send notifications (Server) | | mbnotify-app | Receive notifications (Mobile) | | mbnotify-web | Receive notifications (Web) |

Server:

npm install mbnotify

Mobile (Expo / React Native):

npm install mbnotify-app
npx expo install expo-notifications @react-native-async-storage/async-storage

Web:

npm install mbnotify-web

⚡ Send Notification (Server)

✨ New Way (Unified Package)

import { sendNotification } from "mbnotify";

await sendNotification({
  appName: "myapp",
  token: "dev_xxxxxxxxx",

  title: "Order Shipped 🚚",
  body: "Your order has been shipped!",

  icon: "https://cdn-icons-png.flaticon.com/512/1827/1827392.png",
  image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1200",

  url: "https://google.com",

  data: {
    orderId: "12345"
  }
});

🔄 Existing Way (Separate Package)

import { sendNotification } from "mbnotify";

await sendNotification({
  appName: "myapp",
  token: "dev_xxxxxxxxx",

  title: "Order Shipped 🚚",
  body: "Your order has been shipped!",

  icon: "https://cdn-icons-png.flaticon.com/512/1827/1827392.png",
  image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1200",

  url: "https://google.com",

  data: {
    orderId: "12345"
  }
});

📱 Mobile Usage (Expo)

✨ New Way (Unified Package)

import { useEffect } from "react";
import { requestPermission, getToken } from "mbnotify/app";

export default function App() {

  useEffect(() => {
    async function init() {

      const granted = await requestPermission();
      if (!granted) return;

      const token = await getToken("myapp");
      console.log("Device Token:", token);
    }

    init();
  }, []);

  return null;
}

🔄 Existing Way (Separate Package)

import { useEffect } from "react";
import { requestPermission, getToken } from "mbnotify-app";

export default function App() {

  useEffect(() => {
    async function init() {

      const granted = await requestPermission();
      if (!granted) return;

      const token = await getToken("myapp");
      console.log("Device Token:", token);
    }

    init();
  }, []);

  return null;
}

🌐 Web Usage

✨ New Way (Unified Package)

import { useEffect } from "react";
import { requestPermission, getToken } from "mbnotify/web";

export default function App() {

  useEffect(() => {
    async function init() {

      const permission = await requestPermission();
      if (permission !== "granted") return;

      const token = await getToken("myapp");
      console.log("Device Token:", token);
    }

    init();
  }, []);

  return null;
}

🔄 Existing Way (Separate Package)

import { useEffect } from "react";
import { requestPermission, getToken } from "mbnotify-web";

export default function App() {

  useEffect(() => {
    async function init() {

      const permission = await requestPermission();
      if (permission !== "granted") return;

      const token = await getToken("myapp");
      console.log("Device Token:", token);
    }

    init();
  }, []);

  return null;
}

📦 Export Points (New Unified Package)

| Import | Platform | Purpose | | -------------------- | -------- | ------------------------ | | mbnotify | Server | Send notifications | | mbnotify/server | Server | Send notifications | | mbnotify/web | Browser | Receive notifications | | mbnotify/app | Expo/RN | Receive notifications |

🏗️ Project Structure (New Unified Package)

mbnotify/
├── src/
│   ├── index.ts           # Server entry point (default export)
│   ├── types.ts           # Shared types
│   ├── server/
│   │   └── index.ts       # Server implementation
│   ├── web/
│   │   └── index.ts       # Web/Browser implementation
│   └── app/
│       └── index.ts       # React Native/Expo implementation
├── dist/
│   ├── esm/               # ESM builds
│   └── cjs/               # CommonJS builds

🧾 Payload

| Field | Type | | ------- | ------ | | appName | string | | token | string | | title | string | | body | string | | icon | string | | image | string | | url | string | | data | object |

🔥 Features

• ⚡ Foreground notifications
• 📡 MQTT-based communication
• 🌍 Uses HiveMQ public broker
• 📱 Works on Web & Mobile
• 🔗 Supports deep linking via URL
• 📦 Single package with platform-specific entry points (v2.1.0+)
• 🔄 Backward compatible with existing separate packages

🔌 MQTT Configuration

Topic Format

All notifications use this topic structure:

/{appName}/{deviceToken}/notification

Example:

/my-app/dev_abc123xyz/notification

Default Brokers

• Web/Expo: wss://broker.hivemq.com:8884/mqtt (WebSocket)
• Server: mqtt://broker.hivemq.com:1883 (TCP)

You can specify a custom broker URL when calling functions:

New Way (Unified Package):

// Web
const token = await getToken("myapp", "wss://custom-broker.com:8884/mqtt");

// Server
await sendNotification({
  appName: "myapp",
  token: "dev_token",
  title: "Hello",
  body: "Custom broker test"
}, "mqtt://custom-broker.com:1883");

Existing Way (Separate Packages):

// Same approach with respective packages
const token = await getToken("myapp", "wss://custom-broker.com:8884/mqtt");

👨‍💻 Author

Manoj Gowda B R Full Stack Developer (MERN)

📜 License

MIT