Whew, I *finally* got the #PWA for my #Firefish instance working and also displaying the right icons everywhere. It's never worked right and I had mostly just ignored it because I've been using Milktea for a mobile client anyway, but I finally figured it out, and it turned out to be a bit of a rabbit hole, so I'm gonna document it here for anybody else who comes along (or in case I need to redo it later), since I know I've got a few other small-instance Firefish admins following me...
1. First, on the Admin Settings page, you have to set the Icon URL to an icon for your server, obviously. But that's not enough!
2. There are *also* several icons the server serves out of its `static-assets` directory that have to be updated, and this is made particularly awkward if you're running in Docker because updating those is a build step, and so it'll get blown away if you're recreating your container every time your instance starts.
3. To do so, make a copy of the `custom/assets/` directory out of the repository. Stick it anywhere under the directory with your `docker-compose.yml` file. Replace at least `favicon.ico` and `favicon.png` with your icon; also add an `icons` subdirectory with files under it named `192.png`, `512.png`, `maskable.png`, and `monochrome.png`, and update them all with your icon. See https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons for some advice on those icons.
4. Mount that directory at `/firefish/custom/assets` in your docker compose file and modify the `command` to run `pnpm run gulp` before it starts the server. Relevant lines from my `docker-compose.yml`:
```
volumes:
- ./assets:/firefish/custom/assets
- ./files:/firefish/files
- ./.config:/firefish/.config:ro
command: bash -c "pnpm run gulp; pnpm run migrateandstart"
```
5. After restarting the container, look inside its filesystem under `/firefish/packages/backend/assets/`; you should see your assets have been added there.
6. If you are using an nginx reverse proxy, you *also* need to clean nginx's cache or it will keep serving the old files. Delete everything under `/tmp/nginx_cache/` on your host filesystem. (other reverse proxies may have similar cache issues)
To test loading the assets, first look at the `manifest.json` file on your server (e.g. https://fuzzyfox.social/manifest.json ). It has relative URLs for all of the icons; copy and paste them and try loading all of them (e.g. https://fuzzyfox.social/static-assets/icons/192.png?v=10518 ) and make sure they're right. You may also need to clear your browser cache. If you still see the old icons, try changing the `v=` parameter at the end to something different. If it changes, that means the old files are still being cached somewhere.
After doing all that, the Firefish PWA works on my phone, plus it displays all the right icons there and in the shortcuts panel of my desktop web browser. :neofox_owo:
なっかあ
All GNU social JP content and data are available under the