Проблема с уведомлением одностраничного приложения

Проблема с уведомлением одностраничного приложения

20.10.2019 07:44:39 Просмотров 62 Источник

У меня есть одна страница приложения. Я использую vuejs фронт-энд фреймворк Laravel и 5.7 в качестве бэкэнда. Я использую webPush и service worker для отправки уведомлений пользователям. Проблема в том, что когда пользователь находится в автономном режиме и возвращается обратно в интернет, много уведомлений выталкивается. Мне нужно нажать только последние уведомления в очереди service worker и количество других уведомлений в очереди.

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

https://stackoverflow.com/questions/58475145/single-page-application-notification-problem#comment103283786_58475145
Я изменил вопрос и добавил код для модели пользователя, пример для класса уведомлений и код для прослушивания уведомления в файле Service worker
https://stackoverflow.com/questions/58475145/single-page-application-notification-problem#comment103285944_58475145
Вы можете установить условие для отображения уведомления, отправить метку времени из бэкэнда в объект данных. Если отметка времени находится в пределах последних 3 минут или 2 минут, только те уведомления, отображаемые пользователю, как это. новая дата("2019-10-17 01:10") > новая дата("2019-10-17 01:08"), В противном случае он будет игнорировать эти уведомления

Ответы - Проблема с уведомлением одностраничного приложения / Single page application notification problem

collimarco

20.10.2019 11:43:59

Вы можете использовать опцию tagпри вызове showNotificationдля отображения только последнего уведомления:

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

Закрыть X