Skip to main content

Push Notifications

Push Notifications

Register for and handle push notifications

Tags: push notifications fcm apns messaging

View Demo

The usePushNotifications composable provides comprehensive push notification support including registration, token management, permission handling, and notification callbacks. It supports Android notification channels.

Import​

<script>
  import { usePushNotifications } from '@classic-homes/native/svelte';
</script>
// React
import { usePushNotifications } from '@classic-homes/native/react';

Basic Usage​

<script lang="ts">
  import { usePushNotifications } from '@classic-homes/native/svelte';

  const push = usePushNotifications({
    onNotificationReceived: (notification) => {
      console.log('Received:', notification.title, notification.body);
    },
    onNotificationAction: (action) => {
      console.log('User tapped:', action.notification.title);
    },
  });

  async function handleRegister() {
    await push.requestPermissions();
    await push.register();
    console.log('Token:', push.token?.value);
  }
</script>

<button onclick={handleRegister} disabled={push.isLoading || push.isRegistered}>
  {push.isRegistered ? 'Registered' : 'Enable Notifications'}
</button>

API Reference​

Property Type Description
token PushToken | null Push notification token
isRegistered boolean Whether registered for push notifications
permissionState PermissionState | null Current permission state
isLoading boolean Whether an operation is in progress
error Error | null Current error if any
checkPermissions () => Promise<PermissionState> Check notification permissions
requestPermissions () => Promise<PermissionState> Request notification permissions
register () => Promise<void> Register for push notifications
unregister () => Promise<void> Unregister from push notifications
createChannel (channel: NotificationChannel) => Promise<void> Create notification channel (Android)
deleteChannel (channelId: string) => Promise<void> Delete notification channel (Android)

Accessibility​

  • Works with screen readers and assistive technologies
  • Provides loading and error states for accessible status updates
  • Keyboard accessible controls
  • App Lifecycle - Handle app state changes, deep links, and back button
On this page