Skip to content

Commit abf08fa

Browse files
sriyanshcsesriyanshcse
authored
Merge pull request #9 from ravenappdev/feature/react-push-sdk
add react push sdk
2 parents 31c060d + 78586ef commit abf08fa

File tree

3 files changed

+298
-5
lines changed

3 files changed

+298
-5
lines changed

‎docs/push/client-sdk/react-js.mdx

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
title: "React(Web) SDK"
3+
description: "Raven React SDK lets you receive and manage push notifications in react webapps. This only works when FCM integration is used to send notifications"
4+
---
5+
6+
## Setup
7+
8+
### Step 1. Setup FCM Integration
9+
10+
Before setting up the SDK, please make sure you have followed the steps to [setup the FCM Integration](https://docs.ravenapp.dev/push/integrations/fcm) first.
11+
12+
### Step 2. Install SDK
13+
14+
Run the following commands your project root directory.
15+
16+
```bash
17+
npm i @ravenapp/raven-web-react-sdk
18+
```
19+
20+
### Step 3. Generate a unique signature for every user
21+
22+
- To allow Raven to sync user and their push tokens, Raven needs a
23+
unique signature for every user. This can be done by generating a hash of the
24+
userId signed with the Raven API Key.
25+
- Since this signature requires Raven API key, it is highly recommended to
26+
create a backend API that generates the hash and sends to the frontend.
27+
Following example shows how to generate a **HMAC-SHA256** Signature (hash of
28+
your userId signed with your Raven API Key) in Java -
29+
- Add this dependency to `pom.xml` for using **HmacUtils** to generate signature
30+
31+
```md pom.xml
32+
<dependency>
33+
<groupId>commons-codec</groupId>
34+
<artifactId>commons-codec</artifactId>
35+
<version>1.16</version>
36+
</dependency>
37+
```
38+
39+
```java
40+
import org.apache.commons.codec.digest.HmacUtils;
41+
42+
private String hmacSha256Signature(String userId, String apiKey) {
43+
return (new HmacUtils("HmacSHA256", apiKey.getBytes()).hmacHex(userId));
44+
}
45+
```
46+
47+
- You can generate the signature on login and pass to the SDK on initialization.
48+
- For testing purposes, use the free
49+
[HMAC-SHA256 hash generator tool](https://www.devglan.com/online-tools/hmac-sha256-online).
50+
Pass the text as the user identifier and the secret key as your Raven API key.
51+
52+
### Step 4. Initialize Firebase & SDK
53+
54+
- Initialize the SDK on your app launch:
55+
56+
```javascript
57+
import { initFirebase, initRaven } from "@ravenapp/raven-web-react-sdk";
58+
59+
initFirebase(FIREBASE_CONFIG, FIREBASE_VAPID_KEY);
60+
initRaven(RAVEN_APP_ID, RAVEN_SECRET_KEY);
61+
```
62+
63+
- You can get the FIREBASE_CONFIG object and FIREBASE_VAPID_KEY from Firebase console.
64+
- You can get RAVEN_APP_ID from Settings in Raven. RAVEN_SECRETY_KEY is the secret generated in the previous step.
65+
66+
- Add the service worker to your public folder
67+
68+
```javascript
69+
importScripts("https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js");
70+
importScripts("https://www.gstatic.com/firebasejs/8.2.9/firebase-messaging.js");
71+
72+
// Initialize the Firebase app in the service worker by passing in
73+
// your app's Firebase config object.
74+
// https://firebase.google.com/docs/web/setup#config-object
75+
76+
const FIREBASE_CONFIG = {};
77+
78+
firebase.initializeApp(FIREBASE_CONFIG);
79+
80+
const messaging = firebase.messaging();
81+
82+
const broadcast = new BroadcastChannel("display-notification");
83+
84+
messaging.onBackgroundMessage((payload) => {
85+
console.log("[messaging-sw.js] Received background message ", payload);
86+
broadcast.postMessage({
87+
type: "DELIVERED",
88+
data: payload["data"],
89+
});
90+
});
91+
92+
function handleClick(event) {
93+
event.notification.close();
94+
broadcast.postMessage({
95+
type: "CLICKED",
96+
data: event.notification.data,
97+
actions: event.notification.actions,
98+
action: event.action,
99+
});
100+
}
101+
102+
self.addEventListener("notificationclick", handleClick);
103+
```
104+
105+
### Step 5. Set user to Raven
106+
107+
- Set the user with a unique user id when the user logins to your app.
108+
109+
```javascript
110+
import { setUser } from "@ravenapp/raven-web-react-sdk";
111+
112+
setUser("user_id");
113+
```
114+
115+
### Step 6. Setup push notification and set token on Raven
116+
117+
- This will prompt the user with the notification permission dialog. The method takes two arguments - onError & onTokenReceived.
118+
119+
```javascript
120+
import { setupPushNotification } from "@ravenapp/raven-web-react-sdk";
121+
122+
setupPushNotification(
123+
() => console.log("Error setting up push"),
124+
(token) => console.log("Got the token from raven: " + token)
125+
);
126+
```
127+
128+
### Step 7. Handle notification clicks
129+
130+
- Listen to the broadcast channel: 'click-notification'. The clickAction variable will have the action string which you can use to open a window or take any specific action
131+
132+
```javascript
133+
useEffect(() => {
134+
//Click handling
135+
const broadcast = new BroadcastChannel("click-notification");
136+
broadcast.onmessage = (event) => {
137+
try {
138+
if (event.data) {
139+
let clickAction = event.data["click_action"];
140+
//Take action here
141+
console.log(clickAction);
142+
}
143+
} catch (err) {
144+
console.log("Broadcast click-notification error: " + err);
145+
}
146+
};
147+
}, []);
148+
```

‎docs/push/client-sdk/web.mdx

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎docs/yarn.lock

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
"@next/env@12.3.4":
6+
version "12.3.4"
7+
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.4.tgz#c787837d36fcad75d72ff8df6b57482027d64a47"
8+
integrity sha512-H/69Lc5Q02dq3o+dxxy5O/oNxFsZpdL6WREtOOtOM1B/weonIwDXkekr1KV5DPVPr12IHFPrMrcJQ6bgPMfn7A==
9+
10+
"@next/swc-android-arm-eabi@12.3.4":
11+
version "12.3.4"
12+
resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.4.tgz#fd1c2dafe92066c6120761c6a39d19e666dc5dd0"
13+
integrity sha512-cM42Cw6V4Bz/2+j/xIzO8nK/Q3Ly+VSlZJTa1vHzsocJRYz8KT6MrreXaci2++SIZCF1rVRCDgAg5PpqRibdIA==
14+
15+
"@next/swc-android-arm64@12.3.4":
16+
version "12.3.4"
17+
resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.4.tgz#11a146dae7b8bca007239b21c616e83f77b19ed4"
18+
integrity sha512-5jf0dTBjL+rabWjGj3eghpLUxCukRhBcEJgwLedewEA/LJk2HyqCvGIwj5rH+iwmq1llCWbOky2dO3pVljrapg==
19+
20+
"@next/swc-darwin-arm64@12.3.4":
21+
version "12.3.4"
22+
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.4.tgz#14ac8357010c95e67327f47082af9c9d75d5be79"
23+
integrity sha512-DqsSTd3FRjQUR6ao0E1e2OlOcrF5br+uegcEGPVonKYJpcr0MJrtYmPxd4v5T6UCJZ+XzydF7eQo5wdGvSZAyA==
24+
25+
"@next/swc-darwin-x64@12.3.4":
26+
version "12.3.4"
27+
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.4.tgz#e7dc63cd2ac26d15fb84d4d2997207fb9ba7da0f"
28+
integrity sha512-PPF7tbWD4k0dJ2EcUSnOsaOJ5rhT3rlEt/3LhZUGiYNL8KvoqczFrETlUx0cUYaXe11dRA3F80Hpt727QIwByQ==
29+
30+
"@next/swc-freebsd-x64@12.3.4":
31+
version "12.3.4"
32+
resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.4.tgz#fe7ceec58746fdf03f1fcb37ec1331c28e76af93"
33+
integrity sha512-KM9JXRXi/U2PUM928z7l4tnfQ9u8bTco/jb939pdFUHqc28V43Ohd31MmZD1QzEK4aFlMRaIBQOWQZh4D/E5lQ==
34+
35+
"@next/swc-linux-arm-gnueabihf@12.3.4":
36+
version "12.3.4"
37+
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.4.tgz#d7016934d02bfc8bd69818ffb0ae364b77b17af7"
38+
integrity sha512-3zqD3pO+z5CZyxtKDTnOJ2XgFFRUBciOox6EWkoZvJfc9zcidNAQxuwonUeNts6Xbm8Wtm5YGIRC0x+12YH7kw==
39+
40+
"@next/swc-linux-arm64-gnu@12.3.4":
41+
version "12.3.4"
42+
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.4.tgz#43a7bc409b03487bff5beb99479cacdc7bd29af5"
43+
integrity sha512-kiX0vgJGMZVv+oo1QuObaYulXNvdH/IINmvdZnVzMO/jic/B8EEIGlZ8Bgvw8LCjH3zNVPO3mGrdMvnEEPEhKA==
44+
45+
"@next/swc-linux-arm64-musl@12.3.4":
46+
version "12.3.4"
47+
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.4.tgz#4d1db6de6dc982b974cd1c52937111e3e4a34bd3"
48+
integrity sha512-EETZPa1juczrKLWk5okoW2hv7D7WvonU+Cf2CgsSoxgsYbUCZ1voOpL4JZTOb6IbKMDo6ja+SbY0vzXZBUMvkQ==
49+
50+
"@next/swc-linux-x64-gnu@12.3.4":
51+
version "12.3.4"
52+
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.4.tgz#c3b414d77bab08b35f7dd8943d5586f0adb15e38"
53+
integrity sha512-4csPbRbfZbuWOk3ATyWcvVFdD9/Rsdq5YHKvRuEni68OCLkfy4f+4I9OBpyK1SKJ00Cih16NJbHE+k+ljPPpag==
54+
55+
"@next/swc-linux-x64-musl@12.3.4":
56+
version "12.3.4"
57+
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.4.tgz#187a883ec09eb2442a5ebf126826e19037313c61"
58+
integrity sha512-YeBmI+63Ro75SUiL/QXEVXQ19T++58aI/IINOyhpsRL1LKdyfK/35iilraZEFz9bLQrwy1LYAR5lK200A9Gjbg==
59+
60+
"@next/swc-win32-arm64-msvc@12.3.4":
61+
version "12.3.4"
62+
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.4.tgz#89befa84e453ed2ef9a888f375eba565a0fde80b"
63+
integrity sha512-Sd0qFUJv8Tj0PukAYbCCDbmXcMkbIuhnTeHm9m4ZGjCf6kt7E/RMs55Pd3R5ePjOkN7dJEuxYBehawTR/aPDSQ==
64+
65+
"@next/swc-win32-ia32-msvc@12.3.4":
66+
version "12.3.4"
67+
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.4.tgz#cb50c08f0e40ead63642a7f269f0c8254261f17c"
68+
integrity sha512-rt/vv/vg/ZGGkrkKcuJ0LyliRdbskQU+91bje+PgoYmxTZf/tYs6IfbmgudBJk6gH3QnjHWbkphDdRQrseRefQ==
69+
70+
"@next/swc-win32-x64-msvc@12.3.4":
71+
version "12.3.4"
72+
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz#d28ea15a72cdcf96201c60a43e9630cd7fda168f"
73+
integrity sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==
74+
75+
"@swc/helpers@0.4.11":
76+
version "0.4.11"
77+
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
78+
integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
79+
dependencies:
80+
tslib "^2.4.0"
81+
82+
caniuse-lite@^1.0.30001406:
83+
version "1.0.30001442"
84+
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz#40337f1cf3be7c637b061e2f78582dc1daec0614"
85+
integrity sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==
86+
87+
nanoid@^3.3.4:
88+
version "3.3.4"
89+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
90+
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
91+
92+
next@^12.3.1:
93+
version "12.3.4"
94+
resolved "https://registry.yarnpkg.com/next/-/next-12.3.4.tgz#f2780a6ebbf367e071ce67e24bd8a6e05de2fcb1"
95+
integrity sha512-VcyMJUtLZBGzLKo3oMxrEF0stxh8HwuW976pAzlHhI3t8qJ4SROjCrSh1T24bhrbjw55wfZXAbXPGwPt5FLRfQ==
96+
dependencies:
97+
"@next/env" "12.3.4"
98+
"@swc/helpers" "0.4.11"
99+
caniuse-lite "^1.0.30001406"
100+
postcss "8.4.14"
101+
styled-jsx "5.0.7"
102+
use-sync-external-store "1.2.0"
103+
optionalDependencies:
104+
"@next/swc-android-arm-eabi" "12.3.4"
105+
"@next/swc-android-arm64" "12.3.4"
106+
"@next/swc-darwin-arm64" "12.3.4"
107+
"@next/swc-darwin-x64" "12.3.4"
108+
"@next/swc-freebsd-x64" "12.3.4"
109+
"@next/swc-linux-arm-gnueabihf" "12.3.4"
110+
"@next/swc-linux-arm64-gnu" "12.3.4"
111+
"@next/swc-linux-arm64-musl" "12.3.4"
112+
"@next/swc-linux-x64-gnu" "12.3.4"
113+
"@next/swc-linux-x64-musl" "12.3.4"
114+
"@next/swc-win32-arm64-msvc" "12.3.4"
115+
"@next/swc-win32-ia32-msvc" "12.3.4"
116+
"@next/swc-win32-x64-msvc" "12.3.4"
117+
118+
picocolors@^1.0.0:
119+
version "1.0.0"
120+
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
121+
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
122+
123+
postcss@8.4.14:
124+
version "8.4.14"
125+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
126+
integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
127+
dependencies:
128+
nanoid "^3.3.4"
129+
picocolors "^1.0.0"
130+
source-map-js "^1.0.2"
131+
132+
source-map-js@^1.0.2:
133+
version "1.0.2"
134+
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
135+
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
136+
137+
styled-jsx@5.0.7:
138+
version "5.0.7"
139+
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
140+
integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
141+
142+
tslib@^2.4.0:
143+
version "2.4.1"
144+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
145+
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
146+
147+
use-sync-external-store@1.2.0:
148+
version "1.2.0"
149+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
150+
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==

0 commit comments

Comments
 (0)