Implement PWA functionality using manifest.json in react & next.js

Create the manifest.json in the public folder

{
  "name": "Yourwebapp",
  "short_name": "Yourwebapp in short",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "lang": "en-IN",
  "background_color": "#000000",
  "theme_color": "#ff6f00", 
  "description": "your web description",
  "scope": "/",
  "icons": [
    {
      "src": "/logo.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any maskable"
    },
    {
      "src": "/logo.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ]
}

In your Navbar , use the functions mentioned in below

Move the PWA logic into a custom hook

Create a file: usePWA.js or usePWA.jsx

import { useEffect, useState } from "react";

export const usePWA = () => {
  const [isWebAppInstalled, setIsWebAppInstalled] = useState(false);
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);

  useEffect(() => {
    const isStandalone =
      window.matchMedia("(display-mode: standalone)").matches ||
      (window.navigator as any).standalone;

    setIsWebAppInstalled(isStandalone);

    const beforeInstallPromptHandler = (e: Event) => {
      e.preventDefault();
      setDeferredPrompt(e as BeforeInstallPromptEvent);
    };

    window.addEventListener("beforeinstallprompt", beforeInstallPromptHandler);

    return () => {
      window.removeEventListener("beforeinstallprompt", beforeInstallPromptHandler);
    };
  }, []);

  const handleInstallPWA = async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const choice = await deferredPrompt.userChoice;
      if (choice.outcome === "accepted") {
        setIsWebAppInstalled(true);
      }
      setDeferredPrompt(null);
    }
  };

  const handleUninstallPWA = () => {
    alert(
      "To uninstall this app, follow your device's standard procedure for uninstalling apps."
    );
  };

  return { isWebAppInstalled, handleInstallPWA, handleUninstallPWA };
};

✅ 2. Use it inside Navbar.js

import React from "react";
import { usePWA } from "../hooks/usePWA";

const Navbar = () => {
  const { isWebAppInstalled, handleInstallPWA, handleUninstallPWA } = usePWA();

  return (
    <nav className="w-full p-4 flex justify-between items-center bg-gray-800 text-white">
      <div className="text-xl font-bold">My App</div>

      <div className="space-x-4">
        {!isWebAppInstalled ? (
          <button
            onClick={handleInstallPWA}
            className="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 transition"
          >
            Install App
          </button>
        ) : (
          <button
            onClick={handleUninstallPWA}
            className="bg-red-500 px-4 py-2 rounded hover:bg-red-600 transition"
          >
            Uninstall App
          </button>
        )}
      </div>
    </nav>
  );
};

export default Navbar;

Hope you follow the instruction carefully, and it will definitely work

Happy Coding……