Receive push notifications in JavaScript

Learn how to receive and track push notifications in your JavaScript web app using Operational for real-time event monitoring.

What are push notifications in JavaScript?

Push notifications let web apps send messages to users even when the app is not open. They work through service workers in the browser.

For example, a chat app can notify users of new messages when they are offline.

Using Operational to track push notification events

Operational is an open-source tool for logging events in any tech product. You can send a record each time a push notification is received.

Operational in action

This helps you monitor delivery rates and troubleshoot issues.

Setting up Operational

  1. Go to app.operational.co and sign up.
  2. Create a new project and copy your API key.
  3. Install the SDK with npm install @operational.co/sdk.
  4. Initialize the client in your code.

Tracking push notification events

import Operational from "@operational.co/sdk";

const ops = new Operational("YOUR_API_KEY");

// Example service worker listener
navigator.serviceWorker.addEventListener("push", event => {
  // Sample data structure: { message: "Hello from John Doe" }
  const data = event.data.json();

  ops.events.ingest({
    name: "Push notification received",
    avatar: "🔔",
    content: `New message: ${data.message}`
  });
});

This code listens for incoming push messages and logs each one to Operational with the message content.

Conclusion

Using Operational for push notification events saves time on logging and monitoring. You can focus on building features.

Learn more at https://operational.co. Try the playground for ready-to-use snippets: https://operational.co/playground.