Set up web push

Web push works in Chrome, Edge, Firefox and Safari on Android, Mac, Windows and Linux, and on iPhone once your site is on the home screen. There is nothing to upload: SignOps made the web push keys for your app. You need a site on https (or localhost while you build) and about 15 minutes.

1. Try it in your own browser first

In the SignOps dashboard, open Push, Setup, Web, and choose Add this browser. Allow notifications, then Send test push. You now know the keys work and what a push looks like before writing any code.

2. Copy your public key

In the same panel, copy Your public key. It is safe in page code. Each app has its own, so a test app and your live app have different keys.

3. Add a service worker

A service worker is the small script that runs when a push arrives, even with your site closed. Put sw.js at the root of your site, so it controls every page:

// https://your-site.com/sw.js
self.SIGNOPS_KEY = "pk_live_...";   // your publishable key; leave it out to skip open counts
importScripts("https://api.signops.dev/push-sw.js");

push-sw.js draws the notification with its image and buttons, opens the push’s link (or the tapped button’s) and reports the open so it shows in the dashboard and as a push.opened webhook. If your site already has a service worker, add the two lines to it.

4. Subscribe on a button tap

Ask from a button the user taps, after they understand why, such as “Tell me when my order ships”. Browsers ignore a prompt that is not caused by a tap.

<button id="notify">Turn on notifications</button>
<script type="module">
  import { push } from "https://api.signops.dev/web.js";   // or: npm install @signops/web

  document.getElementById("notify").onclick = async () => {
    const subscription = await push.subscribe({ publicKey: "BEl62iUYgUivxIkv69yViEuiBIa..." });
    await fetch("/api/devices", {                            // your own endpoint
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(subscription),
    });
  };
</script>

push.subscribe registers /sw.js, asks for permission and returns the subscription. Pass serviceWorker: "/path/sw.js" if yours lives elsewhere.

5. Add the subscription on your server

The subscription object is the token for the web. Your endpoint adds it under the signed-in user:

curl https://api.signops.dev/v1/devices \
  -H "Authorization: Bearer $SIGNOPS_KEY" \
  -H "content-type: application/json" \
  -d '{"user_id":"usr_8f21c4","platform":"web","token":{"endpoint":"https://fcm.googleapis.com/fcm/send/...","keys":{"p256dh":"...","auth":"..."}}}'

With the Node library: signops.devices.add({ user_id, platform: "web", token: subscription }).

6. Send

curl https://api.signops.dev/v1/push \
  -H "Authorization: Bearer $SIGNOPS_KEY" \
  -H "content-type: application/json" \
  -d '{"user_id":"usr_8f21c4","title":"Your order shipped","body":"Arriving Thursday.","link":"https://your-site.com/orders/88213"}'

The same call reaches the user’s Android and iOS apps too, if they have them.

iPhone and iPad

Safari on iOS 16.4 and later gets web pushes only for sites added to the home screen:

1. Add a web app manifest (manifest.json with name, icons and "display": "standalone") and link it from your pages.
2. Tell iPhone users to tap Share, then Add to Home Screen, and open the site from that icon.
3. Show your Turn on notifications button there. The prompt works only from the home screen app.

When something goes wrong

What you see	What it means
The button does nothing	Notifications were blocked for the site earlier. The user allows them in the browser’s site settings
sent: 1 but no notification	The computer is in Do Not Disturb or Focus, or the browser’s own notifications are off in the operating system
The device disappears	The browser dropped the subscription (site data cleared, or permission removed). SignOps removes it and posts device.removed
Subscriptions from another provider fail	They were made with that provider’s keys. Users subscribe again

Test your own browser’s support without code with the web push tester.