--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/PWA_SETUP.md	Sun Feb 15 15:43:26 2026 -0800
@@ -0,0 +1,126 @@
+# 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