From 14d0c2f9c3b50572022dfaf1e1ec559f70e88d46 Mon Sep 17 00:00:00 2001 From: elpatron Date: Tue, 7 Oct 2025 13:12:31 +0200 Subject: [PATCH] Add PWA manifest and apple-touch-icon meta tag --- index.html | 6 ++++ public/icons/README.md | 45 ++++++++++++++++++++++++++++++ public/manifest.json | 32 +++++++++++++++++++++ src/server/routes/client-entry.tsx | 8 +++++- 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 public/icons/README.md create mode 100644 public/manifest.json diff --git a/index.html b/index.html index 45baccb..668621a 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,13 @@ + + + + + + Stargirlnails Kiel - Terminbuchung diff --git a/public/icons/README.md b/public/icons/README.md new file mode 100644 index 0000000..e226ab4 --- /dev/null +++ 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 + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..267cf3a --- /dev/null +++ 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" + } + ] +} + diff --git a/src/server/routes/client-entry.tsx b/src/server/routes/client-entry.tsx index c83dd75..e077c65 100644 --- a/src/server/routes/client-entry.tsx +++ b/src/server/routes/client-entry.tsx @@ -30,12 +30,18 @@ export function clientEntry(c: Context) { } return c.html( - + + + + + Stargirlnails Kiel + + {cssFiles && cssFiles.map((css: string) => ( ))}