Web push notification does not display/popup during second time onward

See more:

Javascript

Hi, I have an PWA application in MVC. I am currently developing the notification part where a notification toast will be prompted to users on certain cases. I have a service worker which will handle the 'push' event as below codes:

self.addEventListener('push', event => {
    var payload = event.data.text();
    var options = {
            body: payload,
            icon: '~/images/favicon.ico'
            //data : payload
        };

    event.waitUntil(self.registration.showNotification('Notification Testing', options));
});

When I run the application on browser(Chrome), the notification toast does pop out which means the 'push' event is able to handle the push successfully. But when I trigger the 'push' event again, the toast does not show up.

What I have tried:

1. Tried to click on the 'Push' button under Chrome Developer Tool and notification toast shows up.
2. Tried invoke the method in my controller for the second time and notification toast did not show up. Only first time does.
3. Have to clear the cache in Chrome history and clear site data under 'Application' tab in Chrome Developer Tool and reload the page only the notification toast will show up.
4. Have checked service worker and all is ok.