Payload / message should have an index 'notification'

[marydelapedra]

The notification does not appear if you are going to use the angular/pwa package as a service worker because in the payload, the main requirement is it should have one root object containing one property named notification, otherwise the messages will not be displayed to the user.

I think it is better that the developer will define the message freely inside the custom notification class? I have to hack the package specifically the WebPushChannel class, send function and add an index notification on the payload variable. Is there any other way to do this?

[poruchik85]

I change my PushNotification:
from

public function toWebPush($notifiable, $notification): WebPushMessage
{
    return (new WebPushMessage)
        ->icon('img/logo.png')
        ->title('Test message')
        ->body($this->msg);
}

to

public function toWebPush($notifiable, $notification): WebPushMessage
{
    $msg = (new WebPushMessage);
    $msg->notification = [
        'icon' => 'img/logo.png',
        'title' => 'Test message',
        'body' => $this->msg,
    ];
    return $msg;
}

This is workaround, but it works

[imrodrigoalves]

Hey,

First thanks for noticing the Angular issue was eventuality hit that.

Second I'd not recommend changing the source code of the library since you end up needing to maintain your own version of it.

I'd suggest extending the base WebPushMessage like below.

<?php

namespace App\Notifications\Models;

use Illuminate\Support\Arr;
use NotificationChannels\WebPush\WebPushMessage;

class AngularWebPushMessage extends WebPushMessage {
    public function toArray()
    {
        return ['notification' => parent::toArray()];
    }
}

Using this approach you retain all previously provided functionality.

public function toWebPush($notifiable, $notification)
    {
        return (new AngularWebPushMessage)
            ->title('Approved!')
            ->icon('/approved-icon.png')
            ->body('Your account was approved!')
            ->action('View account', 'view_account')
            ->options(['TTL' => 1000]);
    }

Output:

{
  "notification": {
    "title": "Approved!",
    "actions": [{ "title": "View account", "action": "view_account" }],
    "body": "Your account was approved!",
    "icon": "/approved-icon.png"
  }
}

[joostdebruijn]

Thanks for your suggestion @imrodrigoalves! I think that's a proper solution for this issue. If someone has a suggestion for a better solution within this package, just open a PR.