Mercurial

comparison mrjunejune/PWA_SETUP.md @ 241:9c2eec61a152

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[assets] Generate site images as WebP with Bazel
author MrJuneJune <me@mrjunejune.com>
date Mon, 03 Aug 2026 11:26:30 -0700
parents 3b47e82ac57e
children e02e2036ef84
comparison
equal deleted inserted replaced
240:c345083cd8a7 241:9c2eec61a152
8 2. **sw.js** - Service worker for caching and offline support 8 2. **sw.js** - Service worker for caching and offline support
9 3. **pwa-register.js** - Service worker registration 9 3. **pwa-register.js** - Service worker registration
10 4. **offline.html** - Offline fallback page 10 4. **offline.html** - Offline fallback page
11 5. **Updated base_head.html** - Links to manifest and PWA script 11 5. **Updated base_head.html** - Links to manifest and PWA script
12 12
13 ## Missing: App Icons 13 ## App Icons and WebP Assets
14 14
15 You need to create PNG icons from your SVG. Run these commands: 15 All shipped raster images are generated as WebP by Bazel. Source PNGs live
16 16 under `mrjunejune/assets/png/` and are never copied into the release bundle.
17 ### Using ImageMagick (recommended):
18 17
19 ```bash 18 ```bash
20 cd src/public 19 bazel build //mrjunejune:generated_webp_assets
21
22 # 192x192 icon
23 convert epi_all_colors.svg -resize 192x192 -background none icon-192.png
24
25 # 512x512 icon
26 convert epi_all_colors.svg -resize 512x512 -background none icon-512.png
27
28 # Maskable icon (512x512 with safe zone)
29 convert epi_all_colors.svg -resize 409x409 -background none -gravity center -extent 512x512 icon-maskable-512.png
30 ``` 20 ```
31 21
32 ### Or using Inkscape: 22 The complete site bundle also runs the conversion pipeline:
33 23
34 ```bash 24 ```bash
35 inkscape epi_all_colors.svg --export-type=png --export-filename=icon-192.png -w 192 -h 192 25 bazel build //mrjunejune:mrjunejune_server_bundle
36 inkscape epi_all_colors.svg --export-type=png --export-filename=icon-512.png -w 512 -h 512
37 inkscape epi_all_colors.svg --export-type=png --export-filename=icon-maskable-512.png -w 512 -h 512
38 ``` 26 ```
39
40 ### Or use an online tool:
41 - https://realfavicongenerator.net/
42 - https://www.pwabuilder.com/
43 27
44 ## Optional: Screenshots (for better app install experience) 28 ## Optional: Screenshots (for better app install experience)
45 29
46 Create screenshots of your site: 30 Create screenshots of your site:
47 31
48 ```bash 32 ```bash
49 # Mobile screenshot (540x720) 33 # Mobile screenshot (540x720)
50 screenshot-mobile.png 34 screenshot-mobile.webp
51 35
52 # Desktop screenshot (1280x720) 36 # Desktop screenshot (1280x720)
53 screenshot-desktop.png 37 screenshot-desktop.webp
54 ``` 38 ```
55 39
56 You can use browser DevTools to capture these, or remove the `screenshots` section from manifest.json if you don't want them. 40 You can use browser DevTools to capture these. Add their PNG sources to the
41 WebP asset list before referencing the generated `.webp` files in the manifest.
57 42
58 ## Testing Your PWA 43 ## Testing Your PWA
59 44
60 1. **Serve over HTTPS** - PWAs require HTTPS (localhost works for testing) 45 1. **Serve over HTTPS** - PWAs require HTTPS (localhost works for testing)
61 2. **Open Chrome DevTools** → Application tab → Manifest 46 2. **Open Chrome DevTools** → Application tab → Manifest