Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung

Add PWA manifest and apple-touch-icon meta tag
Add static serving for /icons/* and manifest.json
2025-10-07 13:41:03 +02:00 · 2025-10-07 13:12:31 +02:00 · 2025-10-07 12:58:36 +02:00 · 2025-10-07 12:46:17 +02:00
10 changed files with 199 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ec4899" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
    <title>Stargirlnails Kiel - Terminbuchung</title>
  </head>
  <body>
--- a/public/icons/README.md
+++ b/public/icons/README.md
@@ -0,0 +1,45 @@
+# PWA Icons Required
+
+This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
+
+## Required Icon Files
+
+### Android Icons
+- **icon-192x192.png** (192×192 pixels)
+  - Used for Android home screen and app drawer
+  - Should have transparent background or match theme color
+  - Include safe zone padding for maskable icons (40px margin)
+
+- **icon-512x512.png** (512×512 pixels)
+  - Used for Android splash screens and high-resolution displays
+  - Should have transparent background or match theme color
+  - Include safe zone padding for maskable icons (102px margin)
+
+### iOS Icon
+- **apple-touch-icon.png** (180×180 pixels)
+  - Used for iOS home screen
+  - Should NOT have transparent background (iOS adds its own rounded corners)
+  - Fill entire canvas with brand colors/logo
+  - iOS automatically applies rounded corners and shadow
+
+## Design Guidelines
+
+1. **Brand consistency**: Use Stargirlnails logo and brand colors
+2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
+3. **Contrast**: Ensure icon is visible on various backgrounds
+4. **Simplicity**: Icons should be recognizable at small sizes
+5. **No text**: Avoid small text that becomes unreadable when scaled
+
+## Testing
+
+After adding icons:
+- Test on Android: Check home screen icon appearance
+- Test on iOS Safari: Add to home screen and verify icon quality
+- Validate with Lighthouse PWA audit
+
+## Placeholder
+
+Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
+- https://realfavicongenerator.net/
+- https://www.pwabuilder.com/imageGenerator
+
--- a/public/icons/apple-touch-icon.png
+++ b/public/icons/apple-touch-icon.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,32 @@
+{
+  "name": "Stargirlnails Kiel - Terminbuchung",
+  "short_name": "Stargirlnails",
+  "description": "Online Terminbuchung für Nagelstudio Stargirlnails in Kiel",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ec4899",
+  "orientation": "portrait",
+  "lang": "de",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}
+
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -16,6 +16,7 @@ import BookingStatusPage from "@/client/components/booking-status-page";
 import ReviewSubmissionPage from "@/client/components/review-submission-page";
 import LegalPage from "@/client/components/legal-page";
 import { ProfileLanding } from "@/client/components/profile-landing";
+import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";

 function App() {
  const { user, isLoading, isOwner } = useAuth();
@@ -36,10 +37,15 @@ function App() {

  // Handle booking status page
  const path = window.location.pathname;
+  const PwaPrompt = <PWAInstallPrompt />;
+  
  if (path.startsWith('/booking/')) {
    const token = path.split('/booking/')[1];
    if (token) {
-      return <BookingStatusPage token={token} />;
+      return <>
+        {PwaPrompt}
+        <BookingStatusPage token={token} />
+      </>;
    }
  }

@@ -47,7 +53,10 @@ function App() {
  if (path.startsWith('/review/')) {
    const token = path.split('/review/')[1];
    if (token) {
-      return <ReviewSubmissionPage token={token} />;
+      return <>
+        {PwaPrompt}
+        <ReviewSubmissionPage token={token} />
+      </>;
    }
  }

@@ -381,6 +390,9 @@ function App() {
        )}
      </main>

+      {/* PWA Installation Prompt for iOS */}
+      <PWAInstallPrompt hidden={isMobileMenuOpen} />
+
      {/* Footer */}
      <footer className="bg-white border-t border-pink-100 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
--- a/src/client/components/pwa-install-prompt.tsx
+++ b/src/client/components/pwa-install-prompt.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+
+declare global {
+  interface Navigator { standalone?: boolean }
+}
+
+const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
+
+function isIOS(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent || '';
+  const iOS = /iPhone|iPad|iPod/i.test(ua);
+  const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
+  return iOS || iPadOS13Plus;
+}
+
+function isSafari(): boolean {
+  const ua = navigator.userAgent || '';
+  const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
+  return isSafari;
+}
+
+function isStandalone(): boolean {
+  const navStandalone = (navigator as any)?.standalone === true;
+  const mm = typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(display-mode: standalone)').matches
+    : false;
+  return Boolean(navStandalone || mm);
+}
+
+export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
+  if (hidden) return null;
+  const [show, setShow] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    // Only run on client
+    if (typeof window === 'undefined') return;
+
+    const eligible = isIOS() && isSafari() && !isStandalone();
+    if (!eligible) {
+      setInitialized(true);
+      return;
+    }
+
+    let lastShown = 0;
+    try {
+      lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
+    } catch {}
+    const oneWeek = 7 * 24 * 60 * 60 * 1000;
+    const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
+
+    setShow(shouldShow);
+    setInitialized(true);
+  }, []);
+
+  const dismiss = () => {
+    try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
+    setShow(false);
+  };
+
+  if (!initialized || !show) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="PWA Installation Anleitung"
+      className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
+      style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
+    >
+      <div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
+        <button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
+        <div className="flex items-start gap-3">
+          <div className="text-2xl">📱</div>
+          <div className="flex-1">
+            <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
+            <p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
+            <ol className="list-decimal pl-5 space-y-1 text-white/95">
+              <li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
+              <li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
+              <li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
+              <li>Tippe auf „Hinzufügen".</li>
+            </ol>
+            <p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PWAInstallPrompt;
+
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -63,6 +63,8 @@ if (process.env.NODE_ENV === 'production') {
 }
 app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
 app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
+app.use('/icons/*', serveStatic({ root: './public' }));
+app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));

 app.route("/rpc", rpcApp);
 app.route("/caldav", caldavApp);
--- a/src/server/routes/client-entry.tsx
+++ b/src/server/routes/client-entry.tsx
@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
  }

  return c.html(
-    <html lang="en">
+    <html lang="de">
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta name="theme-color" content="#ec4899" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
        <title>Stargirlnails Kiel</title>
        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+        <link rel="manifest" href="/manifest.json" />
        {cssFiles && cssFiles.map((css: string) => (
          <link key={css} rel="stylesheet" href={css} />
        ))}
Author	SHA1	Message	Date
elpatron	8aea5bb400	Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung	2025-10-07 13:41:03 +02:00
elpatron	14d0c2f9c3	Add PWA manifest and apple-touch-icon meta tag	2025-10-07 13:12:31 +02:00
elpatron	eb9ddc535f	Add static serving for /icons/* and manifest.json	2025-10-07 12:58:36 +02:00
elpatron	8fa17f58c9	Add PWA icons (192x192, 512x512, apple-touch-icon)	2025-10-07 12:46:17 +02:00