Compare commits
6 Commits
92ed7a2c93
...
v0.1.3
| Author | SHA1 | Date | |
|---|---|---|---|
| ca20516080 | |||
| f2963ca951 | |||
| 8aea5bb400 | |||
| 14d0c2f9c3 | |||
| eb9ddc535f | |||
| 8fa17f58c9 |
@@ -3,7 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
<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="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>
|
<title>Stargirlnails Kiel - Terminbuchung</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "quests-template-basic",
|
"name": "quests-template-basic",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.1.3",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"check:types": "tsc --noEmit",
|
"check:types": "tsc --noEmit",
|
||||||
|
|||||||
45
public/icons/README.md
Normal file
45
public/icons/README.md
Normal file
@@ -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
|
||||||
|
|
||||||
BIN
public/icons/apple-touch-icon.png
Normal file
BIN
public/icons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/icons/icon-192x192.png
Normal file
BIN
public/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/icons/icon-512x512.png
Normal file
BIN
public/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
32
public/manifest.json
Normal file
32
public/manifest.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
@@ -16,6 +16,7 @@ import BookingStatusPage from "@/client/components/booking-status-page";
|
|||||||
import ReviewSubmissionPage from "@/client/components/review-submission-page";
|
import ReviewSubmissionPage from "@/client/components/review-submission-page";
|
||||||
import LegalPage from "@/client/components/legal-page";
|
import LegalPage from "@/client/components/legal-page";
|
||||||
import { ProfileLanding } from "@/client/components/profile-landing";
|
import { ProfileLanding } from "@/client/components/profile-landing";
|
||||||
|
import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const { user, isLoading, isOwner } = useAuth();
|
const { user, isLoading, isOwner } = useAuth();
|
||||||
@@ -36,10 +37,15 @@ function App() {
|
|||||||
|
|
||||||
// Handle booking status page
|
// Handle booking status page
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
|
const PwaPrompt = <PWAInstallPrompt />;
|
||||||
|
|
||||||
if (path.startsWith('/booking/')) {
|
if (path.startsWith('/booking/')) {
|
||||||
const token = path.split('/booking/')[1];
|
const token = path.split('/booking/')[1];
|
||||||
if (token) {
|
if (token) {
|
||||||
return <BookingStatusPage token={token} />;
|
return <>
|
||||||
|
{PwaPrompt}
|
||||||
|
<BookingStatusPage token={token} />
|
||||||
|
</>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -47,7 +53,10 @@ function App() {
|
|||||||
if (path.startsWith('/review/')) {
|
if (path.startsWith('/review/')) {
|
||||||
const token = path.split('/review/')[1];
|
const token = path.split('/review/')[1];
|
||||||
if (token) {
|
if (token) {
|
||||||
return <ReviewSubmissionPage token={token} />;
|
return <>
|
||||||
|
{PwaPrompt}
|
||||||
|
<ReviewSubmissionPage token={token} />
|
||||||
|
</>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -381,6 +390,9 @@ function App() {
|
|||||||
)}
|
)}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{/* PWA Installation Prompt for iOS */}
|
||||||
|
<PWAInstallPrompt hidden={isMobileMenuOpen} />
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="bg-white border-t border-pink-100 mt-16">
|
<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">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
|||||||
187
src/client/components/pwa-install-prompt.tsx
Normal file
187
src/client/components/pwa-install-prompt.tsx
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface BeforeInstallPromptEvent extends Event {
|
||||||
|
prompt: () => Promise<void>;
|
||||||
|
userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Navigator { standalone?: boolean }
|
||||||
|
interface WindowEventMap {
|
||||||
|
beforeinstallprompt: BeforeInstallPromptEvent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
|
||||||
|
const ANDROID_DISMISSED_KEY = 'pwaInstallPrompt_androidDismissed';
|
||||||
|
|
||||||
|
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 [promptType, setPromptType] = useState<'ios' | 'android' | null>(null);
|
||||||
|
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
|
||||||
|
const [initialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Only run on client
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
|
||||||
|
// Check if already in standalone mode
|
||||||
|
if (isStandalone()) {
|
||||||
|
setInitialized(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle iOS
|
||||||
|
const isIOSDevice = isIOS() && isSafari();
|
||||||
|
if (isIOSDevice) {
|
||||||
|
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;
|
||||||
|
|
||||||
|
if (shouldShow) {
|
||||||
|
setPromptType('ios');
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
setInitialized(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle Android (beforeinstallprompt)
|
||||||
|
const handleBeforeInstall = (e: BeforeInstallPromptEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Check if user has dismissed Android prompt before
|
||||||
|
let dismissed = false;
|
||||||
|
try {
|
||||||
|
dismissed = localStorage.getItem(ANDROID_DISMISSED_KEY) === 'true';
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
if (!dismissed) {
|
||||||
|
setDeferredPrompt(e);
|
||||||
|
setPromptType('android');
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('beforeinstallprompt', handleBeforeInstall);
|
||||||
|
setInitialized(true);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dismiss = () => {
|
||||||
|
if (promptType === 'ios') {
|
||||||
|
try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
|
||||||
|
} else if (promptType === 'android') {
|
||||||
|
try { localStorage.setItem(ANDROID_DISMISSED_KEY, 'true'); } catch {}
|
||||||
|
}
|
||||||
|
setShow(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAndroidInstall = async () => {
|
||||||
|
if (!deferredPrompt) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await deferredPrompt.prompt();
|
||||||
|
const choiceResult = await deferredPrompt.userChoice;
|
||||||
|
|
||||||
|
if (choiceResult.outcome === 'accepted') {
|
||||||
|
console.log('PWA installation accepted');
|
||||||
|
}
|
||||||
|
|
||||||
|
setDeferredPrompt(null);
|
||||||
|
setShow(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error during PWA installation:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!initialized || !show || !promptType) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-label={promptType === 'android' ? 'PWA Installation' : '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>
|
||||||
|
|
||||||
|
{promptType === 'android' ? (
|
||||||
|
// Android: Direct install button
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="text-3xl">📱</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-3">
|
||||||
|
Installiere Stargirlnails als App für schnellen Zugriff direkt vom Startbildschirm!
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleAndroidInstall}
|
||||||
|
className="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold hover:bg-pink-50 transition-colors"
|
||||||
|
>
|
||||||
|
Jetzt installieren
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={dismiss}
|
||||||
|
className="bg-white/20 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition-colors"
|
||||||
|
>
|
||||||
|
Später
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// iOS: Manual instructions
|
||||||
|
<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;
|
||||||
|
|
||||||
@@ -63,6 +63,8 @@ if (process.env.NODE_ENV === 'production') {
|
|||||||
}
|
}
|
||||||
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
|
app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
|
||||||
app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
|
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("/rpc", rpcApp);
|
||||||
app.route("/caldav", caldavApp);
|
app.route("/caldav", caldavApp);
|
||||||
|
|||||||
@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return c.html(
|
return c.html(
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charSet="utf-8" />
|
<meta charSet="utf-8" />
|
||||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
<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>
|
<title>Stargirlnails Kiel</title>
|
||||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
<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) => (
|
{cssFiles && cssFiles.map((css: string) => (
|
||||||
<link key={css} rel="stylesheet" href={css} />
|
<link key={css} rel="stylesheet" href={css} />
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user