added PWA support

This commit is contained in:
Mahesh Sanikommmu 2024-12-20 17:47:11 -08:00
parent 56e312dad3
commit 65aba97b2a
3 changed files with 60 additions and 0 deletions

18
app/manifest.json Normal file
View File

@ -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"
}
]
}

View File

@ -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>
);
};

View File

@ -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>
);
}