Skip to content

Commit 13963d5

Browse files
chakrihackerchakrihacker
committed
slides added
1 parent adc7d4b commit 13963d5

13 files changed

+6680
-0
lines changed

‎awesome-app/screens/Report.js

+3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export default class Report extends Component {
3737
time: new Date().getTime() + 5000
3838
}
3939
);
40+
setTimeout(() => {
41+
Notifications.dismissAllNotificationsAsync();
42+
}, 2500);
4043
};
4144

4245
handleSubmitReport = async () => {

‎slides/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/**/*

‎slides/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "notifications-slides",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"author": "chakrihacker",
6+
"license": "MIT",
7+
"scripts": {
8+
"start": "mdx-deck presentation.mdx"
9+
},
10+
"devDependencies": {
11+
"mdx-deck": "^1.8.1",
12+
"mdx-deck-code-surfer": "^0.5.3",
13+
"raw-loader": "^0.5.1"
14+
}
15+
}

‎slides/presentation.mdx

+296
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
import { Appear, Notes, Head } from "mdx-deck";
2+
import { Split, FullScreenCode } from "mdx-deck/layouts";
3+
import { CodeSurfer } from "mdx-deck-code-surfer";
4+
import prismTheme from "prism-react-renderer/themes/nightOwl";
5+
import okaidia from "react-syntax-highlighter/styles/prism/okaidia";
6+
import { dark } from "mdx-deck/themes";
7+
8+
export const theme = {
9+
...dark,
10+
prism: {
11+
style: okaidia
12+
}
13+
};
14+
15+
<Head>
16+
<title>React native Notifications</title>
17+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous" />
18+
</Head>
19+
---
20+
21+
# React Native Push Notifications 🎡
22+
23+
---
24+
25+
Hello 👋
26+
27+
My name is **Subramanya Chakravarthy ([@chakrihacker](https://twitter.com/chakrihacker))**
28+
29+
Created [react-native-safe-mapview](https://github.com/chakrihacker/react-native-safe-mapview) **🌍**
30+
31+
Software Developer **👨‍💻** @ Platify.co
32+
33+
---
34+
35+
<img
36+
src="./src/assets/phone.jpg"
37+
alt="Phone"
38+
style={{
39+
width: "300px",
40+
height: "600px",
41+
borderWidth: "2px",
42+
borderStyle: "solid",
43+
borderColor: "#fff"
44+
}}
45+
/>
46+
47+
<Notes>What is Push Notification?</Notes>
48+
49+
---
50+
51+
<video width={"300"} height={"600"} autoplay="true" loop="true">
52+
<source src="./src/assets/notification.mp4" type="video/mp4" />
53+
</video>
54+
55+
<Notes>
56+
Push Notification is that animation which you receive on your ios phone or an
57+
android Which helps you trigger an event and get users attention and helps to
58+
engage with users
59+
</Notes>
60+
---
61+
62+
# Why Notifications?
63+
64+
<div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
65+
<ul style={{textAlign: "left", fontSize: "50px"}}>
66+
<Appear>
67+
<li>Retention</li>
68+
<li>Engagement</li>
69+
<li>Get User's Attention</li>
70+
</Appear>
71+
</ul>
72+
73+
<img
74+
src="./src/assets/phone-notification.jpg"
75+
alt="Phone"
76+
style={{
77+
width: "300px",
78+
height: "600px",
79+
borderWidth: "2px",
80+
borderStyle: "solid",
81+
borderColor: "#fff"
82+
}}
83+
/>
84+
</div>
85+
86+
<Notes>
87+
There are couple of advantages
88+
Retention - important aspect of every product. After an app is installed. It is important for a product or a company
89+
to have that user continuing that app
90+
91+
Engagement - Like twitter, someone commented on your tweet and you may add another reply
92+
93+
Get User's Attention - Notifications like your mind will blow away after watching this video
94+
95+
</Notes>
96+
97+
---
98+
99+
<div style={{ display: "flex", justifyContent: "space-around" }}>
100+
<div
101+
style={{
102+
display: "flex",
103+
alignItems: "flex-start",
104+
flexDirection: "column",
105+
justifyContent: "start"
106+
}}
107+
>
108+
<h1>Some Numbers...</h1>
109+
<ul style={{ textAlign: "left", fontSize: "50px" }}>
110+
<Appear>
111+
<li>31.84% of all Apps in Android app store include push</li>
112+
<li>More than 50% of installed apps include push</li>
113+
</Appear>
114+
</ul>
115+
</div>
116+
<img
117+
src="./src/assets/phone-notification.jpg"
118+
alt="Phone"
119+
style={{
120+
width: "300px",
121+
height: "600px",
122+
borderWidth: "2px",
123+
borderStyle: "solid",
124+
borderColor: "#fff"
125+
}}
126+
/>
127+
</div>
128+
129+
<Notes>
130+
How do you find that, any app uses gcm/fcm has push notifications. you can find using appbrain.com and see how many
131+
apps are using it
132+
133+
</Notes>
134+
135+
---
136+
137+
# Few important things
138+
139+
<ul style={{ textAlign: "left", fontSize: "50px" }}>
140+
<Appear>
141+
<li>Ask user for permission</li>
142+
<li>Give Context why user should give permission</li>
143+
<li>Capture Device token and platform</li>
144+
<li>Preload Content via Push</li>
145+
<li>Respect user timezone</li>
146+
</Appear>
147+
</ul>
148+
149+
---
150+
151+
## Notification Types
152+
153+
<ul style={{ fontSize: "50px" }}>
154+
<Appear>
155+
<li>Local Notifications</li>
156+
<li>Push Notifications</li>
157+
</Appear>
158+
</ul>
159+
160+
<Notes>ways to send notifications to mobile</Notes>
161+
162+
---
163+
164+
# How does it work
165+
166+
1. Identify the User
167+
2. Trigger notification from server/app
168+
3. Handle receiving notifications
169+
170+
---
171+
172+
# App Flow
173+
174+
```bash
175+
|-- Splash
176+
|-- Auth
177+
|-- Notification Permission
178+
|-- Home
179+
|-- Create Report
180+
```
181+
182+
---
183+
184+
<CodeSurfer
185+
code={require("!raw-loader!./src/snippets/registerNotification.js")}
186+
theme={prismTheme}
187+
lang={"javascript"}
188+
showNumbers
189+
steps={[
190+
{ title: "Get Token" },
191+
{ lines: [1], notes: "import required stuff" },
192+
{ lines: [3, 4] },
193+
{ ranges: [[13, 26]] },
194+
{ ranges: [[6, 11]], notes: "send the token to your server" }
195+
]}
196+
/>
197+
198+
---
199+
200+
# Push Notifications Flow
201+
202+
![Flow](./src/assets/push-notifications-flow.png)
203+
204+
---
205+
206+
# Notification Providers
207+
208+
<ul style={{ fontSize: "50px", textAlign: "left" }}>
209+
<Appear>
210+
<li>Expo (multiple server sdks)</li>
211+
<li>One Signal (free, no privacy)</li>
212+
<li>Firebase (free)</li>
213+
<li>Amazon SNS (better for aws ecosystem devs)</li>
214+
<li>Urban Airship</li>
215+
<li>PushWoosh</li>
216+
</Appear>
217+
</ul>
218+
219+
---
220+
221+
export default Split;
222+
223+
## How to implement with React Native
224+
225+
![React Native](./src/assets/react-native.png)
226+
227+
---
228+
229+
<div
230+
style={{
231+
display: "flex",
232+
width: "100vw",
233+
height: "100vh"
234+
}}
235+
>
236+
<div
237+
style={{
238+
backgroundColor: "#005DC7",
239+
flexDirection: "column",
240+
padding: "20px",
241+
display: "flex",
242+
flex: 1,
243+
alignItems: "center",
244+
justifyContent: "center"
245+
}}
246+
>
247+
<p>Easy Way</p>
248+
<img
249+
src={"./src/assets/expo.jpg"}
250+
style={{ width: "250px", height: "250px" }}
251+
/>
252+
<p>Expo</p>
253+
</div>
254+
<div
255+
style={{
256+
backgroundColor: "#fff",
257+
color: "#000",
258+
padding: "20px",
259+
display: "flex",
260+
flex: 1,
261+
flexDirection: "column",
262+
alignItems: "center",
263+
justifyContent: "center"
264+
}}
265+
>
266+
<p>Hard Way</p>
267+
<img
268+
src={"./src/assets/react-native.png"}
269+
style={{ width: "250px", height: "250px" }}
270+
/>
271+
<p>Without Expo</p>
272+
</div>
273+
</div>
274+
275+
---
276+
277+
<div>
278+
<h2>Thank You!</h2>
279+
<div style={{ textAlign: "left" }}>
280+
<p>
281+
<i class="fab fa-twitter" style={{ color: "#1DA1F2" }} />
282+
&nbsp;
283+
<span>@chakrihacker</span>
284+
</p>
285+
<p>
286+
<i class="fab fa-github" style={{ color: "#fff" }} />
287+
&nbsp;
288+
<span>@chakrihacker</span>
289+
</p>
290+
<p>
291+
<i class="fas fa-link" style={{ color: "#fff" }} />
292+
&nbsp;
293+
<span>chakrihacker.com</span>
294+
</p>
295+
</div>
296+
</div>

‎slides/src/assets/expo.jpg

17.5 KB
Loading

‎slides/src/assets/notification.mp4

135 KB
Binary file not shown.

‎slides/src/assets/phone-notification.jpg

111 KB
Loading

‎slides/src/assets/phone.jpg

114 KB
Loading

‎slides/src/assets/phone.webp

44.9 KB
Binary file not shown.

‎slides/src/assets/push-notifications-flow.png

21.4 KB
Loading

‎slides/src/assets/react-native.png

83.8 KB
Loading

‎slides/src/snippets/registerNotification.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Notifications, Permissions } from "expo";
2+
3+
registerForPushNotification = async () => {
4+
const enabled = await this.pushNotificationsEnabled();
5+
6+
if (!enabled) {
7+
return Promise.resolve();
8+
}
9+
10+
return Notifications.getExpoPushTokenAsync();
11+
};
12+
13+
pushNotificationsEnabled = async () => {
14+
const { status: existingStatus } = await Permissions.getAsync(
15+
Permissions.NOTIFICATIONS
16+
);
17+
let finalStatus = existingStatus;
18+
if (existingStatus !== "granted") {
19+
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
20+
finalStatus = status;
21+
}
22+
if (finalStatus !== "granted") {
23+
return false;
24+
}
25+
return true;
26+
};

0 commit comments

Comments
 (0)