Paul Bailey
0e609af924
- Add authentication pages to static cache (/auth/login, /auth/register, /auth/error) - Implement special handling for authentication API requests (network-only with offline error) - Add authentication page caching strategy (cache-first with network fallback) - Prevent caching of authentication errors (401, 403) - Enhance offline page with online detection and auto-redirect - Add authentication notice to offline page - Update cache version to v2 for proper invalidation - Create PWA_AUTH_GUIDE.md documentation Task: 19. Update PWA service worker for authentication Requirements: 4.4
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { WifiOff } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function OfflinePage() {
|
|
const [isOnline, setIsOnline] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
// Check if we're back online
|
|
const handleOnline = () => {
|
|
setIsOnline(true);
|
|
// Automatically redirect after a short delay
|
|
setTimeout(() => {
|
|
router.push('/');
|
|
}, 1000);
|
|
};
|
|
|
|
window.addEventListener('online', handleOnline);
|
|
|
|
return () => {
|
|
window.removeEventListener('online', handleOnline);
|
|
};
|
|
}, [router]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
|
<div className="text-center max-w-md">
|
|
<div className="flex justify-center mb-6">
|
|
<div className="bg-blue-100 p-4 rounded-full">
|
|
<WifiOff className="w-12 h-12 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-4">
|
|
{isOnline ? "You're Back Online!" : "You're Offline"}
|
|
</h1>
|
|
|
|
{isOnline ? (
|
|
<p className="text-gray-600 mb-8">
|
|
Your connection has been restored. Redirecting...
|
|
</p>
|
|
) : (
|
|
<>
|
|
<p className="text-gray-600 mb-8">
|
|
It looks like you've lost your internet connection. Don't worry, your data is safe and will sync when you're back online.
|
|
</p>
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-left mb-6">
|
|
<h2 className="font-semibold text-gray-900 mb-3">What you can do:</h2>
|
|
<ul className="space-y-2 text-gray-600">
|
|
<li className="flex items-start">
|
|
<span className="text-blue-600 mr-2">•</span>
|
|
<span>View your cached lists and tasks</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-blue-600 mr-2">•</span>
|
|
<span>Make changes that will sync later</span>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="text-blue-600 mr-2">•</span>
|
|
<span>Check your connection and try again</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 rounded-lg border border-amber-200 p-4 text-left mb-6">
|
|
<h3 className="font-semibold text-amber-900 mb-2 text-sm">Note about authentication:</h3>
|
|
<p className="text-amber-800 text-sm">
|
|
Login and registration require an internet connection. If you need to sign in, please connect to the internet first.
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
disabled={isOnline}
|
|
>
|
|
{isOnline ? 'Redirecting...' : 'Try Again'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|