Spaces:
Sleeping
Sleeping
File size: 3,803 Bytes
6234767 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import React, { useEffect, useState } from 'react';
import { Download, X } from 'lucide-react';
import { usePWA } from '../context/PWAContext';
const PWAInstallPrompt: React.FC = () => {
const { deferredPrompt, isInstallable, isIOS, isStandalone, installApp } = usePWA();
const [showInstallPrompt, setShowInstallPrompt] = useState(false);
useEffect(() => {
// Show install prompt if installable and not already installed
if (isInstallable && !isStandalone) {
setShowInstallPrompt(true);
}
// For iOS, show prompt if not installed
if (isIOS && !isStandalone) {
setShowInstallPrompt(true);
}
}, [isInstallable, isStandalone, isIOS]);
const handleInstallClick = async () => {
if (isIOS) {
// iOS doesn't support programmatic install, show instructions
return;
}
await installApp();
setShowInstallPrompt(false);
};
const handleDismiss = () => {
setShowInstallPrompt(false);
// Remember dismissal for 7 days
localStorage.setItem('pwa-install-dismissed', Date.now().toString());
};
// Don't show if already installed
if (isStandalone) {
return null;
}
// Check if dismissed recently (within 7 days)
const dismissedTime = localStorage.getItem('pwa-install-dismissed');
if (dismissedTime) {
const daysSinceDismissed = (Date.now() - parseInt(dismissedTime)) / (1000 * 60 * 60 * 24);
if (daysSinceDismissed < 7) {
return null;
}
}
if (!showInstallPrompt) {
return null;
}
return (
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-lg shadow-2xl border-2 border-teal-600 p-4 z-50 animate-slide-up">
<button
onClick={handleDismiss}
className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
>
<X size={20} />
</button>
<div className="flex items-start gap-3">
<div className="p-2 bg-teal-100 rounded-lg">
<Download className="text-teal-600" size={24} />
</div>
<div className="flex-1">
<h3 className="font-bold text-gray-900 mb-1">Install App</h3>
{isIOS ? (
<div className="text-sm text-gray-600">
<p className="mb-2">Install this app on your iPhone:</p>
<ol className="list-decimal list-inside space-y-1 text-xs">
<li>Tap the Share button <span className="inline-block">⎋</span></li>
<li>Scroll and tap "Add to Home Screen"</li>
<li>Tap "Add" in the top right</li>
</ol>
</div>
) : (
<>
<p className="text-sm text-gray-600 mb-3">
Install our app for a better experience and offline access!
</p>
<button
onClick={handleInstallClick}
className="w-full bg-teal-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-teal-700 transition-colors"
>
Install Now
</button>
</>
)}
</div>
</div>
</div>
);
};
export default PWAInstallPrompt;
|