mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
Add complete PWA implementation including service worker registration, offline support, and installation prompts: - Add vite-plugin-pwa and workbox-window dependencies for PWA tooling - Configure VitePWA plugin with web app manifest and app metadata - Set up Workbox caching strategies for API endpoints and CDN assets - Implement service worker auto-update with user-triggered refresh - Create usePWAInstall hook to handle beforeinstallprompt events - Create useOnlineStatus hook for monitoring network connectivity - Add InstallPrompt component with haptic feedback integration - Add OfflineBanner component to notify users of offline status - Configure PWA icons and assets (64x64, 192x192, 512x512 variants) - Add TypeScript type declarations for virtual PWA register module - Integrate PWA components and service worker into App.tsx and main.tsx - Add PWA meta tags and viewport configuration to index.html
16 lines
397 B
TypeScript
16 lines
397 B
TypeScript
import { useOnlineStatus } from '@/hooks/useOnlineStatus'
|
|
|
|
export function OfflineBanner() {
|
|
const isOnline = useOnlineStatus()
|
|
|
|
if (isOnline) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center py-2 text-sm font-medium z-50">
|
|
You're offline. Some features may be unavailable.
|
|
</div>
|
|
)
|
|
}
|