MacPro
114 lines
3.4 KiB
Markdown
114 lines
3.4 KiB
Markdown
# PWA Icon Generator
|
|
|
|
This script generates PWA (Progressive Web App) icon PNG files for the Workout Planner app using only Node.js built-in modules.
|
|
|
|
## Features
|
|
|
|
- **No external dependencies**: Uses only Node.js built-in modules (`fs`, `zlib`, `path`)
|
|
- **PNG format with proper compression**: Generates valid PNG files with zlib compression
|
|
- **Multiple sizes**: Creates icons for all common PWA sizes:
|
|
- 72x72, 96x96, 128x128, 144x144, 152x152 (small devices)
|
|
- 192x192, 384x384, 512x512 (larger devices)
|
|
- **Maskable icons**: Creates adaptive icon variants (192x192 and 512x512) for Android
|
|
- **SVG favicon**: Generates a bonus SVG favicon for browsers
|
|
|
|
## Design
|
|
|
|
The icons feature:
|
|
- **Dark luxury aesthetic**: #0A0A0A (near-black) background
|
|
- **Stylized "W" letter**: White (#FFFFFF) geometric design representing "Workout"
|
|
- **Clean, bold design**: Perfect for a gym/fitness application
|
|
|
|
## Usage
|
|
|
|
```bash
|
|
node scripts/generate-icons.js
|
|
```
|
|
|
|
This will generate all icon files in `public/icons/` directory:
|
|
- `icon-{size}x{size}.png` - Regular icons for various sizes
|
|
- `icon-{size}x{size}-maskable.png` - Maskable variants for adaptive icons
|
|
- `favicon.svg` - SVG favicon for browsers
|
|
|
|
## Integration with PWA
|
|
|
|
The generated icons are automatically referenced in `public/manifest.json`. The manifest includes:
|
|
- All standard icon sizes for different devices
|
|
- Maskable icons for Android adaptive icon support
|
|
- Proper MIME types and purposes
|
|
|
|
### HTML Integration
|
|
|
|
Add this to your `<head>`:
|
|
|
|
```html
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png">
|
|
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
|
|
|
|
<!-- Theme color -->
|
|
<meta name="theme-color" content="#FFFFFF">
|
|
<meta name="background-color" content="#0A0A0A">
|
|
```
|
|
|
|
## Technical Details
|
|
|
|
### PNG Generation
|
|
|
|
The script uses raw PNG format generation:
|
|
1. Creates pixel buffer with RGBA color values
|
|
2. Generates PNG header (IHDR chunk) with image dimensions and color info
|
|
3. Prepares image data with filter bytes for each row
|
|
4. Compresses data using zlib deflate algorithm
|
|
5. Generates IDAT chunk with compressed data
|
|
6. Calculates CRC32 checksums for data integrity
|
|
7. Outputs valid PNG file with proper structure
|
|
|
|
### Custom Drawing
|
|
|
|
The `drawW()` function:
|
|
- Fills background with #0A0A0A
|
|
- Draws a stylized "W" using vertical bars/rectangles
|
|
- Proportionally scales to any icon size
|
|
- Uses simple, fast rectangle fill operations
|
|
|
|
## Regenerating Icons
|
|
|
|
If you modify the design colors or want to regenerate:
|
|
|
|
1. Edit the color constants in `generate-icons.js`:
|
|
- `BACKGROUND_COLOR` - Icon background (default: #0A0A0A)
|
|
- `TEXT_COLOR` - "W" letter color (default: #FFFFFF)
|
|
|
|
2. Modify the `drawW()` function to change the letter design
|
|
|
|
3. Run the script again:
|
|
```bash
|
|
node scripts/generate-icons.js
|
|
```
|
|
|
|
All icons will be regenerated with the new design.
|
|
|
|
## File Sizes
|
|
|
|
The generated PNG files are highly optimized:
|
|
- Small sizes (72-152px): ~250-1000 bytes
|
|
- Medium size (192px): ~1.3 KB
|
|
- Large size (384px): ~4.2 KB
|
|
- Extra large (512px): ~7.2 KB
|
|
|
|
The compact file sizes are due to zlib compression of the simple color scheme.
|
|
|
|
## Browser Support
|
|
|
|
These icons work on:
|
|
- Chrome/Edge PWA installation
|
|
- Firefox PWA installation
|
|
- Safari iOS add-to-home-screen
|
|
- Android adaptive icons (maskable variants)
|
|
- Desktop browser tabs (favicon)
|