Add PWA manifest and apple-touch-icon meta tag
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
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
|
||||||
|
|
||||||
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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
@@ -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