From 65aba97b2a92b8fd1d140f1d992168330e0fae8e Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Fri, 20 Dec 2024 17:47:11 -0800
Subject: [PATCH] added PWA support

---
 app/manifest.json            | 18 ++++++++++++++++
 app/search/page.tsx          |  2 ++
 components/InstallPrompt.tsx | 40 ++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 app/manifest.json
 create mode 100644 components/InstallPrompt.tsx

diff --git a/app/manifest.json b/app/manifest.json
new file mode 100644
index 0000000..2d31d86
--- /dev/null
+++ b/app/manifest.json
@@ -0,0 +1,18 @@
+{
+  "name": "MiniPerplx - AI-powered Search Engine",
+  "short_name": "MiniPerplx",
+  "description": "A minimalistic AI-powered search engine that helps you find information on the internet using advanced AI models like GPT-4, Claude, and Grok",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "categories": ["search", "ai", "productivity"],
+  "screenshots": [
+    {
+      "src": "/app/opengraph-image.png",
+      "type": "image/png",
+      "sizes": "1200x630",
+      "form_factor": "wide"
+    }
+  ]
+}
diff --git a/app/search/page.tsx b/app/search/page.tsx
index e514f87..757bf99 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -131,6 +131,7 @@ import { Separator } from '@/components/ui/separator';
 import { ChartTypes } from '@e2b/code-interpreter';
 import { TrendingQuery } from '../api/trending/route';
 import { FlightTracker } from '@/components/flight-tracker';
+import { InstallPrompt } from '@/components/InstallPrompt';
 
 export const maxDuration = 60;
 
@@ -2698,6 +2699,7 @@ const Home = () => {
     return (
         <Suspense fallback={<LoadingFallback />}>
             <HomeContent />
+            <InstallPrompt />
         </Suspense>
     );
 };
diff --git a/components/InstallPrompt.tsx b/components/InstallPrompt.tsx
new file mode 100644
index 0000000..3931eef
--- /dev/null
+++ b/components/InstallPrompt.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export function InstallPrompt() {
+  const [isIOS, setIsIOS] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+
+  useEffect(() => {
+    setIsIOS(
+      /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
+    );
+
+    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);
+  }, []);
+
+  if (isStandalone) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h3>Install App</h3>
+      <button>Add to Home Screen</button>
+      {isIOS && (
+        <p>
+          To install this app on your iOS device, tap the share button
+          <span role="img" aria-label="share icon">
+            {' '}
+            ⎋{' '}
+          </span>
+          and then &quot;Add to Home Screen&quot;
+          <span role="img" aria-label="plus icon">
+            {' '}
+            ➕{' '}
+          </span>
+          .
+        </p>
+      )}
+    </div>
+  );
+}