1. Place the
files in the root directory of the web server.
The web server can be local host e.g.
XAMMP,
UiformServer, phython and Node.js.
When you host the web app on remote server, browser should navigate through the HTTPS protocol
(https://) because FCM SDK is supported only in pages served over HTTPS.
When you host the web app on local host, browser can navigate through http://localhost.
2. Under the
Initialization tab, specify the information from
Project
settings > General > Your apps
The
VAPID key can be taken from the
Web Push certificates section under
Project settings > Cloud Messaging
3. Click the
Initialize & Get Token button to initialize your Firebase Cloud Messaging Web Client
and get the registration token to test with your Arduino device.
You also have to allow or enable notification for your web server site URL in your web browser
settings or
pop-up.
After the registration token was generated, you can now use for the registeration token in your
Arduino code.
4. Click the
Download SW File button to download the service worker javascript file that is
required for allowing background message notification.
Save the
firebase-messaging-sw.js that downloaded to the same directory (root) of this
file.
In case you can't download file, you can also create a new
firebase-messaging-sw.js by
click the
Copy SW Content button and paste it to your
firebase-messaging-sw.js
file and save to the root directory.
5. Reload this page and click the
Initialize & Get Token button again. Now your web client
is ready to receive the messages.
In Windows 11 PC, even notification is granted for your site in the brower notification settings, the
notification may go directly to the notification center instead of displaying pop-up, if
Do not
disturb is
On in the
System >
Notifications and you have to turn it
Off to allow the notification pop-up to
show.
6. To compose and send the message, under the
Compose Message tab, the
Client Email and
Private Key are taken from the
Service Account key file which required for the FCM HTTPv1
API authorization.
If you don't want to send the message using this app, you can ignore it.
The message to be sent should be valid
HTTP
v1 FCM messages format.