[AVLE] Push Notifications Working!

I have implemented push notifications for the AVLE dapp which is a web app.

Push Notifications in Action

The following screenshot shows the push message when the app is in foreground:

As a user clicks the "View" button, then the user visits the post.

In the post, by clicking either the direct parent link or the full context, the user can navigate to the post.

How-to

The AVLE dapp is written in Flutter (dart-lang).

The service worker receives the push message when the app is in background like this:

// service-worker.js
messaging.onBackgroundMessage(function (payload) {
    console.log('Received background message ', payload);

    const title = payload.notification.title;
    const options = {
        body: payload.notification.title,
        data: payload.data,
        icon: '../assets/images/avle_app_icon2.png',
        vibrate: [200, 100, 200, 100, 200, 100, 200],
    };
    self.registration.showNotification('AVLE', options);
}

For the push message received when the app is in background, the following click event handler is used:

// service-worker.js
self.addEventListener('notificationclick', function (event) {
    console.log('notification clicked: ', event);

    const options = {
        data: {
            'body': event.notification.data.body,
            'title': event.notification.data.title,
            'operation': event.notification.data.operation,
            'recipient': event.notification.data.recipient,
            'author': event.notification.data.author,
            'permlink': event.notification.data.permlink,
            'createdAt': event.notification.data.createdAt,
            'backgroud': true,
        },
        notification: {
            'title': event.notification.data.title,
            'body': event.notification.data.body,
        }
    };
    console.log('background push options', options);


    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            console.log('clients', windowClients);
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                console.log('window client. background push options', options);
                windowClient.postMessage(options);
            }
        });
    return promiseChain;
});

The push message in background as well as one in foreground are handled in the following event handler:

window.navigator.serviceWorker!.addEventListener('message', (event) {
      // need this! why?
      event as MessageEvent;
      print('push message data: ${event.data['data']}');

      final createdAt = event.data['data']['createdAt'];
      if (messageAt != createdAt) {
        // handle the duplicated message. especially in foreground case
        setState(() {
          printError('setState. handle the message');
          messageAt = createdAt;
          _handleMessage(event.data);
        });
      }
    });

Finally, the message is handled in _handleMessage function where shows a push message dialog which is shown in the top of this post.

---

Push message is working great!

Please vote for me as a witness and Resteem this post

Thank you everyone for voting.
https://steemitwallet.com/~witnesses

@steemcurator01, Thank you for Your Support