fix: fix pwa install life cycle

Author: zmh-program

src/components/PWAInstaller.tsx

@@ -1,62 +1,67 @@
 "use client";
 
 import "@khmyznikov/pwa-install";
-import {useEffect} from "react";
+import { useEffect } from "react";
 export default function PWAInstaller({ ...props }) {
   return (
     // @ts-ignore
-    <pwa-install {...props}></pwa-install>
+    <pwa-install id={`pwa-install`} {...props}></pwa-install>
   );
 }
 
 export type PWAInstallerMethods = {
   install: (force?: boolean) => void;
-  addEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
+  isListening?: boolean;
+  showDialog: (force?: boolean) => void;
+  addEventListener: (
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ) => void;
 };
 
 export function usePWAInstaller() {
   const getInstallerElement = (): PWAInstallerMethods =>
-    document.getElementsByTagName(
-      "pwa-install",
-    )[0] as unknown as PWAInstallerMethods;
+    document.getElementById("pwa-install") as unknown as PWAInstallerMethods;
 
-  useEffect(() => {
-    const installer = getInstallerElement();
-    if (installer) {
-      // register events
+  return {
+    install: (force?: boolean) => {
+      const installer = getInstallerElement();
+      installer?.showDialog(force);
 
-      installer.addEventListener("pwa-install-success-event", (e) => {
-        console.log("[installer] installation success:", e);
-      });
+      console.log(
+        `[installer] ${force ? "forced" : "prompted"} installation to:`,
+        installer,
+      );
 
-      installer.addEventListener("pwa-install-fail-event", (e) => {
-        console.error("[installer] installation failed:", e);
-      });
+      if (installer && !installer.isListening) {
+        // register events
+        installer.isListening = true;
 
-      installer.addEventListener("pwa-install-available-event", (e) => {
-        console.log("[installer] installation available:", e);
-      });
+        installer.addEventListener("pwa-install-success-event", (e) => {
+          console.log("[installer] installation success:", e);
+        });
 
-      installer.addEventListener("pwa-user-choice-result-event", (e) => {
-        console.log("[installer] user choice result:", e);
-      });
+        installer.addEventListener("pwa-install-fail-event", (e) => {
+          console.error("[installer] installation failed:", e);
+        });
 
-      installer.addEventListener("pwa-install-how-to-event", (e) => {
-        console.log("[installer] installation how to:", e);
-      });
+        installer.addEventListener("pwa-install-available-event", (e) => {
+          console.log("[installer] installation available:", e);
+        });
 
-      installer.addEventListener("pwa-install-gallery-event", (e) => {
-        console.log("[installer] installation gallery:", e);
-      });
-    }
-  }, []);
+        installer.addEventListener("pwa-user-choice-result-event", (e) => {
+          console.log("[installer] user choice result:", e);
+        });
 
-  return {
-    install: (force?: boolean) => {
-      const installer = getInstallerElement();
-      installer?.install(force);
+        installer.addEventListener("pwa-install-how-to-event", (e) => {
+          console.log("[installer] installation how to:", e);
+        });
 
-      console.log(`[installer] ${force ? "forced" : "prompted"} installation to:`, installer);
+        installer.addEventListener("pwa-install-gallery-event", (e) => {
+          console.log("[installer] installation gallery:", e);
+        });
+      }
     },
   };
 }

src/pages/_app.tsx

@@ -34,18 +34,17 @@ export default function App({ Component, pageProps }: AppProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <Toaster />
-      <PWAInstaller
-        manifest-url="/manifest.json"
-        name="Next Whois UI"
-        description="🧪 Your Next Generation Of Whois Lookup Tool With Modern UI. Support Domain/IPv4/IPv6/ASN/CIDR Whois Lookup And Powerful Features."
-        icon="/icons/icon-192x192.png"
-      />
       <ThemeProvider
         attribute="class"
         defaultTheme="system"
         enableSystem
         disableTransitionOnChange
       >
+        <PWAInstaller
+          manifest-url="/manifest.json"
+          name="Next Whois UI"
+          description="🧪 Your Next Generation Of Whois Lookup Tool With Modern UI. Support Domain/IPv4/IPv6/ASN/CIDR Whois Lookup And Powerful Features."
+        />
         <div className={cn(`relative w-full h-full`, inter.className)}>
           <div
             className={cn(