feat: support pwa install

zmh-program · Aug 11, 2024 · 2feea9b · 2feea9b
1 parent 08b6df8
commit 2feea9b
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "prettier": "prettier --write src/**/*.{ts,tsx,js,jsx,json,md}"
   },
   "dependencies": {
+    "@khmyznikov/pwa-install": "^0.4.4",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
@@ -21,16 +22,19 @@
     "clsx": "^2.1.0",
     "framer-motion": "^11.3.21",
     "html-to-image": "^1.11.11",
+    "i18next": "^23.12.2",
     "ioredis": "^5.4.1",
     "lucide-react": "^0.414.0",
     "moment": "^2.30.1",
     "net": "^1.0.2",
     "next": "14.1.0",
+    "next-i18next": "^15.3.1",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.3.0",
     "prettier": "^3.3.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-i18next": "^15.0.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/PWAInstaller.tsx b/src/components/PWAInstaller.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import "@khmyznikov/pwa-install";
+export default function PWAInstaller({ ...props }) {
+  return (
+    // @ts-ignore
+    <pwa-install {...props}></pwa-install>
+  );
+}
+
+export type PWAInstallerMethods = {
+  install: (force?: boolean) => void;
+};
+
+export function usePWAInstaller() {
+  const getInstallerElement = (): PWAInstallerMethods =>
+    document.getElementsByTagName(
+      "pwa-install",
+    )[0] as unknown as PWAInstallerMethods;
+
+  return {
+    install: (force?: boolean) => {
+      const installer = getInstallerElement();
+      installer?.install();
+    },
+  };
+}
diff --git a/src/pages/[query].tsx b/src/pages/[query].tsx
@@ -488,7 +488,7 @@ export default function Lookup({ data, target }: Props) {
     <ScrollArea className={`w-full h-full`}>
       <main
         className={
-          "relative w-full min-h-full grid place-items-center px-4 pt-20 pb-6"
+          "relative w-full min-h-full grid place-items-center px-4 pt-24 pb-6"
         }
       >
         <div

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -9,6 +9,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { ThemeToggle } from "@/components/theme-switch";
 import { strEnv } from "@/lib/env";
 import { inter } from "@/lib/fonts";
+import PWAInstaller, { usePWAInstaller } from "@/components/PWAInstaller";
 
 const siteTitle = strEnv("NEXT_PUBLIC_SITE_TITLE", "Next Whois UI");
 const siteDescription = strEnv(
@@ -21,6 +22,8 @@ const siteKeywords = strEnv(
 );
 
 export default function App({ Component, pageProps }: AppProps) {
+  const { install } = usePWAInstaller();
+
   return (
     <>
       <Head>
@@ -31,6 +34,12 @@ 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"
@@ -40,9 +49,18 @@ export default function App({ Component, pageProps }: AppProps) {
         <div className={cn(`relative w-full h-full`, inter.className)}>
           <div
             className={cn(
-              `absolute top-4 right-4 flex flex-row items-center z-50 space-x-2`,
+              `absolute w-full p-2 px-4 bg-background border-b select-none flex flex-row items-center z-50 space-x-2`,
             )}
           >
+            <img
+              src={`/icons/icon-192x192.png`}
+              alt={``}
+              className={`cursor-pointer w-10 h-10 p-1 shadow-sm bg-black border rounded-md transition hover:shadow`}
+              onClick={() => {
+                install(true);
+              }}
+            />
+            <div className={`grow`} />
             <ThemeToggle />
             <Link
               href={`https://github.com/zmh-program/next-whois-ui`}