Android App with Push Notification Sent From ESP

At the beginning of the YouTube video, you will see how it's working. Also, in this video, I've showed how to build it.

Introduction

It often happens that we want to get a notification on the phone when an ESP (or RPi) comes to an event, regardless of whether the application is running or when the phone is idle. In this tutorial I will show you how to do it using push notifications (it works on the android, and all links to open in the smartphone open (preferably) in the chrome browser – has the best support so far for the PWA application and push notifications from them).

By the app we will created it will be also possible to control LED state.

I've used platform RemoteMe (I'm the author of this platform ) it's hosting your files for free, and helps to communicate with ESP. So first please create an account at : https://app.remoteMe.org.

The whole tutorial as usual in out of the box courses – you do not have to write the code – however more advanced users can easily (edit html, javascript, manifestes) fully modify the application. Recently prefers this type of courses because they work best – you get something working immediately, and then you can play with it anyway. 😉

You can read about the PWA application in the article on the PWA application in RemoteMe, as well as the notifications in the RemoteMe system.

Let’s begin

In the RemoteMe platform, click:

In the Connections tab we have a connection schematic:

We connect a button and a LED according to the scheme (you can use any module with ESP8266 or ESP32)

In the Build It step, we complete the network name and password (you can then complete it directly in the code in the Arduino IDE)

Then click “Next Step” until you reach the last step.

Here click “Build Project“:

We download and unpack the “Arduino IDE” and upload to ESP remember before installing the libraries listed in the window that appeared while downloading the sources.

After uploading the program, the icon of our device will change to connected:

Now it’s time to install the Android application click on the icon for installation on the smartphone, we choose Android:

Then in the window that appears, click Configure, we scan the QR code that appears and open in the smartphone best in the Chrome browser.

The browser will ask us whether to add applications to the main screen, and whether we want to receive push notifications – we agree. (more about installation here and here)

The application will appear on our screen:

And after it opens:

It is important that the icon of notification be green and disappear – it means that notifications work if you do not click on the bell or refresh the application (dragging your finger from the top to the bottom).

We close applications.

After clicking on the button next to ESP, the LED will change to the opposite state and we will receive notifications on the phone:

Link from the application installation on Android:

Then we will also receive notifications on the PC. 🙂

If there is a need to remove notifications here in the section “Managing instances of the application where notification is sent” I wrote how to do it.

Summary

The code on ESP has comments, where more complicated fragments have been discussed, I encourage you to modify and play with the project.

Greetings,

Maciej

If you want, you can follow my FB page:

https://www.facebook.com/remoteMe.org

There, you will be notified about newest tutorials or discuss features. :-)