[AVLE] Push Notifications Receiving in a Browser

AVLE is a web app which runs on a browser. It is not a mobile app which requires review by Apple or Google.

Recent web technology enables a web app to receive push notifications. Isn't it awesome?

AVLE dapp also has push notifications feature!

Push Notifications Setting

AVLE dapp will support several push notifications. These are examples of push notification types.

How to receive Push Notification in a Browser

Here are steps to implement to use Firebase Cloud Messaging (for Flutter web project):

1. Setup Firebase Project

2. Setup web

• setup firebase messaging in web/index.html
• create a firebase-messaging-sw.js

3. Get permission for Push Notification in a browser

4. Get push token of the app

5. Make a message listener

6. Send a test message in Firebase Cloud Messaging

7. Receive the message in the app

Push Notifications Test

This video was very useful to setup notifications in a web app. All the steps are explained very well.

To get the push notifications in the app, we need to know the app's push token which can be obtained by this code:

    // get push token
    FirebaseMessaging.instance.getToken().then((token) {
      print('fcm token: $token');
}

Save the token value.

Then, let's go to the Firebase Console, and find Cloud Messaging menu.

You see the token value. This is what you need to test push notifications. And press send.

App in Foreground

App in Not Foreground

When you print the message, the following will be shown in the console.

When clicking the above message, then it navigates to the app.

---

Now the receiving push notifications has been tested, the next thing is to implement a server to send push notifications by catching messages from block data.

Resteem / Vote / Comment / Follow / Support

This project will Make STEEM Great Again! I, the developer of PLAY STEEM mobile app, am doing my best to bring people to the STEEM ecosystem.

Thank you for your support.

@steemcurator01