feat: Update PWA service worker for authentication

- 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

app/offline/page.tsx

@@ -1,8 +1,30 @@
 '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">
@@ -13,36 +35,52 @@ export default function OfflinePage() {
         </div>
         
         <h1 className="text-3xl font-bold text-gray-900 mb-4">
-          You're Offline
+          {isOnline ? "You're Back Online!" : "You're Offline"}
         </h1>
         
-        <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>
+        {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">
-          <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-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="mt-8 bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+          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}
         >
-          Try Again
+          {isOnline ? 'Redirecting...' : 'Try Again'}
         </button>
       </div>
     </div>