CNotifySDK (web_cnotify_sdk) 🔔

• Home
• Platform
• Docs

Get started

1. Install the SDK

$ npm i @eruka-tech/cnotify-sdk

2. Import the SDK

import CNotifySDK from '@eruka-tech/cnotify-sdk';

3. Initialize the SDK

const firebaseConfig = {
  apiKey: '<your_api_key>',
  authDomain: '<your_auth_domain>',
  projectId: '<your_project_id>',
  storageBucket: '<your_storage_bucket>',
  messagingSenderId: '<your_messaging_sender_id>',
  appId: '<your_app_id>',
  measurementId: '<your_measurement_id>',
};

// Initialize CNotifySDK from configs
const cnotify = CNotifySDK.getInstance(
  { apiKey: '<cnotify_api_key>' },
  {
    testing: true,
    firebaseConfig: firebaseConfig,
  }
);

// Or initialize CNotifySDK from an existing Firebase App
// const app = initializeApp(firebaseConfig);
// CNotifyconst cnotify = SDK.getInstance(
//   { apiKey: '<cnotify_api_key>' },
//   {
// testing: true,
// firebaseApp: app,
//   }
// );

4. Request notification permissions

Permissions will be requested automatically when initializing the SDK, but there are some browsers that require permissions to be requested after a user gesture on the screen. To request notification permissions on demand, the SDK provides the following method:

cnotify.requestPermissions().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted ✅');
  } else {
    console.log('Notification permission denied ❌');
  }
});

5. It is necessary to create a firebase-messaging-sw.js file in /public (or wherever appropriate), the purpose is to make the /firebase-messaging-sw.js url available. The content of the file is as follows:

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: '<your_api_key>',
  authDomain: '<your_auth_domain>',
  projectId: '<your_project_id>',
  storageBucket: '<your_storage_bucket>',
  messagingSenderId: '<your_messaging_sender_id>',
  appId: '<your_app_id>',
  measurementId: '<your_measurement_id>',
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log('Received background message ', payload);
});

Examples

• Next.JS example