Push Notification Payload Builder

Introduction

Web Push notifications require careful payload construction. The notification title, body, icons, actions, click behavior, and platform limits all affect whether the notification works well in production.

This tool helps you build and inspect the payload before integrating it with your application server and service worker.

How it works

The tool collects your notification fields, validates them locally, and produces a JSON payload shaped for use inside a service worker push handler. It also generates a starter service worker snippet that displays the notification and handles clicks.

• Payload generation happens locally.
• Remote preview images are not loaded automatically.
• VAPID key checking validates format only.
• Actual delivery must be implemented by your application server.

How to use

1. Enter the notification title and body.
2. Add optional icon, badge, image, tag, and click URL.
3. Add up to two notification actions if needed.
4. Optionally check a VAPID public key format.
5. Click Build payload.
6. Copy the JSON payload and service worker snippet.

Practical example

A simple payload may look like this:

{
  "title": "New update available",
  "options": {
    "body": "Your changes have synced successfully.",
    "icon": "/icons/icon-192x192.png",
    "badge": "/icons/badge-72x72.png",
    "tag": "sync-update",
    "data": {
      "url": "/dashboard/"
    }
  }
}

Use cases

• Prototyping notification payloads before backend integration.
• Testing notification actions.
• Checking payload size before deployment.
• Preparing examples for documentation.
• Debugging missing notification fields.

Best practices

• Keep payloads small.
• Use meaningful titles and concise bodies.
• Provide a click URL for better user engagement.
• Use tags to replace related notifications.
• Test notifications across platforms and screen sizes.

Common mistakes

• Pasting private keys into client-side tools.
• Using oversized payloads.
• Adding too many actions for supported platforms.
• Forgetting that push delivery requires a server.
• Assuming every browser supports every notification field.

Limitations

• This tool does not send real push messages.
• It does not validate push subscriptions.
• VAPID validation is limited to public key format.
• Notification rendering varies by operating system and browser.

Browser compatibility

• Chrome and Edge: Strong Notifications and Push API support.
• Firefox: Supports many notification features, but platform behavior may differ.
• Safari: Push support follows Apple’s platform rules and may differ from Chromium behavior.

FAQ

Related tools

• Service Worker Cache Strategy Simulator
• PWA Manifest Installability Predictor
• beforeinstallprompt Event Capture Debugger
• Background Sync Queue Visualizer

References

• MDN Web Docs: Push API
• MDN Web Docs: Notifications API
• MDN Web Docs: ServiceWorkerGlobalScope: push event

Version and changelog

• Version: 1.0.0
• Last updated: August 8, 2026
• Changelog: Initial production release.