https://github.com/u4aew/react-pwa-push-notifications

React hook for push-notifications
https://github.com/u4aew/react-pwa-push-notifications

ios notifications pwa react

Last synced: 8 months ago
JSON representation

React hook for push-notifications

• Host: GitHub
• URL: https://github.com/u4aew/react-pwa-push-notifications
• Owner: u4aew
• Created: 2023-09-17T08:47:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-08T21:04:14.000Z (over 1 year ago)
• Last Synced: 2025-10-11T02:09:36.288Z (9 months ago)
• Topics: ios, notifications, pwa, react
• Language: TypeScript
• Homepage: https://push.fancyapp.site
• Size: 1.76 MB
• Stars: 44
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/react-hook-webauthn.svg)](https://badge.fury.io/js/react-pwa-push-notifications)

# React hook Push Notifications

## Overview

This package provides a custom React hook for facilitating push subscriptions in your application. It ensures proper handling of browser APIs and returns easy-to-handle errors in case of issues.

![demo](./img/demo.gif)

## Installation

```bash

npm install react-pwa-push-notifications

```

## Usage

We will be using a library for Node.js called [web-push](https://github.com/web-push-libs/web-push). This library works well with Google Cloud Messaging, a system from Google for sending notifications.

A detailed setup process can be read in this [article](https://dev.to/u4aew/how-to-set-up-push-notifications-in-safari-on-ios-ki9).

```typescript

import { useSubscribe } from "react-pwa-push-notifications";

// Import the useSubscribe function and set the public key (PUBLIC_KEY)

const { getSubscription } = useSubscribe({publicKey: PUBLIC_KEY});

// Handler for subscribing to push notifications

const onSubmitSubscribe = async (e) => {

    try {

        // Retrieve the subscription object using the getSubscription function

        const subscription = await getSubscription();

        // Send the subscription object and ID to the server to register the subscription

        await axios.post('/api/subscribe', { subscription });

        // Display a message in case of successful subscription

        console.log('Subscribe success');

    } catch (e) {

        // Display a warning in case of an error

        console.warn(e);

    }

};

```

## Error Handling

The hook provides an `Errors` enum for better error management. It includes the following error codes:

- `ServiceWorkerAndPushManagerNotSupported`: The service worker or push manager is not supported by the browser.

- `PushManagerUnavailable`: The PushManager is unavailable.

- `ExistingSubscription`: An existing subscription is already present.

- `Unknown`: An unknown error has occurred.

## Contributing

Feel free to open issues or pull requests if you want to improve this package.

## License

MIT