Native Browser Notifications

Notify users from inside PHP

Send real-time, native browser notifications to everyone via Symfony's Notifier Component.

composer require symfony/ux-notify

What Notify gives you

  • Native notifications

    Trigger browser notifications from PHP.

  • Pushed by Mercure

    Server events reach the browser in real time.

  • Targeted delivery

    Send to one visitor or to everyone.

  • Full payload

    Icon, body, tag and actions.

  • Permission aware

    Asks the visitor before notifying.

Native Browser Notifications

Add Notify to your app.

Trigger native browser notifications from inside PHP

// ... use statements hidden - click to show
use App\Form\SendNotificationForm;
use App\Service\UxPackageRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Notifier\Bridge\Mercure\MercureOptions;
use Symfony\Component\Notifier\ChatterInterface;
use Symfony\Component\Notifier\Message\ChatMessage;
use Symfony\Component\Routing\Attribute\Route;

class NotifyController extends AbstractController
{
    #[Route('/notify', name: 'app_notify')]
    public function __invoke(UxPackageRepository $packageRepository, Request $request, ChatterInterface $chatter): Response
    {
        $package = $packageRepository->find('notify');

        $form = $this->createForm(SendNotificationForm::class);
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            $message = SendNotificationForm::getTextChoices()[$form->getData()['message']];

            // custom_mercure_chatter_transport is configured in config/packages/notifier.yaml
            $message = (new ChatMessage(
                $message,
                new MercureOptions(['/demo/notifier'])
            ))->transport('custom_mercure_chatter_transport');
            $chatter->send($message);

            return $this->redirectToRoute('app_notify');
        }

        return $this->render('ux_packages/notify.html.twig', [
            'package' => $package,
            'form' => $form,
        ]);
    }
}
{% extends 'base.html.twig' %}

{% block body %}
    {{ stream_notifications(['/demo/notifier']) }}
    
    {{ form_start(form) }}
        {{ form_widget(form) }}
    
        <twig:Button variant="primary" type="submit">Send Notification</twig:Button>
    {{ form_end(form) }}
{% endblock %}
Symfony logo

UX Notify

This will be sent to ANY user on this page as a browser notification! (<small>some browsers do not support the Notification API</small>)

Notifier, Mercure, browser

How a notification travels.

The message leaves your PHP code through the Notifier component, crosses Mercure, and the browser displays it natively.

Sent with the Notifier

It is an ordinary ChatMessage, so the rest of your notification code does not change.

$message = new ChatMessage('Your export is ready');

$message->transport('mercure_chatter');

$chatter->send($message);

Routed by topic

Mercure options decide who receives the message: one visitor, a group, or everybody on the page.

new MercureOptions(['/demo/notifier'])

One Twig function

It subscribes the page to the topics and asks the visitor for permission on the first message.

{{ stream_notifications(['/demo/notifier']) }}

Install Notify.

$ composer require symfony/ux-notify

More from Symfony UX.

Notify is one package among many. They share the same Stimulus foundation and install the same way.

Image for the Native UX package

Native

Build native mobile apps that wrap your Symfony web application

Image for the Pagination UX package

Pagination

Paginate any data with numbered pages, lookahead, or cursors.

Image for the Autocomplete UX package

Autocomplete

Ajax-powered, auto-completable select elements

Browse every package

Keep Notify at hand.

Documentation, the people behind it, and where to ask when something does not behave.