Creating and Sending Notifications

This page covers how to create, customize, and send web push notifications with Filament Webpush.

Creating Push Notifications

To create a push notification, you need to create a notification class that uses the WebPush channel:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Notification;
use NotificationChannels\WebPush\WebPushChannel;
use NotificationChannels\WebPush\WebPushMessage;

class NewPostPublished extends Notification implements ShouldQueue
{
    use Queueable;

    protected $post;

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

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

    public function toWebPush($notifiable, $notification): WebPushMessage
    {
        return (new WebPushMessage())
            ->title('New Post Published')
            ->icon('/images/icons/icon-72x72.png')
            ->badge('/images/icons/icon-72x72.png')
            ->body('A new post has been published: ' . $this->post->title)
            ->action('View Post', url('/posts/' . $this->post->id))
            ->data(['post_id' => $this->post->id])
            ->options(['TTL' => 3600]);
    }
}

WebPushMessage API

When creating notifications, you can use the following methods on the WebPushMessage class:

Testing Notifications

You can test if WebPush notifications are working correctly by using the built-in test command:

php artisan webpush:test {user_id}

This command will:

1. Find the user with the provided ID
2. Check if the user has any push subscriptions
3. Send a test notification to that user

Example:

php artisan webpush:test 1

Remember that you need to have a queue worker running for the notifications to be delivered:

php artisan queue:work

Sending Notifications

To send a notification, you can use the standard Laravel notification system:

use App\Notifications\NewPostPublished;

$user->notify(new NewPostPublished($post));

Important: Web Push notifications are queued by default. You must have a queue worker running for notifications to be delivered. Start a queue worker with:

php artisan queue:work

Advanced Usage

Custom Service Worker

If you already have a service worker for your application, you can merge the push notification functionality into your existing service worker. The key event listeners you need to implement are:

self.addEventListener("push", (event) => {
    if (!(self.Notification && self.Notification.permission === "granted")) {
        return;
    }

    const data = event.data?.json() ?? {};

    event.waitUntil(
        self.registration.showNotification(data.title, {
            body: data.body,
            icon: data.icon,
            badge: data.badge,
            // ...other notification options
        })
    );
});

self.addEventListener("notificationclick", (event) => {
    event.notification.close();

    const data = event.notification.data;

    if (data && data.action_url) {
        event.waitUntil(clients.openWindow(data.action_url));
    }
});

Security Best Practices

When working with web push notifications, remember these security best practices:

1. Keep your VAPID private key secure and never expose it in client-side code
2. Be mindful of the content you send in notifications as they could be visible even on locked screens
3. Always implement proper user authentication before subscribing users to notifications
4. Consider how frequently you send notifications to avoid annoying users