Skip to content

Commit 80a9fc3

Browse files
mobiztmobizt
committed
๊Update FCM example
1 parent e36489e commit 80a9fc3

File tree

1 file changed

+41
-43
lines changed

1 file changed

+41
-43
lines changed

‎examples/Messaging/WebClient/fcm.html‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -50,66 +50,64 @@
5050

5151
<div class="container-sm py-5">
5252
<div id="instructionTab" class="tabcontent py-3 active">
53-
<div id="longDiv">
54-
1. Place the <span id="url1"></span> files in the root directory of the web server.<br /><br />
53+
To use the FCM web app, it requires the PHP and web server to host the html and PHP script
54+
files.<br /><br />
5555

56-
The web server can be local host e.g. <a href="https://www.apachefriends.org/download.html"
57-
target="_blank">XAMMP</a>, <a href="https://www.uniformserver.com/" target="_blank">UiformServer</a>
58-
or nginx with PHP installed.<br /><br />
56+
1. Place the <span id="url1"></span> files in the root directory of your web server.<br /><br />
5957

60-
When you host the web app on a remote server, browser should navigate through the HTTPS protocol
61-
(https://) because FCM SDK is supported only in pages served over HTTPS.<br /><br />
58+
When you host the FCM web app on a remote server, the app should be access through the HTTPS protocol
59+
(https://) because FCM SDK is only support it.<br /><br />
6260

63-
When you host the web app on local host, browser can navigate through http://localhost.<br /><br />
61+
When you host the FCM web app on your local host, the app should be access through
62+
http://localhost.<br /><br />
6463

65-
2. Under the <b>Initialization</b> tab, specify the information from <a
66-
href="https://console.firebase.google.com/project/_/settings/general/" target="_blank">Project
67-
settings > General > Your apps</a><br /><br />
64+
2. Under the <b>Initialization</b> page, specify the information from <a
65+
href="https://console.firebase.google.com/project/_/settings/general/" target="_blank">Project
66+
settings > General > Your apps</a><br /><br />
6867

6968

70-
The <b>VAPID</b> key can be taken from the <b>Web Push certificates</b> section under <a
71-
href="https://console.firebase.google.com/project/_/settings/cloudmessaging/web"
72-
target="_blank">Project settings > Cloud Messaging</a><br /><br />
69+
The <b>VAPID</b> key can be taken from the <b>Web Push certificates</b> section under <a
70+
href="https://console.firebase.google.com/project/_/settings/cloudmessaging/web" target="_blank">Project
71+
settings > Cloud Messaging</a><br /><br />
7372

7473

75-
3. Click the <b>Initialize & Get Token</b> button to initialize your Firebase Cloud Messaging Web Client
76-
and get the registration token to test with your Arduino device.<br /><br />
74+
3. Click the <b>Initialize</b> button to initialize your Firebase Cloud Messaging Web Client. The app
75+
instance token will be generated and can be used for sending and receiving the messages.<br /><br />
7776

78-
You also have to allow or enable notification for your web server site URL in your web browser
79-
settings or
80-
pop-up.<br /><br />
77+
You also have to allow or enable notification for your web server site URL in your web browser settings or
78+
pop-up.<br /><br />
8179

82-
After the registration token was generated, you can now use for the registeration token in your
83-
Arduino code.<br /><br />
80+
After the registration token was generated, you can now use for the registeration token in your
81+
Arduino code.<br /><br />
8482

85-
4. Click the <b>Download SW File</b> button to download the service worker javascript file that is
86-
required for allowing background message notification.<br /><br />
87-
Save the <b>firebase-messaging-sw.js</b> that downloaded to the same directory (root) of this
88-
<b><span id="url2"></span></b> file.<br /><br />
83+
4. Click the <b>Download</b> button to download the service worker javascript file that is
84+
required for allowing background message notification.<br /><br />
8985

90-
In case you can't download file, you can also create a new <b>firebase-messaging-sw.js</b> by
91-
clicking the <b>Copy SW Content</b> button and paste it to your <b>firebase-messaging-sw.js</b>
92-
file and save to the root directory.<br /><br />
86+
Save the <b>firebase-messaging-sw.js</b> that downloaded to the same directory (root) of this
87+
<b><span id="url2"></span></b> file.<br /><br />
9388

94-
5. Reload this page and click the <b>Initialize & Get Token</b> button again. Now your web client
95-
is ready to receive the messages.<br /><br />
89+
In case you can't download file, you can also create a new <b>firebase-messaging-sw.js</b> by
90+
clicking the <b>Copy</b> button and paste it to your <b>firebase-messaging-sw.js</b>
91+
file and save to the root directory of your web server.<br /><br />
9692

97-
In Windows 11 PC, even notification is granted for your site in the brower notification settings, the
98-
notification may go directly to the notification center instead of displaying pop-up, if <b>Do not
99-
disturb</b> is <b>On</b> in the <a href="ms-settings:notifications"><b>System >
100-
Notifications</b></a> and you have to turn it <b>Off</b> to allow the notification pop-up to
101-
show.<br /><br />
93+
5. Reload this page and click the <b>Initialize</b> button again. Now your web client
94+
is ready to receive the messages.<br /><br />
10295

103-
6. To compose and send the message, under the <b>Compose Message</b> tab, the <b>Client Email</b> and
104-
<b>Private Key</b> are taken from the <b>Service Account</b> key file which required for the FCM HTTPv1
105-
API authorization.<br /><br />
96+
In Windows 11 PC, even notification is granted for your site in the brower notification settings, the
97+
notification may go directly to the notification center instead of displaying pop-up, if <b>Do not
98+
disturb</b> is <b>On</b> in the <a href="ms-settings:notifications"><b>System >Notifications</b></a> and
99+
you have to turn it <b>Off</b> to allow the notification pop-up to
100+
show.<br /><br />
106101

107-
If you don't want to send the message using this app, you can ignore it.<br /><br />
102+
6. To compose and send the messages, under the <b>Compose Message</b> page, the <b>Client Email</b> and
103+
<b>Private Key</b> are taken from the <b>Service Account</b> key file which required for the FCM HTTPv1
104+
API authorization.<br /><br />
108105

109-
The message to be sent should be valid <a
110-
href="https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages" target="_blank">HTTP
111-
v1 FCM messages</a> format.
112-
</div>
106+
If you don't want to send the message using this app, you can ignore it.<br /><br />
107+
108+
The message to be sent should be valid <a
109+
href="https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages" target="_blank">HTTP
110+
v1 FCM messages</a> format.
113111
</div>
114112
<div id="setupTab" class="tabcontent py-3">
115113
<div class="input-group mb-3">

0 commit comments

Comments
 (0)