-
Notifications
You must be signed in to change notification settings - Fork 48
/
Copy pathindex.html
173 lines (131 loc) · 6.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Realtime Web Push Notifications example</title>
<meta name="description" content="This page demonstrates the use of the Realtime Web Push Notitications using GCM">
<meta name="author" content="Realtime">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="icon" type="image/png" href="img/realtime-logo.jpg">
<!-- THESE ARE THE REQUIRED FILES TO USE WEB PUSH NOTIFICATIONS -->
<link rel="manifest" href="manifest.json">
<script src="//messaging-public.realtime.co/js/2.1.0/ortc.js"></script>
<!-- THESE FILES ARE ONLY REQUIRED FOR THE CURRENT EXAMPLE -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<!-- Firebase -->
<!-- ********************************************************
Update Firebase initialization code:
1. Go to the Firebase console: https://console.firebase.google.com/
2. Choose a Firebase project you've created
3. Click "Add Firebase to your web app"
4. Replace the following initialization code with the code from the Firebase console:
-->
<!-- START INITIALIZATION CODE -->
<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBQT4ykCO54Ygslw74AJIAND__ZR0vUxkM",
authDomain: "web-push-demo-cf974.firebaseapp.com",
databaseURL: "https://web-push-demo-cf974.firebaseio.com",
storageBucket: "web-push-demo-cf974.appspot.com",
messagingSenderId: "915139563807"
};
firebase.initializeApp(config);
</script>
<!-- END INITIALIZATION CODE -->
<script src="WebPushManager.js"></script>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 2%">
<p>
<img src="img/realtime-large-logo.jpg" style="max-width: 90%">
</p>
<h1>Introducing Web Push Notifications</h1>
<p>
Starting with Chrome 50 and Firefox 44 you are able to send push notifications to your website users, even when they are not browsing your website.
</p>
<p>
We have integrated this new feature into the Realtime Cloud Messaging Pub/Sub service to make your life easier.
</p>
<h2>How?</h2>
<p>
You probably noticed that your browser asked if you allowed notifications from this website.
If you accepted you are already subscribed to your own private channel to receive notifications.
</p>
<p>
Your channel is: <code><span id="channel">...</span></code>
</p>
<p>
This was performed through the new <code>subscribeWithNotifications</code> method in the Realtime JavaScript SDK.
</p>
<p>
Demo time! Clicking on the following button will send a new push notification to your private channel (only you'll see the push).
</p>
<p>
<button id="sendButton" class="button-primary" onclick="javascript:send();">Send me a push notification</button>
</p>
<p>
You should see a Chrome or Firefox Push Notification pop-up like this near your system tray (the first push may take a little more time to be delivered due to the underlying Firebase Cloud Messaging backend configuration).
</p>
</p>
<p>
<img src="img/chrome_webpush.png" style="max-width: 90%; border: solid lightgray 1px;">
</p>
<p>
or
</p>
<p>
<img src="img/firefox_webpush.png" style="max-width: 90%; border: solid lightgray 1px;">
</p>
<p>
This example uses a private channel for each user so you can send pushes at will, without annoying other users. A typical use case in a website would be using a global channel and subscribing each user to that channel. This way you could broadcast a single push to all users simultaneously. It´s powerful but should be used wisely.
</p>
</div>
<div class="one-half column" style="margin-top: 10%">
<img style="max-width: 90%; " src="img/push2.gif">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve column" style="margin-top: 2%">
<h2>Cool! What if the user is not browsing the website when the push notification is sent?</h2>
<p>
No problem, if an instance of Chrome or Firefox is running users will see your notification pop-up inviting them back to your website. If Chrome or Firefox is not running the pop-up will be shown as soon as the browser is launched.
</p>
<p>
Let's try it. Copy the following curl command and <a href="https://github.com/realtime-framework/WebPushNotifications">navigate away</a> from this website. Paste the command in your terminal window and send yourself a push notification. When you receive it click on the pop-up and you'll be redirected to the Realtime homepage.
</p>
<p>
<div id="curl" style="padding: 15px; background-color: black; color: white;">
</div>
</p>
<p>
The command above is simply sending a Realtime message to your private channel (the C parameter) using the Realtime REST API. The Realtime server will take care of broadcasting it to Firebase Cloud Messaging for delivery.
</p>
<h2 style="padding-top: 10px;">One push, many platforms</h2>
<p>
But the good news won't stop here. Taking advantage of the Realtime Cloud Messaging integration with Firebase Cloud Messaging for Android devices and Apple Notification Services for iOS/OSX devices, now you'll be able to send one single push to your entire user base in almost all platforms. Until now you could only do it with native mobile apps, now you can do it also for your website users.
</p>
<h2 style="padding-top: 10px;">This is great! How can I get started?</h2>
<p>
You'll find this example source code and starting guide at <a href="https://github.com/realtime-framework/WebPushNotifications">https://github.com/realtime-framework/WebPushNotifications</a>
</p>
<p>
Feel free to clone it and run it in your localhost or website.
</p>
<p style="margin-bottom: 50px;">
Follow the guidelines and in less than one hour you'll be engaging with your website users. Go for it ...
</p>
</div>
</div>
</div>
</body>
</html>