PWA setup

Use @palmpush/pwa when your own Progressive Web App should receive palmpush notifications.

This is useful when you want notifications to feel like they belong to your web app. For example, the notification can use your PWA app icon instead of the palmpush iOS app icon.

Create a listener in the iOS app first, then register the PWA with that listener token.

Install

npm install @palmpush/pwa

Add the service worker

Browser push notifications are delivered through a service worker. For most Vite, Next.js, and Create React App projects, run this from the web app root:

npx @palmpush/pwa init

This copies the worker to:

public/palmpush-sw.js

Your production site must serve it at:

/palmpush-sw.js

React apps

If your app uses React, for example Next.js, Remix, Vite React, or Create React App, the easiest setup is the packaged button.

The button checks browser support, asks for notification permission after the user clicks it, and registers the browser with palmpush. You do not need to call checkPermission, askForPermission, or registerListener yourself.

You still need the install and service worker setup above.

For one listener:

import { PalmpushPwaButton } from '@palmpush/pwa/react';

export function PushSettings() {
  return <PalmpushPwaButton listenerToken="abc123abc123abc123abc123abc123ab" />;
}

For multiple listeners:

import { PalmpushPwaButton } from '@palmpush/pwa/react';

export function PushSettings() {
  return (
    <PalmpushPwaButton
      listenerTokens={[
        'abc123abc123abc123abc123abc123ab',
        'def456def456def456def456def456de',
      ]}
    />
  );
}

You can also use listenerId or listenerIds if that name fits your app better. Do not mix token props and id props in the same button.

Manual setup

Use the manual SDK functions if you do not use React or if you need a custom setup flow.

Register one listener

import {
  askForPermission,
  checkPermission,
  registerListener,
} from '@palmpush/pwa';

const status = checkPermission();

if (!status.granted) {
  await askForPermission();
}

await registerListener({
  listenerToken: 'abc123abc123abc123abc123abc123ab',
});

For a one-click setup button, call registration from a user gesture:

await registerListener({
  listenerToken: 'abc123abc123abc123abc123abc123ab',
  requestPermission: true,
});

Register multiple listeners

import { registerListeners } from '@palmpush/pwa';

await registerListeners({
  listenerTokens: [
    'abc123abc123abc123abc123abc123ab',
    'def456def456def456def456def456de',
  ],
});

The same browser installation can subscribe to multiple listeners.

iOS note

On iOS, Web Push works for Home Screen web apps. A normal Safari tab can run the setup code, but it cannot receive iOS Web Push notifications.