how to use it in react?

[NorbertOSK]

Hello, how do you use this module in react? is there any example?

How to implement it, to detect if it is iOS or Android, to be able to show installation assistance.

[khmyznikov]

https://glitch.com/edit/#!/mango-shine-diagram?path=src%2Fcomponents%2Fpwa-install.jsx

[khmyznikov]

This is React example. The component doing everything in auto, you don't need to switch android/ios manually

[NorbertOSK]

Hello thank you very much.
In any case, I have not been able to implement it, since my project is with typescript, and it gives me many errors, in fact in typescript, it does not recognize this path: "@khmyznikov/pwa-install/dist/pwa-install.react.js"

Would you be able to guide me or help me, to implement this with react and typescript?

And if I use a manifest that is created with vitePWA, is it possible that it will work? How can I make reference to other manifests?

Thank you.
Norberto.

[khmyznikov]

"compilerOptions": {
        "skipLibCheck": true
}

[NorbertOSK]

I have managed to adapt it to work with react and typescript.

But it was necessary to create a module.

Module:

    import { FC, Ref } from 'react';
  
    interface PWAInstallProps {
      // manifestUrl?: string;
      // icon?: string;
      // name?: string;
      // description?: string;
      // installDescription?: string;
      // disableDescription?: boolean;
      // disableScreenshots?: boolean;
      // manualApple?: boolean;
      // manualChrome?: boolean;
      // disableChrome?: boolean;
    }
  
    const PWAInstall: FC<PWAInstallProps>;
    
    export default PWAInstall;
  }

Hook:

interface PWAInstallComponentProps {
  onInstallSuccess?: (event: Event) => void;
  onInstallFail?: (event: Event) => void;
  onUserChoiceResult?: (event: Event) => void;
  onInstallAvailable?: (event: Event) => void;
  onInstallHowTo?: (event: Event) => void;
  onInstallGallery?: (event: Event) => void;
  [key: string]: any;
}

export const usePwaInstall = ({
  onInstallSuccess,
  onInstallFail,
  onUserChoiceResult,
  onInstallAvailable,
  onInstallHowTo,
  onInstallGallery,
}: PWAInstallComponentProps) => {
  const pwaInstallRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const currentElement = pwaInstallRef.current;

    const handleInstallSuccess = (event: Event) => onInstallSuccess?.(event);
    const handleInstallFail = (event: Event) => onInstallFail?.(event);
    const handleUserChoiceResult = (event: Event) => onUserChoiceResult?.(event);
    const handleInstallAvailable = (event: Event) => onInstallAvailable?.(event);
    const handleInstallHowTo = (event: Event) => onInstallHowTo?.(event);
    const handleInstallGallery = (event: Event) => onInstallGallery?.(event);

    if (currentElement) {
      currentElement?.addEventListener('pwa-install-success-event', handleInstallSuccess);
      currentElement?.addEventListener('pwa-install-fail-event', handleInstallFail);
      currentElement?.addEventListener('pwa-user-choice-result-event', handleUserChoiceResult);
      currentElement?.addEventListener('pwa-install-available-event', handleInstallAvailable);
      currentElement?.addEventListener('pwa-install-how-to-event', handleInstallHowTo);
      currentElement?.addEventListener('pwa-install-gallery-event', handleInstallGallery);

      return () => {
        currentElement?.removeEventListener('pwa-install-success-event', handleInstallSuccess);
        currentElement?.removeEventListener('pwa-install-fail-event', handleInstallFail);
        currentElement?.removeEventListener('pwa-user-choice-result-event', handleUserChoiceResult);
        currentElement?.removeEventListener('pwa-install-available-event', handleInstallAvailable);
        currentElement?.removeEventListener('pwa-install-how-to-event', handleInstallHowTo);
        currentElement?.removeEventListener('pwa-install-gallery-event', handleInstallGallery);
      };
    }
  }, [onInstallSuccess, onInstallFail, onUserChoiceResult, onInstallAvailable, onInstallHowTo, onInstallGallery]);

  return pwaInstallRef;
};

how do i use it? How do I use it? I just call the hook:
usePwaInstall({})

[khmyznikov]

The latest sample is here https://stackblitz.com/edit/vite-react-ts-2eeiak?file=src%2FApp.tsx