@flypush/web

FlyPush Web Push SDK — browser push notifications via VAPID and the Push API.

Installation

npm install @flypush/web

Quick start

1. Copy the service worker to your public root

cp node_modules/@flypush/web/public/flypush-sw.js public/flypush-sw.js

The service worker must be served from the root of your domain (/flypush-sw.js).

2. Initialize the SDK

import { FlyPush } from "@flypush/web";

const flyPush = new FlyPush({
  apiKey: "fp_your_api_key",
  vapidPublicKey: "your_vapid_public_key", // get from FlyPush dashboard
});

// Register the service worker once at app startup
await flyPush.init();

3. Request permission and subscribe

// Call in response to a user gesture (button click, etc.)
const deviceId = await flyPush.requestPermission();
console.log("Subscribed:", deviceId);

User identity & tags

flyPush.setUserId("user_123");
flyPush.setTags(["premium", "us"]);

Topics

await flyPush.subscribe("breaking-news");
await flyPush.unsubscribe("breaking-news");

Unregister

await flyPush.unregister(); // removes subscription from browser + FlyPush

React example

import { useEffect, useRef } from "react";
import { FlyPush } from "@flypush/web";

export function useFlyPush() {
  const ref = useRef<FlyPush | null>(null);

  useEffect(() => {
    const client = new FlyPush({
      apiKey: import.meta.env.VITE_FLYPUSH_API_KEY,
      vapidPublicKey: import.meta.env.VITE_FLYPUSH_VAPID_KEY,
    });
    ref.current = client;
    client.init().catch(console.error);
  }, []);

  const enable = async () => {
    await ref.current?.requestPermission();
  };

  return { enable };
}

Service worker payload format

{
  "title": "Hello!",
  "body": "Your order shipped.",
  "imageUrl": "https://example.com/image.png",
  "id": "notif_abc123",
  "data": {
    "url": "/orders/123",
    "icon": "/icon-192.png"
  }
}

Browser support

Requires browsers that support the Push API: Chrome 50+, Edge 17+, Firefox 44+, Safari 16.1+ (macOS/iOS).