Setting Up Web Push Notifications

This is an example React app that uses ChatKitty and Firebase to enable web push notifications.

Getting Started

ℹ️ You will need a ChatKitty account to set up the User Received Notification chat function and retrieve your ChatKitty credentials from the ChatKitty dashboard. You will also use the ChatKitty Dashboard to add Firebase as a chat runtime dependency. Next, you also need a Firebase account to create a Firebase project as we wil be using Firebase as our push notification provider.

Then, install all dependencies using the following command:

yarn install

Change Credentials

You will need to replace certain credentials in the code with your own credentials. These will be obtained either from the ChatKitty Dashboard or yor Firebase project.

First, inside firebase.js replace firebaseConfig with your own config:

const firebaseConfig = {
     /* your credentials here */
};

Next, replace vapidKey with your own generated key from Firebase Cloud Messaging in the following:

export const fetchToken = (setTokenFound, onTokenFound, onPermissionRequired, onError) => {
  return getToken(messaging, {vapidKey: '/* your credentials here */'}).then((currentToken) => {
    ...
  });
}

Next, replace the key in chatkitty.js with your own API key:

const chatkitty = ChatKitty.getInstance(/*your credentials here*/);

Lastly, in app.js replace the user's information with users from your own app:

  const result = await chatkitty.startSession({ username: /* user's credentials */ });

Running the App

yarn start

Testing Push Notifications

To test if push notifications work, allow notification permission on your browser. Then, send a message to the user. You should now see a received message notification.