robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement PWA, manifest, service worker and offline indicator

Browse Source
This commit is contained in:
robin
2025-12-17 23:15:51 +01:00
parent 5807d949ef
commit 19689ffd2f
71 changed files with 1573 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/layout.tsx
View File

@@ -1,13 +1,34 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import PWARegistration from "@/components/PWARegistration";
import OfflineIndicator from "@/components/OfflineIndicator";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Whisky Vault",
description: "Your digital whisky collection",
title: {
default: "Whisky Vault",
template: "%s | Whisky Vault"
},
description: "Dein persönlicher Whisky-Begleiter zum Scannen und Verkosten.",
manifest: "/manifest.json",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "Whisky Vault",
},
formatDetection: {
telephone: false,
},
};
export const viewport = {
themeColor: "#000000",
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
export default function RootLayout({
@@ -16,8 +37,12 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<html lang="de">
<body className={inter.className}>
<PWARegistration />
<OfflineIndicator />
{children}
</body>
</html>
);
}

25
src/app/manifest.ts Normal file
View File

@@ -0,0 +1,25 @@
import { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Whisky Vault',
short_name: 'WhiskyVault',
description: 'Dein persönlicher Whisky-Begleiter zum Scannen und Verkosten.',
start_url: '/',
display: 'standalone',
background_color: '#000000',
theme_color: '#d97706',
icons: [
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
}

32
src/components/OfflineIndicator.tsx Normal file
View File

@@ -0,0 +1,32 @@
'use client';
import React, { useState, useEffect } from 'react';
import { WifiOff } from 'lucide-react';
export default function OfflineIndicator() {
const [isOffline, setIsOffline] = useState(false);
useEffect(() => {
setIsOffline(!navigator.onLine);
const handleOnline = () => setIsOffline(false);
const handleOffline = () => setIsOffline(true);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
if (!isOffline) return null;
return (
<div className="fixed top-0 left-0 w-full bg-red-600 text-white text-[10px] font-black uppercase tracking-widest py-1 flex items-center justify-center gap-2 z-[9999] animate-pulse">
<WifiOff size={12} />
Offline-Modus: Du siehst eine gespeicherte Version
</div>
);
}

22
src/components/PWARegistration.tsx Normal file
View File

@@ -0,0 +1,22 @@
'use client';
import { useEffect } from 'react';
export default function PWARegistration() {
useEffect(() => {
if ('serviceWorker' in navigator && window.location.hostname !== 'localhost') {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js')
.then((registration) => {
console.log('SW registered: ', registration);
})
.catch((registrationError) => {
console.log('SW registration failed: ', registrationError);
});
});
}
}, []);
return null;
}