Php 角度推送消息不显示

我正在开发一个Angular应用程序，它应该从服务器（Laravel with Webpush）接收推送通知，然后将其显示为通知。对于这一点，我使用的是角度服务工人

目前，我可以使用chrome的“应用程序调试”选项卡测试推送通知，并且该通知会按其应有的方式显示。但是，当我尝试从服务器推送通知时，应用程序会收到通知，但不会显示任何内容。作为一种解决方法，我通过浏览器的通知API直接创建了通知，它显示了。但是，当应用程序未打开时，这不起作用

目前，这是我推送服务中的TS

import { Injectable } from "@angular/core";
import { RestService } from "./rest.service";
import { AuthService } from "./auth.service";
import { SwPush } from '@angular/service-worker';

@Injectable({
  providedIn: "root"
})
export class PushService {
  readonly VAPID_PUBLIC_KEY = VAPID_KEY

  constructor(
    private restservice: RestService,
    private authservice: AuthService,
    private swPush:SwPush
  ) {
    if (navigator.serviceWorker) {
      this.initNotifications();

      /*This is the part where i test the message reception from the server, in order to make it work i 
        use the Browser Notification API and it shows as it should. However, it doesn't fire the 
       notification if i dont use the "New Notification" and with this approach, the service worker won't 
       work*/

      this.swPush.messages.subscribe((message:any)=>{
        var notification = new Notification(message.title,{
          body:message.body
        })
      })
    }
  }

  initNotifications() {

        this.swPush.requestSubscription({
          serverPublicKey: this.VAPID_PUBLIC_KEY
      }).then(sub => this.storePushSubscription(sub))

  }


  storePushSubscription(pushSubscription) {


    let subscriptionData:any = (JSON.parse(JSON.stringify(pushSubscription)));
    subscriptionData.user_id = this.authservice.loggedUser.user_id;

    console.log(subscriptionData);

    this.restservice.post(subscriptionData, "push")
  }

}

这是Laravel中的代码，它通过TowerBush方法发送通知

类推送扩展通知 { 使用可排队

protected $notificactionObject;

public function __construct($notificactionObject) {
    $this->notificactionObject = $notificactionObject;
}

public function via($notifiable)
{
    return [WebPushChannel::class];
}

public function toWebPush($notifiable, $notification)
{
    return (new WebPushMessage)
    ->title($this->notificactionObject->title)
    ->body("Body Text");
}

}刚刚解决了这个问题

问题在于Laravel发送通知JSON的方式。我相信格式改变了，图书馆没有更新。事实上，我在使用Express后端进行测试时也遇到了同样的问题。正确的语法必须是这样的

{
notification: {
    "body" : "Lorem Ipsum",
    "title" : "Lorem Ipsum",
    "icon" : "Icon URL",
  }}

但是，webpush库（以及在某些教程中）显示通知语法如下（没有初始通知标记）

为了在Laravel中解决这个问题，我必须创建一个新类，该类将具有WebpushMessage类型的通知属性。因此，完整的通知代码如下

<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use NotificationChannels\WebPush\WebPushMessage;
use NotificationChannels\WebPush\WebPushChannel;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Support\Arr;


class Push extends Notification
{
    use Queueable;

    protected $notificactionObject;

    public function __construct($notificactionObject) {
        $this->notificactionObject = $notificactionObject;
    }

    public function via($notifiable)
    {
        return [WebPushChannel::class];
    }

    public function toWebPush($notifiable, $notification)
    {

        $wpm = (new WebPushMessage)
        ->title($this->notificactionObject->title)
        ->body(strip_tags($this->notificactionObject->description_html))
        ->icon('https://freeiconshop.com/wp-content/uploads/edd/notification-flat.png');

        $rwpm = (new RealWebPushMessage)->notification($wpm);

        return $rwpm;
    }

}



class RealWebPushMessage
{
    /**
     * @var WebPushMessage
     */
    protected $notification;
    protected $options = [];

    public function notification(WebPushMessage $wpm)
    {
        $this->notification = $wpm;
        return $this;
    }

    public function toArray()
    {
        $cArray = $this;
        $cArray->notification = $cArray->notification->toArray();
        return Arr::except(array_filter(get_object_vars($cArray)), ['options']);
    }

    public function getOptions()
    {
        return $this->options;
    }
}

<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use NotificationChannels\WebPush\WebPushMessage;
use NotificationChannels\WebPush\WebPushChannel;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Support\Arr;


class Push extends Notification
{
    use Queueable;

    protected $notificactionObject;

    public function __construct($notificactionObject) {
        $this->notificactionObject = $notificactionObject;
    }

    public function via($notifiable)
    {
        return [WebPushChannel::class];
    }

    public function toWebPush($notifiable, $notification)
    {

        $wpm = (new WebPushMessage)
        ->title($this->notificactionObject->title)
        ->body(strip_tags($this->notificactionObject->description_html))
        ->icon('https://freeiconshop.com/wp-content/uploads/edd/notification-flat.png');

        $rwpm = (new RealWebPushMessage)->notification($wpm);

        return $rwpm;
    }

}



class RealWebPushMessage
{
    /**
     * @var WebPushMessage
     */
    protected $notification;
    protected $options = [];

    public function notification(WebPushMessage $wpm)
    {
        $this->notification = $wpm;
        return $this;
    }

    public function toArray()
    {
        $cArray = $this;
        $cArray->notification = $cArray->notification->toArray();
        return Arr::except(array_filter(get_object_vars($cArray)), ['options']);
    }

    public function getOptions()
    {
        return $this->options;
    }
}