单页应用程序通知问题

Question

我有一个单页应用程序。我将vuejs用作前端，将laravel 5.7用作后端。我正在使用webPush和服务人员将通知推送给用户。问题是，当用户脱机并返回联机状态时，会推送许多通知。我只需要推送服务工作者队列中的最后一个通知以及队列中其他通知的数量。

//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);
            }
        })
    );
});

//用户模型

<?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 [];
    }
}

//通知类示例

<?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

您可以在调用tag时使用showNotification选项以仅显示最后一个通知：

https://notifications.spec.whatwg.org/#using-the-tag-member-for-a-single-instance