- Update viewport meta tag to include viewport-fit=cover
- Add apple-mobile-web-app-capable and status-bar-style meta tags
- Add CSS safe area insets to body element for proper notch handling
- Ensures content extends into safe areas on iOS devices while
respecting notches and rounded corners
Co-authored-by: Claude <noreply@anthropic.com>
* feat: add site icon and favicon
- Downloaded and cropped Grimoire icon from nostr.build
- Created multiple favicon sizes (16x16, 32x32, 180x180, 512x512)
- Generated traditional .ico format and PNG variants
- Added Apple touch icon for iOS devices
- Updated index.html with proper favicon links
* feat: make Grimoire installable as a PWA
- Created web manifest (site.webmanifest) with app metadata
- Added app name, description, theme colors
- Configured standalone display mode for native-like experience
- Included all required icon sizes (192x192, 512x512)
- Added keyboard shortcut for command palette
- Generated 192x192 icon for PWA requirements
- Added manifest and theme-color meta tags to index.html
- Implemented service worker (sw.js) for offline functionality
- Network-first caching strategy for optimal performance
- Precaches core assets on install
- Provides offline fallback for navigation requests
- Registered service worker in main.tsx
Users can now install Grimoire as a standalone app on desktop and mobile devices.
* fix: properly configure maskable PWA icons
The previous configuration incorrectly marked regular icons as "maskable",
which would cause them to be cropped when displayed in circular or rounded
shapes on Android devices.
Changes:
- Created dedicated maskable icons with 10% padding (safe zone)
- Maskable icons use dark background (#020817) matching app theme
- Separated "any" and "maskable" purposes in manifest
- Regular icons (192x192, 512x512) use full space with purpose="any"
- Maskable icons (192x192-maskable, 512x512-maskable) have padding with purpose="maskable"
This ensures icons display correctly in all contexts:
- Regular icons for browser tabs, shortcuts, splash screens
- Maskable icons for adaptive icon shapes on Android
* chore: simplify PWA manifest
- Simplify name to just 'Grimoire'
- Add 'nostr' to categories for better discoverability
- Remove shortcuts (not needed for initial launch)
---------
Co-authored-by: Claude <noreply@anthropic.com>
