# 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

## App Icons and WebP Assets

All shipped raster images are generated as WebP by Bazel. Source PNGs live
under `mrjunejune/assets/png/` and are never copied into the release bundle.

```bash
bazel build //mrjunejune:generated_webp_assets
```

The complete site bundle also runs the conversion pipeline:

```bash
bazel build //mrjunejune:mrjunejune_server_bundle
```

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

Create screenshots of your site:

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

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

You can use browser DevTools to capture these. Add their PNG sources to the
WebP asset list before referencing the generated `.webp` files in the manifest.

## 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** - New service workers activate and reload clients automatically
✅ **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:
  - HTML, CSS, JS, JSON, and WASM are network-first with offline cache fallback.
  - Fonts and images are stale-while-revalidate.
  - Component sandbox assets always bypass service-worker caching.

Unversioned application code must not use cache-first. That can preserve stale
production CSS or JavaScript indefinitely when a deployment reuses the same URL.

## 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