# PWA Setup Guide

Your site is now configured as a Progressive Web App! 🎉

## What's Been Added

1. **manifest.json** - App configuration
2. **sw.js** - Service worker for caching and offline support
3. **pwa-register.js** - Service worker registration
4. **offline.html** - Offline fallback page
5. **Updated base_head.html** - Links to manifest and PWA script

## Missing: App Icons

You need to create PNG icons from your SVG. Run these commands:

### Using ImageMagick (recommended):

```bash
cd src/public

# 192x192 icon
convert epi_all_colors.svg -resize 192x192 -background none icon-192.png

# 512x512 icon
convert epi_all_colors.svg -resize 512x512 -background none icon-512.png

# Maskable icon (512x512 with safe zone)
convert epi_all_colors.svg -resize 409x409 -background none -gravity center -extent 512x512 icon-maskable-512.png
```

### Or using Inkscape:

```bash
inkscape epi_all_colors.svg --export-type=png --export-filename=icon-192.png -w 192 -h 192
inkscape epi_all_colors.svg --export-type=png --export-filename=icon-512.png -w 512 -h 512
inkscape epi_all_colors.svg --export-type=png --export-filename=icon-maskable-512.png -w 512 -h 512
```

### Or use an online tool:
- https://realfavicongenerator.net/
- https://www.pwabuilder.com/

## Optional: Screenshots (for better app install experience)

Create screenshots of your site:

```bash
# Mobile screenshot (540x720)
screenshot-mobile.png

# Desktop screenshot (1280x720)
screenshot-desktop.png
```

You can use browser DevTools to capture these, or remove the `screenshots` section from manifest.json if you don't want them.

## Testing Your PWA

1. **Serve over HTTPS** - PWAs require HTTPS (localhost works for testing)
2. **Open Chrome DevTools** → Application tab → Manifest
3. **Check Service Worker** → Application tab → Service Workers
4. **Lighthouse Audit** → Run PWA audit to see score

## Install Prompt

When users visit your site, they'll see an "Install App" button in the bottom-right corner for 10 seconds. They can:
- Click it to install immediately
- Use browser menu: "Install MrJuneJune" or "Add to Home Screen"

## Features

✅ **Offline Support** - Caches pages, CSS, JS, fonts, images
✅ **App Shortcuts** - Quick access to Blog and Notes
✅ **Install Prompt** - Automatic install button
✅ **Auto-updates** - Service worker updates on reload
✅ **Fast Loading** - Cached resources load instantly

## Customization

Edit `manifest.json` to change:
- `theme_color` - App theme color
- `background_color` - Splash screen color
- `display` - `standalone`, `fullscreen`, `minimal-ui`, or `browser`
- `shortcuts` - App shortcut menu items

Edit `sw.js` to change:
- `CACHE_VERSION` - Increment to force cache refresh
- `STATIC_CACHE` - Files to cache immediately
- Caching strategy (currently: cache-first with network fallback)

## Testing on Mobile

### Android:
1. Open Chrome
2. Visit your site
3. Tap menu → "Install app" or "Add to Home Screen"

### iOS (Safari):
1. Open Safari
2. Tap Share button
3. Tap "Add to Home Screen"

Note: iOS has limited PWA support (no install prompt, limited background features)

## Debugging

Check console for:
- `[PWA]` - Registration events
- `[SW]` - Service worker caching events

Clear cache:
```js
navigator.serviceWorker.controller.postMessage({ type: 'CLEAR_CACHE' });
```

## Next Steps

1. Generate the PNG icons (see commands above)
2. Test on HTTPS
3. Run Lighthouse audit
4. Deploy and test on mobile device
5. Consider adding:
   - Push notifications
   - Background sync
   - Share target API