Single page application notification problem - laravel

Question

I have a single page application. I use a vuejs as a front-end and laravel 5.7 as a backend. I'm using a webPush and service worker to push notifications to users. The problem is when the user is offline and return back online a lot of notifications are pushed. I need to push only the last notifications in service worker queue and the number of other notifications in the queue.
//Listen to Push from service worker file
self.addEventListener('push', (e) => {
let data
if (e.data) {
data = e.data.json()
}
const options = {
body: data.body,
icon: '/images/fav/android-icon-192x192.png',
image: '/storage/users'+data.image||'/images/profiles/profile.png',
badge: '/images/fav/android-icon-96x96.png',
actions:data.actions,
data:data.data
}
e.waitUntil(self.registration.showNotification(data.title, options))
});
self.addEventListener('notificationclick', function(event) {
var url = event.notification.data.location;
event.waitUntil(
clients.matchAll({type: 'window'}).then( windowClients => {
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
//User model
<?php
namespace App;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;
use NotificationChannels\WebPush\HasPushSubscriptions;
class User extends Authenticatable implements JWTSubject
{
use Notifiable;
use HasPushSubscriptions;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'fname','lname',"username", 'email', 'password',"code","active"
];
protected $guard_name = 'api';
/**
* The attributes that should be hidden for arrays.
*
* #var array
*/
protected $hidden = [
'password', 'remember_token',
];
// Rest omitted for brevity
/**
* Get the identifier that will be stored in the subject claim of the JWT.
*
* #return mixed
*/
public function getJWTIdentifier()
{
return $this->getKey();
}
/**
* Return a key value array, containing any custom claims to be added to the JWT.
*
* #return array
*/
public function getJWTCustomClaims()
{
return [];
}
}
//example for notification class
<?php
namespace App\Notifications;
use App\PostEvent;
use App\User;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use NotificationChannels\WebPush\WebPushChannel;
use NotificationChannels\WebPush\WebPushMessage;
class interestEvent extends Notification implements ShouldQueue
{
use Queueable;
/**
* Create a new notification instance.
*
* #return void
*/
public $event;
public $user;
public function __construct(PostEvent $event,User $user)
{
$this->event=$event;
$this->user=$user;
}
/**
* Get the notification's delivery channels.
*
* #param mixed $notifiable
* #return array
*/
public function via($notifiable)
{
return ['database','broadcast',WebPushChannel::class];
}
public function toDatabase($notifiable)
{
$message="event you are interested in will begin tomorrow";
$name=$this->user->fname;
if($name){
$name .=" ".$this->user->lname;
}
else
{
$name=$this->user->username;
}
return [
'user_id' => $this->user->id,
"name"=>$name,
'message' => $message,
'image'=>$this->user->image,
'post_id'=>$this->event->post_id,
'eventName'=>$this->event->name,
];
}
/**
* Get the array representation of the notification.
*
* #param mixed $notifiable
* #return array
*/
public function toArray($notifiable)
{
$message="event you are interested in will begin tomorrow";
$name=$this->user->fname;
if($name){
$name .=" ".$this->user->lname;
}
else
{
$name=$this->user->username;
}
return [
'id' => $this->id,
'read_at' => null,
'data' => [
'user_id' => $this->user->id,
'message' => $message,
"name"=>$name,
'image'=>$this->user->image,
'post_id'=>$this->event->post_id,
'eventName'=>$this->event->name,
'location'=>"/home/posts/".$this->event->post_id
],
];
}
public function toWebPush($notifiable, $notification)
{
$message="event you are interested in will begin tomorrow";
$name=$this->user->fname;
if($name){
$name .=" ".$this->user->lname;
}
else
{
$name=$this->user->username;
}
$message="(".$this->event->name.") ".$message;
return (new WebPushMessage)
->title('Ajwbtcom')
->body($message)
->action('See Event', "/home/posts/".$this->event->post_id)
->image($this->user->image)
->data( [
'user_id' => $this->user->id,
'message' => $message,
"name"=>$name,
'image'=>$this->user->image,
'post_id'=>$this->event->post_id,
'eventName'=>$this->event->name,
'location'=>"/home/posts/".$this->event->post_id
]);
}
}

Answer 1

You can use the tag option when you call showNotification in order to display only the last notification:
https://notifications.spec.whatwg.org/#using-the-tag-member-for-a-single-instance