Browser push notifications for your site's admin, with no app to install

The owner of a small shop does not sit in the admin. They hear of a new order from an email, if they open it, and of a failed backup from nobody. What they do look at, a hundred times a day, is the phone's lock screen. Getting the site there used to mean an app: a native one to build and publish, or a third party's app with an account, a plan and a logo that is not yours.

A browser can show a device's own notifications, the same ones its apps show, and has been able to for years: web push, with a service worker and a pair of VAPID keys. Wiring it to a site is still the work: the keys made and kept, a subscription per browser that must be stored and renewed, a service worker served from the site's own address, a payload that opens the right record on a tap, and the subscription that dies when the browser is reset. kitloom/notifications has it as a channel beside Telegram, Slack, Discord, Teams, Pushover and email, and the owner turns it on with one tap.

Ask the agent

With kitloom/ai connected, an agent whose user manages notifications lists the channels with their news (notifications_list), changes their name, their topics and whether they are on (notifications_update), and sends a test (notifications_test):

• "Send the shop's orders to my phone, and the failed backups to the laptop too."
• "Which channels stopped taking messages this week?"
• "Send a test to my phone."

A browser channel is turned on only in the browser itself, never by an agent: the permission is the device's to give.

Set up in the admin

Notifications → Channels → New channel: a name after the device — My phone — and under Send to, Browser. The Browser section has nothing to type: it says to save the channel first, then turn it on from the device that should be told. The news worth acting on is ticked already; the rest is a tick away.

1. Save. The channel is off for now: no browser takes it yet. The section now has the button, Turn on in this browser.
2. On the phone, signed in to the admin, open the channel and tap the button. A page of the site says what will happen; its button asks the browser's permission. Allow it, and the page comes back to the channel, on and naming the browser: Chrome on Android, since ….
3. Send test: the notification shows on the phone, even with the site closed. A tap on it opens the record in the admin.

From then on each piece of news the channel ticked lands on the phone as it happens: a new order with the customer and the items, a booking request, a form message, a comment waiting, a failed health check. It reads like any other notification — the heading, the lines about the record, the site's name — in the site's language.

One channel is one browser on one device. The laptop gets a channel of its own, and a second phone another; the shop's orders can go to one and a failed backup to both. Two channels on the same browser both reach it.

What works: Chrome, Edge, Firefox, Opera and Samsung Internet on Android and on computers, Safari on a Mac. On an iPhone or iPad, iOS 16.4 and later, only from the Home Screen: in Safari, Share → Add to Home Screen, open the site from the new icon, sign in there and turn the channel on from that window. A browser in private mode does not keep the permission.

When the browser lets go

A browser may drop the notifications: it was reset, its data was cleared, the permission was taken back in its settings. The next message then fails for good. The channel is turned off at once, the site's admin gets an email that says which browser, the list says it stopped taking them, and Site Health warns while a browser channel has no browser. Opening the channel in that browser and tapping Turn on in this browser again is the whole fix.

Nothing else changes with the channel. Repeats are held back as on every channel — a product that stays low in stock reaches the phone once an hour, not at every order — and a new order is never held back. Messages go from the queue, so a push service that is slow does not slow the checkout. The site keeps no copy of them.

For a Laravel developer

The site signs its notifications with keys of its own, VAPID, made the first time a browser is turned on and kept in the options, the private one encrypted with the application key. A new application key loses it, and the browsers then need turning on again. The channel is WebPushChannel on minishlink/web-push, with a payload of a title, a body, the record's address and a tag; the page that asks the permission is /notifications/push/{id} and the service worker /notifications/push-worker.js, both the site's own. A test or a demo keeps off the network with a Guzzle handler in the module's config, or FakesChannels::fakePush().

Your own module's news reaches the phone the same way as every other channel: a NotificationTopic tagged in the container, answering a Notice with a title, a few lines and the record. Nothing in it names a browser, a chat or a provider; the owner chooses where each topic goes. It comes with both admins, Filament and Nova.

Watch it

A short lesson from the admin, narrated:

Notifications in the browser, on your phone: a channel per device, turned on with one tap, a test that shows with the site closed

Try it

Open a sandbox in one click, with no sign-up: Filament or Nova. Every detail — the news each module brings, the other channels, the settings, the agent's tools — is in the Notifications guide; how the Telegram and Slack channels work is in Telegram and Slack notifications in Laravel.