php - Angular 推送消息未显示

Question

我正在开发一个 Angular 应用程序，它应该从服务器(带有 Webpush 的 Laravel)接收推送通知，然后将其显示为通知。为此，我正在使用 Angular Service Worker。

目前，我可以使用 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 中的代码，它在 ToWebPush 方法中发送通知；

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

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

}

Answer 1

刚刚解决了。

问题在于 Laravel 发送 Notification JSON 的方式。我相信格式已更改并且库未更新。事实上，我在使用 Express 后端进行测试时遇到了同样的问题。正确的语法必须是这样的。

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

但是，webpush 库(并且在某些教程中)显示通知语法如下(没有初始通知标记)

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

为了在 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;
    }
}