How to Send Web Push Notifications from Your Site?
- WebOps Platforms Bug Tracking & Feedback Software Web Development & Design Website Builder
Web push notifications let you reach visitors after they leave your site. With the right setup, your store can nudge a shopper about an abandoned cart, your blog can ping readers about a new post, and your SaaS can alert users about a key event—all without an app. If you’re building on an AI platform like Hostinger Horizons, you can wire up the Web Push API by describing what you want in chat, preview the subscription flow inside a real-time sandbox, and send test pings before you go live. If you’re still comparing AI builders, this curated view of AI-Powered Website Builders shows where push and other no-code features fit into the broader landscape.
This guide teaches you, step by step, how web push works and how to ship it without writing code. We’ll cover permissions, service workers, VAPID keys, payloads, and testing. We’ll also show where the chat workflow in Hostinger Horizons saves hours: it can generate a compliant permission prompt, create the background worker it needs, configure your VAPID keys, and let you simulate real notifications in the sandbox. If you like to sketch flows before building them, the Vibe Coding Directory lists tools that help you outline the user journey you’ll later implement.
Why web push matters for small teams
Push is the rare channel that cuts through. Unlike email, it doesn’t sit in an inbox. Unlike SMS, it doesn’t cost you per message. And unlike in-app modals, it works even when the user isn’t on your site. That’s great for time-sensitive updates—price drops, account alerts, shipping updates, new episodes, or daily digests.
It’s powerful, but it’s easy to misuse. Ask for permission too soon and most visitors will block your site forever. Send too many notifications and they’ll mute you. The goal is a simple, opt-in experience that triggers messages only when they help the user.
What web push actually is (in plain English)
Web push is built on three parts that all modern browsers support:
-
The Notifications API shows the little card on the device.
-
The Push API lets your site receive a “wake up” event from a push service.
-
A service worker is the background script that runs even when your page is closed.
When a visitor opts in, the browser creates a subscription—a unique endpoint and encryption keys. You store that subscription in your database. Later, your server (or a no-code trigger) sends an encrypted payload to that endpoint. The browser receives it and fires your service worker, which displays the notification.
If you prefer to see this flow in a friendly builder first, you can draft the UX in Lovable or Bolt and then describe it to Hostinger Horizons, which will generate the worker and subscription logic for you.
Prerequisites you can’t skip
You need HTTPS. Browsers only allow push on secure origins. You also need an app icon (at least 192×192) and a short, clear message strategy. In the US, if your notifications are marketing, include opt-out instructions and keep a clean unsubscribe path. If you serve visitors in the EU, tie push to your privacy and cookie policy so consent is clear.
On iOS and iPadOS, web push is supported in Safari and installed web apps, but the permission model is a bit stricter. Test your prompt on Apple devices and make sure your calls to action make sense on small screens.
Plan your permission prompt like a marketer
The native browser prompt is binary and abrupt. Before it appears, show a small in-page nudge that explains why notifications matter: “Get alerts when your order ships.” Trigger that nudge after intent, not on the first page view—think subscribe click, add-to-cart, or “follow this topic.”
In Hostinger Horizons, you can ask the chat to generate a soft ask card with headline, body, and two buttons. You can also request a snackbar for mobile. Horizons will wire the soft ask so it only shows once per user and then calls the native prompt.
VAPID keys made simple
Most browsers require VAPID (Voluntary Application Server Identification). It’s a pair of public/private keys that says “these messages really come from your site.” Traditionally you’d generate keys in a CLI, paste them into configs, and keep the private key secret on your server.
In Horizons, you can say, “Create VAPID keys for this project; store the private key securely; expose the public key to the client for subscription.” The builder provisions the keys, saves them in secure storage, and uses the public key when the browser subscribes the user. If you ever rotate keys, Horizons updates the worker and keeps old subscriptions valid until you migrate them.
The service worker without writing code
A service worker is just a background script. It listens for the push event, parses the payload, and calls showNotification. That usually looks like a small chunk of JavaScript. With a no-code builder, you don’t need to write it. Ask Horizons to “Create a service worker named push-sw that displays notifications with title, body, icon, and click action to open the right page; handle notificationclick to focus an open tab if present.”
Horizons will generate the worker, register it on your site, and hot-reload it in the sandbox so you can test changes without shipping them to production. If you want to peek under the hood anyway, tools such as Windsurf or Cursor help you think through worker logic before you hand the specs to the chat.
Subscribing a user, step by step
Here’s the flow you want, regardless of platform:
Ask permission after intent.
If the user agrees, call the Push API to create a subscription using your VAPID public key.
Send that subscription object to your backend or to a secure no-code data store.
Confirm with a welcome notification that explains how to manage settings.
In Horizons, that becomes one prompt: “Add a push subscribe button to the header; on click, show a soft ask; if accepted, request native permission, create subscription using our VAPID public key, save it to subscriptions collection (email, endpoint, keys, createdAt); then show ‘You’ll now get shipping updates.’” Horizons wires the UI, the data save, and the confirmation.
Sending your first notification
To send a message, you need a small server-side step because the payload must be signed with your VAPID private key. On no-code, that step is hidden behind a simple action. In Horizons, ask: “Create an admin tool that sends a test push to a given email; title ‘Order Shipped,’ body with tracking number; open /orders/:id on click.” It will build a secure, admin-only page and use your stored subscriptions to deliver a message.
If you schedule campaigns, pair push with an internal queue. Builders like Tempo help you map the timing logic before you set it up. Horizons can then add a scheduler that sends digests at 10 a.m. local time or triggers alerts when an order status changes.
Payloads that are useful, not noisy
Good notifications are short and specific. They say what happened and what to do next. They include a clear icon and a link that opens the exact screen the user expects. Avoid generic blasts like “New blog post!” Without context, users ignore them. With context—“New post in the ‘JavaScript’ topic you follow”—they click.
Use actions for quick choices. Web push supports buttons like “Track package” or “Snooze.” Horizons can add those buttons to your worker. On click, it routes the user to the right page or calls an endpoint that records the choice.
Segmentation and throttling
Don’t send everything to everyone. Segment by interest, plan, language, and platform. If a user never clicks your “new arrival” alerts, reduce their frequency or turn that category off for them. If they always click shipping updates, keep those on.
Throttle bursts. If your system generates multiple events for the same user in a few minutes, collapse them into one digest. In Horizons, ask for a small buffer: “Batch notifications by user in a 5-minute window; send one summary if more than one event arrives.” That keeps you from feeling spammy.
A/B testing your prompts and timing
Two tiny tests can boost opt-in rate. First, vary the text of your soft ask. Second, vary when you ask. For content sites, asking after a reader finishes a post usually outperforms asking on page load. For e-commerce, asking after add-to-cart feels most relevant.
You can run these tests as variants controlled by a feature flag. Describe the variants and the success metric in Horizons: “Variant A: ask after 30 seconds; Variant B: ask after add-to-cart; measure native permission accept rate and first push click-through.” Use the dashboard to watch which variant wins. If you like planning experiments as a release calendar, V0 is a handy way to outline the phases before you run them.
Analytics that tell you what’s working
Track four basic stats: permission acceptance rate, subscription count, delivery success, and click-through. Layer on topic-level engagement if you send different categories. The picture you want is simple: Are we asking the right people, at the right time, with the right topics?
Horizons can chart these metrics in-app and annotate spikes when you changed wording or timing. For copy testing, small helpers like Lazy AI and Fine AI can draft alternatives you’ll then paste into your soft ask or notification body.
Privacy, consent, and trustworthy messaging
Even when web push isn’t strictly covered by cookie laws, treat it with the same respect. Tell users what kinds of alerts you’ll send. Keep a preferences page where they can pick topics or pause alerts. Honor “quiet hours.” If you serve the EU, mention push clearly in your privacy policy.
Horizons can generate a basic privacy page and tie push preferences to user profiles. Ask for a “Notifications” section in account settings and a one-click unsubscribe on every notification. That’s how you build long-term trust.
Testing in a real-time sandbox before you go live
Bugs in push are often timing bugs or platform quirks. You need a safe place to try them. With Hostinger Horizons, each change appears in a real-time sandbox. Subscribe a test account, trigger an event, and watch the notification appear. You can simulate offline delivery, try different payload sizes, and confirm that clicking the card opens the right page—even when no tab is open. When it’s solid, launch to production with one click; the exact worker and keys you tested go live.
If you want to storyboard the test plan first, set up a tiny checklist in Tempo: subscribe, revoke permission, resubscribe, test iOS, test Android, test Windows, test macOS. Then tell Horizons to run through each step using a staging URL and test data.
Debugging the common “gotchas”
If you never see the prompt, check HTTPS and make sure you didn’t ask too soon on iOS (some flows require user interaction first). If you see the prompt but can’t create a subscription, verify you’re using the current VAPID public key on the client and that your service worker registered successfully. If sends fail, your VAPID private key may be wrong or your server might be using an expired subscription—re-subscribe the test user. If clicks do nothing, handle the notificationclick event in the worker and focus an open tab or open a new one.
Horizons surfaces these issues in plain language. It warns if the worker fails to register, if the key pair is missing, or if the payload is too large. Because hosting, SSL, and CDN are bundled, you don’t waste time wiring those basics.
Scale and reliability without extra ops
Push delivery happens through each browser’s own push service. You don’t maintain that infrastructure; you just send correctly signed messages. What you do maintain is a clean list of live subscriptions. When a send returns “gone,” remove that subscription so you don’t waste cycles. Horizons can prune dead endpoints on a schedule so your database stays lean.
For big sends, spread delivery across a few minutes so you don’t spike server load. If your site has global traffic, schedule by local time zone. Horizons supports simple schedules like “Send at 10 a.m. local time” based on the user’s profile or last seen location.
Two paragraphs that put Hostinger Horizons in context for push
Hostinger Horizons turns a technical web push checklist into a clear chat flow. You describe the soft ask, when to show it, and what topics you’ll support. Horizons creates the UI, registers the service worker, provisions and stores VAPID keys, and adds a secure place to save subscriptions. In the real-time sandbox, you can subscribe a test user, fire a sample payload, and watch the notification appear across desktop and mobile. Because hosting, SSL, and deployment are included, you don’t lose a day wiring servers, certificates, or build steps—your tested changes go live in one click, exactly as you saw them.
After launch, Hostinger Horizons gives you practical control. You can segment by interest, language, or plan, schedule sends, and cap frequency. You can A/B test when you ask for permission, and see accept rates and click-throughs right beside the toggles that control each variant. If a campaign underperforms or a payload misbehaves, roll back in a second using version history. If you serve a global audience, Horizons’ 80+ language support lets you translate the soft ask and notification text with a prompt, so your messages feel native everywhere you ship them.
Wrapping up your first push project
Start small and specific. Pick one alert that truly helps users, like “order shipped” or “new episode in a topic you follow.” Add a soft ask that appears only after intent. Generate your VAPID keys, create the service worker, and subscribe your first test account in the sandbox. Send one message end to end. When that works, add segmentation, add A/B testing for timing, and add one digest rule that prevents floods. With that pattern, push becomes a helpful, low-maintenance channel that grows your engagement with care.
