Use-pwa-hook NPM

usePWA React hook

Creates an easy way of interacting with service-worker funtionality within a React based progressive web application

Support for Safari push notifications on OSX is not yet developed.

Getting Started

Usage:

This hook assumes a service worker is available with a filename of sw.js

Environment variable to support push notification subscriptions as public VAPID key expected with name:

VAPID_PUBLIC

A sample service worker is provided with the package.

  import { usePWA } from 'use-pwa-hook';
  .....
  const {
      onAskPushPermission,
      onSubscribePush,
      onPushUnsubscribe,
      pushSupported,
      pushConsent,
      userPushSubscription,
      onInstall,
      canInstall,
      error,
      loading
    } = usePWA();

Examples of using this hook:

  const handleSubscribe = async () => {
    const subscription = await onSubscribePush();
    // ... Post notification subscription id to backend etc for later use..
  };

  const handleAskPermission = async () => {
    if (pushSupported) {
      // Request push notifications permission, returns a boolean
      const permission = await onAskPushPermission();
      permission && (await handleSubscribe());
    } else {
      // ... handle push unsupported here
    }
  };

  const handleUnsubscribe = async () => {
    const success = await onPushUnsubscribe();
    // ... handle clearing push subscription for user etc
  };

  const handleOnInstall = () => {
    // Prompt the user to install your app if eligible
    canInstall && onInstall()
  };