https://github.com/cometchat/cometchat-push-notification-app-react

Push Notification App for React (JavaScript/Web)
https://github.com/cometchat/cometchat-push-notification-app-react

app chat javascript notification push push-notifications react reactjs web

Last synced: about 1 month ago
JSON representation

Push Notification App for React (JavaScript/Web)

• Host: GitHub
• URL: https://github.com/cometchat/cometchat-push-notification-app-react
• Owner: cometchat
• Created: 2019-04-19T12:28:00.000Z (almost 6 years ago)
• Default Branch: v4-enhanced-push-notification
• Last Pushed: 2024-08-22T11:11:06.000Z (5 months ago)
• Last Synced: 2024-12-03T04:36:39.453Z (about 2 months ago)
• Topics: app, chat, javascript, notification, push, push-notifications, react, reactjs, web
• Language: TypeScript
• Homepage: https://www.cometchat.com
• Size: 5.22 MB
• Stars: 19
• Watchers: 17
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# React Enhanced Push notifications (Beta) Sample app

The CometChat React [Enhanced Push notifications (Beta)](https://www.cometchat.com/docs-beta/notifications/push-overview) Sample app is a fully functional push notification app capable of one-on-one (private) and group messaging, and Calling. This sample app enables users to send and receive push notifications for text and multimedia messages like **images, videos, documents** and **Custom Messages**.

> [!NOTE]

> If you are using Push Notifications (Extension), please refer to our [React Push Notifications (Extension)](https://github.com/cometchat/cometchat-push-notification-app-react/tree/v4-push-notifications-extension) Sample app for guidance.

## Pre-requisite

1. Login to the [CometChat Dashboard](https://app.cometchat.com/).

2. Select an existing app or create a new one.

3. Click on the Notifications section from the menu on the left.

4. Enable Push Notifications by clicking on the toggle bar and configure the push notifications.

5. Add credentials for FCM and make a note of the provider id.

## Run the Sample App

1. Clone this repository.

2. Install the dependencies:

```

npm i

```

3. Paste the `firebaseConfig` in the correct location as per FCM's documentation.

4. Add your app credentials like `appId`, `region`, `authKey` in the `src/const.ts`.

5. Also add the `fcmProviderId` in `src/const.ts` as that is required while registering push token.

6. Add `vapidKey` obtained from the Firebase console -> Cloud Messaging -> Web Push Certificates to the `firebase.js`.

7. Run the sample app.

```

npm start

```

8. Once the app opens up in a browser, login with a user.

9. Allow the permission to display push notifications.

10. Send a message or call to the logged in user from another browser/device.

11. You should see a push notification for a message.

12. Tap on the notification to open the Sample app for message.

## Help and Support

For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs-beta/notifications/push-overview) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](https://app.cometchat.com/).