Glowup
Companion package
Notifications
@its/glowup-notifications is the headless push layer that sits beside the kit: permissions, push tokens, foreground presentation and taps, with no UI of its own. Everything on this page is rendered with Glowup components and driven by it.
Permission
Read on mount and again whenever the app returns to the foreground, so it is right after a trip to system settings. On Android the demo channel exists before the prompt is shown.
󰀦
Not asked
Push token
An Expo push token by default (tokenType=“device” for raw FCM / APNs). onTokenChange fires on the first one and on every rotation — that is where you register it with your backend.
No token yet. It is fetched by itself as soon as the permission allows push.
Foreground presentation
What happens when a notification arrives while the app is open. These switches feed the provider's foreground prop; it can also be a function of the notification.
Banner
Slide the notification in at the top.
Notification list
Keep it in Notification Center / the shade.
Sound
Play the notification sound.
Badge
Apply the badge count the payload carries.
Try it
Scheduling is native only. On web, send a push to this page's service worker: in Chrome DevTools open Application → Service workers, paste this JSON into the Push field and press Push. With this tab in front it lands in the event log (and shows if the switches above allow it); with the tab in the background the service worker shows it, and a click comes back as a tap.
Push payload
{ "id": "order-42", "title": "Order #42 shipped", "body": "Click to open it, or use Track.", "data": { "screen": "order", "orderId": "42" }, "url": "/Glowup/notifications", "actions": [ { "action": "track", "title": "Track" } ] }
Or a real push, with the subscription above and your VAPID pair
npx web-push send-notification \ --endpoint="<endpoint>" --key="<keys.p256dh>" --auth="<keys.auth>" \ --vapid-subject="mailto:you@example.com" \ --vapid-pubkey="<public key>" --vapid-pvtkey="<private key>" \ --payload='{"title":"Hello","body":"From web-push"}'
Badge and delivered notifications
setBadgeCount() / clearBadge() drive the app icon badge; getPresentedNotifications() and dismissNotificationsWhere() clean up what is already in the tray, for example when the user opens the chat a notification was about.
Read the current badge and the notifications in Notification Center / the shade.
Event log
Everything the provider reports through onEvent, newest first.
󰪓
No events yet
Allow notifications or send a test to see permission, token and delivery events here.
Wire it up
Mount the provider once at the root. Routing and token registration stay in your app, through the callbacks.
Terminal
npx expo install expo-notifications @its/glowup-notifications
App.tsx
import { NotificationsProvider, useNotificationPermission, usePushToken, } from "@its/glowup-notifications"; export default function App() { return ( <NotificationsProvider androidChannels={[{ id: "default", name: "General", importance: "high" }]} foreground={{ banner: true, sound: false }} onTokenChange={(token) => api.registerDevice(token.data)} onResponse={({ notification }) => router.push(routeFor(notification.data))} > <Root /> </NotificationsProvider> ); } const EnableNotifications = () => { const { status, canAskAgain, request, openSettings } = useNotificationPermission(); if (status === "granted") return null; return canAskAgain ? <Button onPress={() => request()}>Allow notifications</Button> : <Button onPress={openSettings}>Open settings</Button>; };