Add PWA, service worker and Web Push

- Use new notification request/opt-in flow for push
- Implement unsubscribing
- Implement muting
- Implement emojis in title
- Add iOS specific PWA warning
- Don’t use websockets when web push is enabled
- Fix duplicate notifications
- Implement default web push setting
- Implement changing subscription type
- Implement web push subscription refresh
- Implement web push notification click

docs/develop.md

@@ -16,7 +16,7 @@ server consists of three components:
 * **The documentation** is generated by [MkDocs](https://www.mkdocs.org/) and [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/),
   which is written in [Python](https://www.python.org/). You'll need Python and MkDocs (via `pip`) only if you want to
   build the docs.
-* **The web app** is written in [React](https://reactjs.org/), using [MUI](https://mui.com/). It uses [Create React App](https://create-react-app.dev/)
+* **The web app** is written in [React](https://reactjs.org/), using [MUI](https://mui.com/). It uses [Vite](https://vitejs.dev/)
   to build the production build. If you want to modify the web app, you need [nodejs](https://nodejs.org/en/) (for `npm`) 
   and install all the 100,000 dependencies (*sigh*).
 
@@ -241,6 +241,67 @@ $ cd web
 $ npm start
 ```
 
+### Testing Web Push locally
+
+Reference: <https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http>
+
+#### With the dev servers
+
+1. Get web push keys `go run main.go web-push-keys`
+
+2. Run the server with web push enabled
+
+    ```sh
+    go run main.go \
+      --log-level debug \
+      serve \
+        --web-push-enabled \
+        --web-push-public-key KEY \
+        --web-push-private-key KEY \
+        --web-push-subscriptions-file=/tmp/subscriptions.db
+    ```
+
+3. In `web/public/config.js` set `base_url` to `http://localhost`. This is required as web push can only be used
+   with the server matching the `base_url`
+
+4. Run `ENABLE_DEV_PWA=1 npm run start` - this enables the dev service worker
+
+5. Set your browser to allow testing service workers insecurely:
+
+   - Chrome:
+
+      Open Chrome with special flags allowing insecure localhost service worker testing (regularly dismissing SSL warnings is not enough)
+
+      ```sh
+      # for example, macOS
+      /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
+        --user-data-dir=/tmp/foo \
+        --unsafely-treat-insecure-origin-as-secure=http://localhost:3000,http://localhost
+      ```
+
+  - Firefox:
+  
+      See here: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
+
+      > Note: On Firefox, for testing you can run service workers over HTTP (insecurely); simply check the Enable Service Workers over HTTP (when toolbox is open) option in the Firefox Devtools options/gear menu
+
+  - Safari, iOS:
+
+      There doesn't seem to be a good way to do this currently. The only way is to serve a valid HTTPS certificate.
+
+      This is beyond the scope of this guide, but you can try `mkcert`, a number of reverse proxies such as Traefik and Caddy,
+      or tunneling software such as [Cloudflare Tunnels][cloudflare_tunnels] or ngrok.
+
+[cloudflare_tunnels]: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/
+
+6. Open <http://localhost:3000/>
+#### With a built package
+
+1. Run `make web-build`
+
+2. Follow steps 1, 2, 4 and 5 from "With the dev servers"
+
+3. Open <http://localhost/>
 ### Build the docs
 The sources for the docs live in `docs/`. Similarly to the web app, you can simply run `make docs` to build the 
 documentation. As long as you have `mkdocs` installed (see above), this should work fine: