WIP: Templating

Update README.md

.github/workflows/test.yaml

@@ -8,12 +8,18 @@ jobs:
         uses: actions/setup-go@v2
         with:
           go-version: '1.17.x'
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Install dependencies
         run: sudo apt update && sudo apt install -y python3-pip curl
       - name: Build docs (required for tests)
         run: make docs
+      - name: Build web app (required for tests)
+        run: make web
       - name: Run tests, formatting, vetting and linting
         run: make check
       - name: Run coverage

.gitignore

@@ -2,6 +2,8 @@ dist/
 build/
 .idea/
 server/docs/
+server/site/
 tools/fbsend/fbsend
 playground/
 *.iml
+node_modules/

.goreleaser.yml

@@ -59,12 +59,12 @@ nfpms:
     contents:
       - src: server/server.yml
         dst: /etc/ntfy/server.yml
-        type: config
+        type: "config|noreplace"
       - src: server/ntfy.service
         dst: /lib/systemd/system/ntfy.service
       - src: client/client.yml
         dst: /etc/ntfy/client.yml
-        type: config
+        type: "config|noreplace"
       - src: client/ntfy-client.service
         dst: /lib/systemd/system/ntfy-client.service
       - dst: /var/cache/ntfy
@@ -74,7 +74,7 @@ nfpms:
       - dst: /var/lib/ntfy
         type: dir
       - dst: /usr/share/ntfy/logo.png
-        src: server/static/img/ntfy.png
+        src: web/public/static/img/ntfy.png
     scripts:
       preinstall: "scripts/preinst.sh"
       postinstall: "scripts/postinst.sh"

Makefile

@@ -38,12 +38,34 @@ help:
 
 
 # Documentation
+
 docs-deps: .PHONY
 	pip3 install -r requirements.txt
 
 docs: docs-deps
 	mkdocs build
 
+
+# Web app
+
+web-deps:
+	cd web \
+		&& npm install \
+		&& node_modules/svgo/bin/svgo src/img/*.svg
+
+web-build:
+	cd web \
+		&& npm run build \
+		&& mv build/index.html build/app.html \
+		&& rm -rf ../server/site \
+		&& mv build ../server/site \
+		&& rm \
+			../server/site/config.js \
+			../server/site/asset-manifest.json
+
+web: web-deps web-build
+
+
 # Test/check targets
 
 check: test fmt-check vet lint staticcheck
@@ -94,7 +116,7 @@ staticcheck: .PHONY
 
 # Building targets
 
-build-deps: docs
+build-deps: docs web
 	which arm-linux-gnueabi-gcc || { echo "ERROR: ARMv6/v7 cross compiler not installed. On Ubuntu, run: apt install gcc-arm-linux-gnueabi"; exit 1; }
 	which aarch64-linux-gnu-gcc || { echo "ERROR: ARM64 cross compiler not installed. On Ubuntu, run: apt install gcc-aarch64-linux-gnu"; exit 1; }
 
@@ -105,8 +127,9 @@ build-snapshot: build-deps
 	goreleaser build --snapshot --rm-dist --debug
 
 build-simple: clean
-	mkdir -p dist/ntfy_linux_amd64 server/docs
-	touch server/docs/dummy
+	mkdir -p dist/ntfy_linux_amd64 server/docs server/site
+	touch server/docs/index.html
+	touch server/site/app.html
 	export CGO_ENABLED=1
 	go build \
 		-o dist/ntfy_linux_amd64/ntfy \
@@ -115,7 +138,7 @@ build-simple: clean
 		"-linkmode=external -extldflags=-static -s -w -X main.version=$(VERSION) -X main.commit=$(shell git rev-parse --short HEAD) -X main.date=$(shell date +%s)"
 
 clean: .PHONY
-	rm -rf dist build server/docs
+	rm -rf dist build server/docs server/site
 
 
 # Releasing targets
@@ -126,6 +149,14 @@ release-check-tags:
 	 	echo "ERROR: Must update docs/install.md with latest tag first.";\
 	 	exit 1;\
 	fi
+	if grep -q XXXXX docs/releases.md; then\
+		echo "ERROR: Must update docs/releases.md, found XXXXX.";\
+		exit 1;\
+	fi
+	if ! grep -q $(LATEST_TAG) docs/releases.md; then\
+		echo "ERROR: Must update docs/releases.mdwith latest tag first.";\
+		exit 1;\
+	fi
 
 release: build-deps release-check-tags check
 	goreleaser release --rm-dist --debug

README.md

@@ -1,4 +1,4 @@
-![ntfy](server/static/img/ntfy.png)
+![ntfy](web/public/static/img/ntfy.png)
 
 # ntfy.sh | Send push notifications to your phone or desktop via PUT/POST
 [![Release](https://img.shields.io/github/release/binwiederhier/ntfy.svg?color=success&style=flat-square)](https://github.com/binwiederhier/ntfy/releases/latest)
@@ -18,11 +18,11 @@ I run a free version of it at **[ntfy.sh](https://ntfy.sh)**, and there's an [op
 too.
 
 <p>
-  <img src="server/static/img/screenshot-curl.png" height="180">
-  <img src="server/static/img/screenshot-web-detail.png" height="180">
-  <img src="server/static/img/screenshot-phone-main.jpg" height="180">
-  <img src="server/static/img/screenshot-phone-detail.jpg" height="180">
-  <img src="server/static/img/screenshot-phone-notification.jpg" height="180">
+  <img src="web/public/static/img/screenshot-curl.png" height="180">
+  <img src="web/public/static/img/screenshot-web-detail.png" height="180">
+  <img src="web/public/static/img/screenshot-phone-main.jpg" height="180">
+  <img src="web/public/static/img/screenshot-phone-detail.jpg" height="180">
+  <img src="web/public/static/img/screenshot-phone-notification.jpg" height="180">
 </p>
 
 ## **[Documentation](https://ntfy.sh/docs/)**
@@ -47,13 +47,21 @@ The project is dual licensed under the [Apache License 2.0](LICENSE) and the [GP
 
 Third party libraries and resources:
 * [github.com/urfave/cli/v2](https://github.com/urfave/cli/v2) (MIT) is used to drive the CLI
-* [Mixkit sound](https://mixkit.co/free-sound-effects/notification/) (Mixkit Free License) used as notification sound
-* [Lato Font](https://www.latofonts.com/) (OFL) is used as a font in the Web UI
+* [Mixkit sounds](https://mixkit.co/free-sound-effects/notification/) (Mixkit Free License) are used as notification sounds
+* [Sounds from notificationsounds.com](https://notificationsounds.com) (Creative Commons Attribution) are used as notification sounds
+* [Roboto Font](https://fonts.google.com/specimen/Roboto) (Apache 2.0) is used as a font in everything web
+* [React](https://reactjs.org/) (MIT) is used for the web app
+* [Material UI components](https://mui.com/) (MIT) are used in the web app
+* [MUI dashboard template](https://github.com/mui/material-ui/tree/master/docs/data/material/getting-started/templates/dashboard) (MIT) was used as a basis for the web app
+* [Dexie.js](https://github.com/dexie/Dexie.js) (Apache 2.0) is used for web app persistence in IndexedDB
 * [GoReleaser](https://goreleaser.com/) (MIT) is used to create releases
 * [go-smtp](https://github.com/emersion/go-smtp) (MIT) is used to receive e-mails
 * [stretchr/testify](https://github.com/stretchr/testify) (MIT) is used for unit and integration tests
 * [github.com/mattn/go-sqlite3](https://github.com/mattn/go-sqlite3) (MIT) is used to provide the persistent message cache
 * [Firebase Admin SDK](https://github.com/firebase/firebase-admin-go) (Apache 2.0) is used to send FCM messages
 * [github/gemoji](https://github.com/github/gemoji) (MIT) is used for emoji support (specifically the [emoji.json](https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json) file)
-* [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) 
+* [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) as a lightbox on the landing page 
+* [HTTP middleware for gzip compression](https://gist.github.com/CJEnright/bc2d8b8dc0c1389a9feeddb110f822d7) (MIT) is used for serving static files
+* [Regex for auto-linking](https://github.com/bryanwoods/autolink-js) (MIT) is used to highlight links (the library is not used)
 * [Statically linking go-sqlite3](https://www.arp242.net/static-go.html)
+* [Linked tabs in mkdocs](https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#linked-tabs)

cmd/app.go

@@ -30,9 +30,6 @@ func New() *cli.App {
 		Reader:                 os.Stdin,
 		Writer:                 os.Stdout,
 		ErrWriter:              os.Stderr,
-		Action:                 execMainApp,
-		Before:                 initConfigFileInputSource("config", flagsServe), // DEPRECATED, see deprecation notice
-		Flags:                  flagsServe,                                      // DEPRECATED, see deprecation notice
 		Commands: []*cli.Command{
 			// Server commands
 			cmdServe,
@@ -46,12 +43,6 @@ func New() *cli.App {
 	}
 }
 
-func execMainApp(c *cli.Context) error {
-	fmt.Fprintln(c.App.ErrWriter, "\x1b[1;33mDeprecation notice: Please run the server using 'ntfy serve'; see 'ntfy -h' for help.\x1b[0m")
-	fmt.Fprintln(c.App.ErrWriter, "\x1b[1;33mThis way of running the server will be removed March 2022. See https://ntfy.sh/docs/deprecations/ for details.\x1b[0m")
-	return execServe(c)
-}
-
 // initConfigFileInputSource is like altsrc.InitInputSourceWithContext and altsrc.NewYamlSourceFromFlagFunc, but checks
 // if the config flag is exists and only loads it if it does. If the flag is set and the file exists, it fails.
 func initConfigFileInputSource(configFlag string, flags []cli.Flag) cli.BeforeFunc {

cmd/serve.go

@@ -33,6 +33,8 @@ var flagsServe = []cli.Flag{
 	altsrc.NewDurationFlag(&cli.DurationFlag{Name: "attachment-expiry-duration", Aliases: []string{"X"}, EnvVars: []string{"NTFY_ATTACHMENT_EXPIRY_DURATION"}, Value: server.DefaultAttachmentExpiryDuration, DefaultText: "3h", Usage: "duration after which uploaded attachments will be deleted (e.g. 3h, 20h)"}),
 	altsrc.NewDurationFlag(&cli.DurationFlag{Name: "keepalive-interval", Aliases: []string{"k"}, EnvVars: []string{"NTFY_KEEPALIVE_INTERVAL"}, Value: server.DefaultKeepaliveInterval, Usage: "interval of keepalive messages"}),
 	altsrc.NewDurationFlag(&cli.DurationFlag{Name: "manager-interval", Aliases: []string{"m"}, EnvVars: []string{"NTFY_MANAGER_INTERVAL"}, Value: server.DefaultManagerInterval, Usage: "interval of for message pruning and stats printing"}),
+	altsrc.NewStringFlag(&cli.StringFlag{Name: "web-root", EnvVars: []string{"NTFY_WEB_ROOT"}, Value: "app", Usage: "sets web root to landing page (home) or web app (app)"}),
+	altsrc.NewStringFlag(&cli.StringFlag{Name: "message-size-limit", Aliases: []string{"M"}, EnvVars: []string{"NTFY_MESSAGE_SIZE_LIMIT"}, DefaultText: "4K", Usage: "size limit of messages before they are treated as attachments (e.g. 4K, 64K)"}),
 	altsrc.NewStringFlag(&cli.StringFlag{Name: "smtp-sender-addr", EnvVars: []string{"NTFY_SMTP_SENDER_ADDR"}, Usage: "SMTP server address (host:port) for outgoing emails"}),
 	altsrc.NewStringFlag(&cli.StringFlag{Name: "smtp-sender-user", EnvVars: []string{"NTFY_SMTP_SENDER_USER"}, Usage: "SMTP user (if e-mail sending is enabled)"}),
 	altsrc.NewStringFlag(&cli.StringFlag{Name: "smtp-sender-pass", EnvVars: []string{"NTFY_SMTP_SENDER_PASS"}, Usage: "SMTP password (if e-mail sending is enabled)"}),
@@ -93,6 +95,8 @@ func execServe(c *cli.Context) error {
 	attachmentExpiryDuration := c.Duration("attachment-expiry-duration")
 	keepaliveInterval := c.Duration("keepalive-interval")
 	managerInterval := c.Duration("manager-interval")
+	webRoot := c.String("web-root")
+	messageSizeLimitStr := c.String("message-size-limit")
 	smtpSenderAddr := c.String("smtp-sender-addr")
 	smtpSenderUser := c.String("smtp-sender-user")
 	smtpSenderPass := c.String("smtp-sender-pass")
@@ -136,9 +140,12 @@ func execServe(c *cli.Context) error {
 		return errors.New("if set, base-url must start with http:// or https://")
 	} else if !util.InStringList([]string{"read-write", "read-only", "write-only", "deny-all"}, authDefaultAccess) {
 		return errors.New("if set, auth-default-access must start set to 'read-write', 'read-only', 'write-only' or 'deny-all'")
+	} else if !util.InStringList([]string{"app", "home"}, webRoot) {
+		return errors.New("if set, web-root must be 'home' or 'app'")
 	}
 
 	// Default auth permissions
+	webRootIsApp := webRoot == "app"
 	authDefaultRead := authDefaultAccess == "read-write" || authDefaultAccess == "read-only"
 	authDefaultWrite := authDefaultAccess == "read-write" || authDefaultAccess == "write-only"
 
@@ -166,6 +173,12 @@ func execServe(c *cli.Context) error {
 	} else if visitorAttachmentDailyBandwidthLimit > math.MaxInt {
 		return fmt.Errorf("config option visitor-attachment-daily-bandwidth-limit must be lower than %d", math.MaxInt)
 	}
+	messageSizeLimit, err := parseSize(messageSizeLimitStr, server.DefaultMessageLengthLimit)
+	if err != nil {
+		return err
+	} else if messageSizeLimit > server.MaxMessageLengthLimit {
+		return fmt.Errorf("config option message-size-limit must be lower than %d", server.MaxMessageLengthLimit)
+	}
 
 	// Resolve hosts
 	visitorRequestLimitExemptIPs := make([]string, 0)
@@ -200,6 +213,8 @@ func execServe(c *cli.Context) error {
 	conf.AttachmentExpiryDuration = attachmentExpiryDuration
 	conf.KeepaliveInterval = keepaliveInterval
 	conf.ManagerInterval = managerInterval
+	conf.WebRootIsApp = webRootIsApp
+	conf.MessageLimit = int(messageSizeLimit)
 	conf.SMTPSenderAddr = smtpSenderAddr
 	conf.SMTPSenderUser = smtpSenderUser
 	conf.SMTPSenderPass = smtpSenderPass

docs/config.md

@@ -399,8 +399,10 @@ HTTP challenge. I've found [this guide](https://nandovieira.com/using-lets-encry
 be incredibly helpful.
 
 ### nginx/Apache2/caddy
-For your convenience, here's a working config that'll help configure things behind a proxy. In this 
-example, ntfy runs on `:2586` and we proxy traffic to it. We also redirect HTTP to HTTPS for GET requests against a topic
+For your convenience, here's a working config that'll help configure things behind a proxy. Be sure to **enable WebSockets**
+by forwarding the `Connection` and `Upgrade` headers accordingly. 
+
+In this example, ntfy runs on `:2586` and we proxy traffic to it. We also redirect HTTP to HTTPS for GET requests against a topic
 or the root domain:
 
 === "nginx (/etc/nginx/sites-*/ntfy)"
@@ -717,42 +719,43 @@ Each config option can be set in the config file `/etc/ntfy/server.yml` (e.g. `l
 CLI option (e.g. `--listen-http :80`. Here's a list of all available options. Alternatively, you can set an environment
 variable before running the `ntfy` command (e.g. `export NTFY_LISTEN_HTTP=:80`).
 
-| Config option                              | Env variable                                    | Format                                              | Default | Description                                                                                                                                                                                                                     |
-|--------------------------------------------|-------------------------------------------------|-----------------------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `base-url`                                 | `NTFY_BASE_URL`                                 | *URL*                                               | -       | Public facing base URL of the service (e.g. `https://ntfy.sh`)                                                                                                                                                                  |
-| `listen-http`                              | `NTFY_LISTEN_HTTP`                              | `[host]:port`                                       | `:80`   | Listen address for the HTTP web server                                                                                                                                                                                          |
-| `listen-https`                             | `NTFY_LISTEN_HTTPS`                             | `[host]:port`                                       | -       | Listen address for the HTTPS web server. If set, you also need to set `key-file` and `cert-file`.                                                                                                                               |
-| `listen-unix`                              | `NTFY_LISTEN_UNIX`                              | *filename*                                          | -       | Path to a Unix socket to listen on                                                                                                                                                                                              |
-| `key-file`                                 | `NTFY_KEY_FILE`                                 | *filename*                                          | -       | HTTPS/TLS private key file, only used if `listen-https` is set.                                                                                                                                                                 |
-| `cert-file`                                | `NTFY_CERT_FILE`                                | *filename*                                          | -       | HTTPS/TLS certificate file, only used if `listen-https` is set.                                                                                                                                                                 |
-| `firebase-key-file`                        | `NTFY_FIREBASE_KEY_FILE`                        | *filename*                                          | -       | If set, also publish messages to a Firebase Cloud Messaging (FCM) topic for your app. This is optional and only required to save battery when using the Android app. See [Firebase (FCM](#firebase-fcm).                        |
-| `cache-file`                               | `NTFY_CACHE_FILE`                               | *filename*                                          | -       | If set, messages are cached in a local SQLite database instead of only in-memory. This allows for service restarts without losing messages in support of the since= parameter. See [message cache](#message-cache).             |
-| `cache-duration`                           | `NTFY_CACHE_DURATION`                           | *duration*                                          | 12h     | Duration for which messages will be buffered before they are deleted. This is required to support the `since=...` and `poll=1` parameter. Set this to `0` to disable the cache entirely.                                        |
-| `auth-file`                                | `NTFY_AUTH_FILE`                                | *filename*                                          | -       | Auth database file used for access control. If set, enables authentication and access control. See [access control](#access-control).                                                                                           |
-| `auth-default-access`                      | `NTFY_AUTH_DEFAULT_ACCESS`                      | `read-write`, `read-only`, `write-only`, `deny-all` | -       | Default permissions if no matching entries in the auth database are found. Default is `read-write`.                                                                                                                             |
-| `behind-proxy`                             | `NTFY_BEHIND_PROXY`                             | *bool*                                              | false   | If set, the X-Forwarded-For header is used to determine the visitor IP address instead of the remote address of the connection.                                                                                                 |
-| `attachment-cache-dir`                     | `NTFY_ATTACHMENT_CACHE_DIR`                     | *directory*                                         | -       | Cache directory for attached files. To enable attachments, this has to be set.                                                                                                                                                  |
-| `attachment-total-size-limit`              | `NTFY_ATTACHMENT_TOTAL_SIZE_LIMIT`              | *size*                                              | 5G      | Limit of the on-disk attachment cache directory. If the limits is exceeded, new attachments will be rejected.                                                                                                                   |
-| `attachment-file-size-limit`               | `NTFY_ATTACHMENT_FILE_SIZE_LIMIT`               | *size*                                              | 15M     | Per-file attachment size limit (e.g. 300k, 2M, 100M). Larger attachment will be rejected.                                                                                                                                       |
-| `attachment-expiry-duration`               | `NTFY_ATTACHMENT_EXPIRY_DURATION`               | *duration*                                          | 3h      | Duration after which uploaded attachments will be deleted (e.g. 3h, 20h). Strongly affects `visitor-attachment-total-size-limit`.                                                                                               |
-| `smtp-sender-addr`                         | `NTFY_SMTP_SENDER_ADDR`                         | `host:port`                                         | -       | SMTP server address to allow email sending                                                                                                                                                                                      |
-| `smtp-sender-user`                         | `NTFY_SMTP_SENDER_USER`                         | *string*                                            | -       | SMTP user; only used if e-mail sending is enabled                                                                                                                                                                               |
-| `smtp-sender-pass`                         | `NTFY_SMTP_SENDER_PASS`                         | *string*                                            | -       | SMTP password; only used if e-mail sending is enabled                                                                                                                                                                           |
-| `smtp-sender-from`                         | `NTFY_SMTP_SENDER_FROM`                         | *e-mail address*                                    | -       | SMTP sender e-mail address; only used if e-mail sending is enabled                                                                                                                                                              |
-| `smtp-server-listen`                       | `NTFY_SMTP_SERVER_LISTEN`                       | `[ip]:port`                                         | -       | Defines the IP address and port the SMTP server will listen on, e.g. `:25` or `1.2.3.4:25`                                                                                                                                      |
-| `smtp-server-domain`                       | `NTFY_SMTP_SERVER_DOMAIN`                       | *domain name*                                       | -       | SMTP server e-mail domain, e.g. `ntfy.sh`                                                                                                                                                                                       |
-| `smtp-server-addr-prefix`                  | `NTFY_SMTP_SERVER_ADDR_PREFIX`                  | `[ip]:port`                                         | -       | Optional prefix for the e-mail addresses to prevent spam, e.g. `ntfy-`                                                                                                                                                          |
-| `keepalive-interval`                       | `NTFY_KEEPALIVE_INTERVAL`                       | *duration*                                          | 45s     | Interval in which keepalive messages are sent to the client. This is to prevent intermediaries closing the connection for inactivity. Note that the Android app has a hardcoded timeout at 77s, so it should be less than that. |
-| `manager-interval`                         | `$NTFY_MANAGER_INTERVAL`                        | *duration*                                          | 1m      | Interval in which the manager prunes old messages, deletes topics and prints the stats.                                                                                                                                         |
-| `global-topic-limit`                       | `NTFY_GLOBAL_TOPIC_LIMIT`                       | *number*                                            | 15,000  | Rate limiting: Total number of topics before the server rejects new topics.                                                                                                                                                     |
-| `visitor-subscription-limit`               | `NTFY_VISITOR_SUBSCRIPTION_LIMIT`               | *number*                                            | 30      | Rate limiting: Number of subscriptions per visitor (IP address)                                                                                                                                                                 |
-| `visitor-attachment-total-size-limit`      | `NTFY_VISITOR_ATTACHMENT_TOTAL_SIZE_LIMIT`      | *size*                                              | 100M    | Rate limiting: Total storage limit used for attachments per visitor, for all attachments combined. Storage is freed after attachments expire. See `attachment-expiry-duration`.                                                 |
-| `visitor-attachment-daily-bandwidth-limit` | `NTFY_VISITOR_ATTACHMENT_DAILY_BANDWIDTH_LIMIT` | *size*                                              | 500M    | Rate limiting: Total daily attachment download/upload traffic limit per visitor. This is to protect your bandwidth costs from exploding.                                                                                        |
-| `visitor-request-limit-burst`              | `NTFY_VISITOR_REQUEST_LIMIT_BURST`              | *number*                                            | 60      | Rate limiting: Allowed GET/PUT/POST requests per second, per visitor. This setting is the initial bucket of requests each visitor has                                                                                           |
-| `visitor-request-limit-replenish`          | `NTFY_VISITOR_REQUEST_LIMIT_REPLENISH`          | *duration*                                          | 5s      | Rate limiting: Strongly related to `visitor-request-limit-burst`: The rate at which the bucket is refilled                                                                                                                      |
-| `visitor-request-limit-exempt-hosts`       | `NTFY_VISITOR_REQUEST_LIMIT_EXEMPT_HOSTS`       | *comma-separated host/IP list*                      | -       | Rate limiting: List of hostnames and IPs to be exempt from request rate limiting                                                                                                                                                |
-| `visitor-email-limit-burst`                | `NTFY_VISITOR_EMAIL_LIMIT_BURST`                | *number*                                            | 16      | Rate limiting:Initial limit of e-mails per visitor                                                                                                                                                                              |
-| `visitor-email-limit-replenish`            | `NTFY_VISITOR_EMAIL_LIMIT_REPLENISH`            | *duration*                                          | 1h      | Rate limiting: Strongly related to `visitor-email-limit-burst`: The rate at which the bucket is refilled                                                                                                                        |
+| Config option                              | Env variable                                    | Format                                              | Default      | Description                                                                                                                                                                                                                     |
+|--------------------------------------------|-------------------------------------------------|-----------------------------------------------------|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `base-url`                                 | `NTFY_BASE_URL`                                 | *URL*                                               | -            | Public facing base URL of the service (e.g. `https://ntfy.sh`)                                                                                                                                                                  |
+| `listen-http`                              | `NTFY_LISTEN_HTTP`                              | `[host]:port`                                       | `:80`        | Listen address for the HTTP web server                                                                                                                                                                                          |
+| `listen-https`                             | `NTFY_LISTEN_HTTPS`                             | `[host]:port`                                       | -            | Listen address for the HTTPS web server. If set, you also need to set `key-file` and `cert-file`.                                                                                                                               |
+| `listen-unix`                              | `NTFY_LISTEN_UNIX`                              | *filename*                                          | -            | Path to a Unix socket to listen on                                                                                                                                                                                              |
+| `key-file`                                 | `NTFY_KEY_FILE`                                 | *filename*                                          | -            | HTTPS/TLS private key file, only used if `listen-https` is set.                                                                                                                                                                 |
+| `cert-file`                                | `NTFY_CERT_FILE`                                | *filename*                                          | -            | HTTPS/TLS certificate file, only used if `listen-https` is set.                                                                                                                                                                 |
+| `firebase-key-file`                        | `NTFY_FIREBASE_KEY_FILE`                        | *filename*                                          | -            | If set, also publish messages to a Firebase Cloud Messaging (FCM) topic for your app. This is optional and only required to save battery when using the Android app. See [Firebase (FCM](#firebase-fcm).                        |
+| `cache-file`                               | `NTFY_CACHE_FILE`                               | *filename*                                          | -            | If set, messages are cached in a local SQLite database instead of only in-memory. This allows for service restarts without losing messages in support of the since= parameter. See [message cache](#message-cache).             |
+| `cache-duration`                           | `NTFY_CACHE_DURATION`                           | *duration*                                          | 12h          | Duration for which messages will be buffered before they are deleted. This is required to support the `since=...` and `poll=1` parameter. Set this to `0` to disable the cache entirely.                                        |
+| `auth-file`                                | `NTFY_AUTH_FILE`                                | *filename*                                          | -            | Auth database file used for access control. If set, enables authentication and access control. See [access control](#access-control).                                                                                           |
+| `auth-default-access`                      | `NTFY_AUTH_DEFAULT_ACCESS`                      | `read-write`, `read-only`, `write-only`, `deny-all` | `read-write` | Default permissions if no matching entries in the auth database are found. Default is `read-write`.                                                                                                                             |
+| `behind-proxy`                             | `NTFY_BEHIND_PROXY`                             | *bool*                                              | false        | If set, the X-Forwarded-For header is used to determine the visitor IP address instead of the remote address of the connection.                                                                                                 |
+| `attachment-cache-dir`                     | `NTFY_ATTACHMENT_CACHE_DIR`                     | *directory*                                         | -            | Cache directory for attached files. To enable attachments, this has to be set.                                                                                                                                                  |
+| `attachment-total-size-limit`              | `NTFY_ATTACHMENT_TOTAL_SIZE_LIMIT`              | *size*                                              | 5G           | Limit of the on-disk attachment cache directory. If the limits is exceeded, new attachments will be rejected.                                                                                                                   |
+| `attachment-file-size-limit`               | `NTFY_ATTACHMENT_FILE_SIZE_LIMIT`               | *size*                                              | 15M          | Per-file attachment size limit (e.g. 300k, 2M, 100M). Larger attachment will be rejected.                                                                                                                                       |
+| `attachment-expiry-duration`               | `NTFY_ATTACHMENT_EXPIRY_DURATION`               | *duration*                                          | 3h           | Duration after which uploaded attachments will be deleted (e.g. 3h, 20h). Strongly affects `visitor-attachment-total-size-limit`.                                                                                               |
+| `smtp-sender-addr`                         | `NTFY_SMTP_SENDER_ADDR`                         | `host:port`                                         | -            | SMTP server address to allow email sending                                                                                                                                                                                      |
+| `smtp-sender-user`                         | `NTFY_SMTP_SENDER_USER`                         | *string*                                            | -            | SMTP user; only used if e-mail sending is enabled                                                                                                                                                                               |
+| `smtp-sender-pass`                         | `NTFY_SMTP_SENDER_PASS`                         | *string*                                            | -            | SMTP password; only used if e-mail sending is enabled                                                                                                                                                                           |
+| `smtp-sender-from`                         | `NTFY_SMTP_SENDER_FROM`                         | *e-mail address*                                    | -            | SMTP sender e-mail address; only used if e-mail sending is enabled                                                                                                                                                              |
+| `smtp-server-listen`                       | `NTFY_SMTP_SERVER_LISTEN`                       | `[ip]:port`                                         | -            | Defines the IP address and port the SMTP server will listen on, e.g. `:25` or `1.2.3.4:25`                                                                                                                                      |
+| `smtp-server-domain`                       | `NTFY_SMTP_SERVER_DOMAIN`                       | *domain name*                                       | -            | SMTP server e-mail domain, e.g. `ntfy.sh`                                                                                                                                                                                       |
+| `smtp-server-addr-prefix`                  | `NTFY_SMTP_SERVER_ADDR_PREFIX`                  | `[ip]:port`                                         | -            | Optional prefix for the e-mail addresses to prevent spam, e.g. `ntfy-`                                                                                                                                                          |
+| `keepalive-interval`                       | `NTFY_KEEPALIVE_INTERVAL`                       | *duration*                                          | 45s          | Interval in which keepalive messages are sent to the client. This is to prevent intermediaries closing the connection for inactivity. Note that the Android app has a hardcoded timeout at 77s, so it should be less than that. |
+| `manager-interval`                         | `$NTFY_MANAGER_INTERVAL`                        | *duration*                                          | 1m           | Interval in which the manager prunes old messages, deletes topics and prints the stats.                                                                                                                                         |
+| `web-root`                                 | `NTFY_WEB_ROOT`                                 | `app` or `home`                                     | `app`        | Sets web root to landing page (home) or web app (app)                                                                                                                                                                           |
+| `global-topic-limit`                       | `NTFY_GLOBAL_TOPIC_LIMIT`                       | *number*                                            | 15,000       | Rate limiting: Total number of topics before the server rejects new topics.                                                                                                                                                     |
+| `visitor-subscription-limit`               | `NTFY_VISITOR_SUBSCRIPTION_LIMIT`               | *number*                                            | 30           | Rate limiting: Number of subscriptions per visitor (IP address)                                                                                                                                                                 |
+| `visitor-attachment-total-size-limit`      | `NTFY_VISITOR_ATTACHMENT_TOTAL_SIZE_LIMIT`      | *size*                                              | 100M         | Rate limiting: Total storage limit used for attachments per visitor, for all attachments combined. Storage is freed after attachments expire. See `attachment-expiry-duration`.                                                 |
+| `visitor-attachment-daily-bandwidth-limit` | `NTFY_VISITOR_ATTACHMENT_DAILY_BANDWIDTH_LIMIT` | *size*                                              | 500M         | Rate limiting: Total daily attachment download/upload traffic limit per visitor. This is to protect your bandwidth costs from exploding.                                                                                        |
+| `visitor-request-limit-burst`              | `NTFY_VISITOR_REQUEST_LIMIT_BURST`              | *number*                                            | 60           | Rate limiting: Allowed GET/PUT/POST requests per second, per visitor. This setting is the initial bucket of requests each visitor has                                                                                           |
+| `visitor-request-limit-replenish`          | `NTFY_VISITOR_REQUEST_LIMIT_REPLENISH`          | *duration*                                          | 5s           | Rate limiting: Strongly related to `visitor-request-limit-burst`: The rate at which the bucket is refilled                                                                                                                      |
+| `visitor-request-limit-exempt-hosts`       | `NTFY_VISITOR_REQUEST_LIMIT_EXEMPT_HOSTS`       | *comma-separated host/IP list*                      | -            | Rate limiting: List of hostnames and IPs to be exempt from request rate limiting                                                                                                                                                |
+| `visitor-email-limit-burst`                | `NTFY_VISITOR_EMAIL_LIMIT_BURST`                | *number*                                            | 16           | Rate limiting:Initial limit of e-mails per visitor                                                                                                                                                                              |
+| `visitor-email-limit-replenish`            | `NTFY_VISITOR_EMAIL_LIMIT_REPLENISH`            | *duration*                                          | 1h           | Rate limiting: Strongly related to `visitor-email-limit-burst`: The rate at which the bucket is refilled                                                                                                                        |
 
 The format for a *duration* is: `<number>(smh)`, e.g. 30s, 20m or 1h.   
 The format for a *size* is: `<number>(GMK)`, e.g. 1G, 200M or 4000k.
@@ -798,6 +801,7 @@ OPTIONS:
    --attachment-expiry-duration value, -X value      duration after which uploaded attachments will be deleted (e.g. 3h, 20h) (default: 3h) [$NTFY_ATTACHMENT_EXPIRY_DURATION]
    --keepalive-interval value, -k value              interval of keepalive messages (default: 45s) [$NTFY_KEEPALIVE_INTERVAL]
    --manager-interval value, -m value                interval of for message pruning and stats printing (default: 1m0s) [$NTFY_MANAGER_INTERVAL]
+   --web-root value                                  sets web root to landing page (home) or web app (app) (default: "app") [$NTFY_WEB_ROOT]
    --smtp-sender-addr value                          SMTP server address (host:port) for outgoing emails [$NTFY_SMTP_SENDER_ADDR]
    --smtp-sender-user value                          SMTP user (if e-mail sending is enabled) [$NTFY_SMTP_SENDER_USER]
    --smtp-sender-pass value                          SMTP password (if e-mail sending is enabled) [$NTFY_SMTP_SENDER_PASS]

docs/deprecations.md

@@ -4,16 +4,24 @@ This page is used to list deprecation notices for ntfy. Deprecated commands and
 
 ## Active deprecations
 
-### Android app: Using `since=<timestamp>` instead of `since=<id>` 
-> since 2022-02-27
+### Android app: WebSockets will become the default connection protocol  
+> since 2022-03-13, behavior will change in **June 2022**
+
+In future versions of the Android app, instant delivery connections and connections to self-hosted servers will
+be using the WebSockets protocol. This potentially requires [configuration changes in your proxy](https://ntfy.sh/docs/config/#nginxapache2caddy).
+
+### Android app: Using `since=<timestamp>` instead of `since=<id>`
+> since 2022-02-27, behavior will change in **May 2022**
 
 In about 3 months, the Android app will start using `since=<id>` instead of `since=<timestamp>`, which means that it will
 not work with servers older than v1.16.0 anymore. This is to simplify handling of deduplication in the Android app.
 
 The `since=<timestamp>` endpoint will continue to work. This is merely a notice that the Android app behavior will change.
 
+## Previous deprecations
+
 ### Running server via `ntfy` (instead of `ntfy serve`)
-> since 2021-12-17
+> deprecated 2021-12-17, behavior changed with v1.10.0
 
 As more commands are added to the `ntfy` CLI tool, using just `ntfy` to run the server is not practical
 anymore. Please use `ntfy serve` instead. This also applies to Docker images, as they can also execute more than

docs/examples.md

@@ -16,6 +16,27 @@ rsync -a root@laptop /backups/laptop \
   || curl -H tags:warning -H prio:high -d "Laptop backup failed" ntfy.sh/backups
 ```
 
+## Low disk space alerts
+Here's a simple cronjob that I use to alert me when the disk space on the root disk is running low. It's simple, but 
+effective. 
+
+``` bash 
+#!/bin/bash
+
+mingigs=10
+avail=$(df | awk '$6 == "/" && $4 < '$mingigs' * 1024*1024 { print $4/1024/1024 }')
+topicurl=https://ntfy.sh/mytopic
+
+if [ -n "$avail" ]; then
+  curl \
+    -d "Only $avail GB available on the root disk. Better clean that up." \
+    -H "Title: Low disk space alert on $(hostname)" \
+    -H "Priority: high" \
+    -H "Tags: warning,cd" \
+    $topicurl
+fi
+```
+
 ## Server-sent messages in your web app
 Just as you can [subscribe to topics in the Web UI](subscribe/web.md), you can use ntfy in your own
 web application. Check out the <a href="/example.html">live example</a> or just look the source of this page.
@@ -93,3 +114,13 @@ Or, if you only want to send notifications using shoutrrr:
 ```
 shoutrrr send -u "generic+https://ntfy.sh/my_watchtower_topic?title=WatchtowerUpdates" -m "testMessage"
 ```
+
+## Random cronjobs
+Alright, here's one for the history books. I desperately want the `github.com/ntfy` organization, but all my tickets with
+GitHub have been hopeless. In case it ever becomes available, I want to know immediately.
+
+``` cron
+# Check github/ntfy user
+*/6 * * * * if curl -s https://api.github.com/users/ntfy | grep "Not Found"; then curl -d "github.com/ntfy is available" -H "Tags: tada" -H "Prio: high" ntfy.sh/my-alerts; fi
+~           
+```

docs/faq.md

@@ -33,10 +33,11 @@ If you do not care for Firebase, I suggest you install the [F-Droid version](htt
 of the app and [self-host your own ntfy server](install.md).
 
 ## How much battery does the Android app use?
-If you use the ntfy.sh server and you don't use the [instant delivery](subscribe/phone.md#instant-delivery) feature, 
+If you use the ntfy.sh server, and you don't use the [instant delivery](subscribe/phone.md#instant-delivery) feature, 
 the Android app uses no additional battery, since Firebase Cloud Messaging (FCM) is used. If you use your own server, 
-or you use *instant delivery*, the app has to maintain a constant connection to the server, which consumes about 4% of
-battery in 17h of use (on my phone). I use it, and it makes no difference to me.
+or you use *instant delivery*, the app has to maintain a constant connection to the server, which consumes about 0-1% of
+battery in 17h of use (on my phone). There has been a ton of testing and improvement around this. I think it's pretty 
+decent now.
 
 ## What is instant delivery?
 [Instant delivery](subscribe/phone.md#instant-delivery) is a feature in the Android app. If turned on, the app maintains a constant connection to the

docs/install.md

@@ -26,21 +26,21 @@ deb/rpm packages.
 
 === "x86_64/amd64"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_x86_64.tar.gz
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_x86_64.tar.gz
     sudo tar -C /usr/bin -zxf ntfy_*.tar.gz ntfy
     sudo ./ntfy serve
     ```
 
 === "armv7/armhf"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_armv7.tar.gz
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_armv7.tar.gz
     sudo tar -C /usr/bin -zxf ntfy_*.tar.gz ntfy
     sudo ./ntfy serve
     ```
 
 === "arm64"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_arm64.tar.gz
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_arm64.tar.gz
     sudo tar -C /usr/bin -zxf ntfy_*.tar.gz ntfy
     sudo ./ntfy serve
     ```
@@ -88,7 +88,7 @@ Manually installing the .deb file:
 
 === "x86_64/amd64"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_amd64.deb
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_amd64.deb
     sudo dpkg -i ntfy_*.deb
     sudo systemctl enable ntfy
     sudo systemctl start ntfy
@@ -96,7 +96,7 @@ Manually installing the .deb file:
 
 === "armv7/armhf"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_armv7.deb
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_armv7.deb
     sudo dpkg -i ntfy_*.deb
     sudo systemctl enable ntfy
     sudo systemctl start ntfy
@@ -104,7 +104,7 @@ Manually installing the .deb file:
 
 === "arm64"
     ```bash
-    wget https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_arm64.deb
+    wget https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_arm64.deb
     sudo dpkg -i ntfy_*.deb
     sudo systemctl enable ntfy
     sudo systemctl start ntfy
@@ -114,21 +114,21 @@ Manually installing the .deb file:
 
 === "x86_64/amd64"
     ```bash
-    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_amd64.rpm
+    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_amd64.rpm
     sudo systemctl enable ntfy 
     sudo systemctl start ntfy
     ```
 
 === "armv7/armhf"
     ```bash
-    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_armv7.rpm
+    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_armv7.rpm
     sudo systemctl enable ntfy 
     sudo systemctl start ntfy
     ```
 
 === "arm64"
     ```bash
-    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.16.0/ntfy_1.16.0_linux_arm64.rpm
+    sudo rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.17.1/ntfy_1.17.1_linux_arm64.rpm
     sudo systemctl enable ntfy 
     sudo systemctl start ntfy
     ```

docs/releases.md

@@ -2,12 +2,52 @@
 Binaries for all releases can be found on the GitHub releases pages for the [ntfy server](https://github.com/binwiederhier/ntfy/releases)
 and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/releases).
 
+## ntfy server v1.18.0
+Released XXXXXXXXXXXXXXX
+
+**Bug fixes:**
+
+* rpm: do not overwrite server.yaml on package upgrade (#166, thanks @waclaw66 for reporting)
+
+**Deprecations:**
+
+* Removed the ability to run server as `ntfy serve` as per [deprecation](https://ntfy.sh/docs/deprecations)
+
+## ntfy Android app v1.10.0
+Released XXXXXXXXXXXXXXX
+
+**Features:**
+
+* Support for UnifiedPush 2.0 specification (bytes messages, #130)
+* Export/import settings and subscriptions (#115, thanks @cmeis for reporting)
+
+**Bug fixes:**
+
+* Display locale-specific times, with AM/PM or 24h format (#140, thanks @hl2guide for reporting)
+
+## ntfy server v1.17.1
+Released Mar 12, 2022
+
+**Bug fixes:**
+
+* Replace `crypto.subtle` with `hashCode` to errors with Brave/FF-Windows (#157, thanks for reporting @arminus)
+
+## ntfy server v1.17.0
+Released Mar 11, 2022
+
+**Features & bug fixes:**
+
+* Replace [web app](https://ntfy.sh/app) with a React/MUI-based web app from the 21st century (#111)
+* Web UI broken with auth (#132, thanks for reporting @arminus)
+* Send static web resources as `Content-Encoding: gzip`, i.e. docs and web app (no ticket)
+* Add support for auth via `?auth=...` query param, used by WebSocket in web app (no ticket) 
+
 ## ntfy server v1.16.0
 Released Feb 27, 2022
 
 **Features & Bug fixes:**
 
-* Add auth support for subscribing with CLI (#147/#148, thanks @lrabane)
+* Add [auth support](https://ntfy.sh/docs/subscribe/cli/#authentication) for subscribing with CLI (#147/#148, thanks @lrabane)
 * Add support for [?since=<id>](https://ntfy.sh/docs/subscribe/api/#fetch-cached-messages) (#151, thanks for reporting @nachotp)
 
 **Documentation:**

docs/static/css/extra.css

@@ -1,7 +1,7 @@
 :root {
-    --md-primary-fg-color:        #3a9784;
-    --md-primary-fg-color--light: #3a9784;
-    --md-primary-fg-color--dark:  #3a9784;
+    --md-primary-fg-color:        #338574;
+    --md-primary-fg-color--light: #338574;
+    --md-primary-fg-color--dark:  #338574;
 }
 
 .md-header__button.md-logo :is(img, svg) {

docs/subscribe/phone.md

@@ -130,19 +130,21 @@ notification popups:
 
 Here's a list of extras you can access. Most likely, you'll want to filter for `topic` and react on `message`:
 
-| Extra name | Type | Example | Description |
-|---|---|---|---|
-| `id` | *string* | `bP8dMjO8ig` | Randomly chosen message identifier (likely not very useful for task automation) |
-| `base_url` | *string* | `https://ntfy.sh` | Root URL of the ntfy server this message came from |
-| `topic` ❤️ | *string* | `mytopic` | Topic name; **you'll likely want to filter for a specific topic** |
-| `muted` | *bool* | `true` | Indicates whether the subscription was muted in the app |
-| `muted_str` | *string (`true` or `false`)* | `true` | Same as `muted`, but as string `true` or `false` |
-| `time` | *int* | `1635528741` | Message date time, as Unix time stamp |
-| `title` | *string* | `Some title` | Message [title](../publish.md#message-title); may be empty if not set |
-| `message` ❤️ | *string* | `Some message` | Message body; **this is likely what you're interested in** |
-| `tags` | *string* | `tag1,tag2,..` | Comma-separated list of [tags](../publish.md#tags-emojis) |
-| `tags_map` | *string* | `0=tag1,1=tag2,..` | Map of tags to make it easier to map first, second, ... tag |
-| `priority` | *int (between 1-5)* | `4` | Message [priority](../publish.md#message-priority) with 1=min, 3=default and 5=max |
+| Extra name      | Type                         | Example            | Description                                                                        |
+|-----------------|------------------------------|--------------------|------------------------------------------------------------------------------------|
+| `id`            | *String*                     | `bP8dMjO8ig`       | Randomly chosen message identifier (likely not very useful for task automation)    |
+| `base_url`      | *String*                     | `https://ntfy.sh`  | Root URL of the ntfy server this message came from                                 |
+| `topic` ❤️      | *String*                     | `mytopic`          | Topic name; **you'll likely want to filter for a specific topic**                  |
+| `muted`         | *Boolean*                    | `true`             | Indicates whether the subscription was muted in the app                            |
+| `muted_str`     | *String (`true` or `false`)* | `true`             | Same as `muted`, but as string `true` or `false`                                   |
+| `time`          | *Int*                        | `1635528741`       | Message date time, as Unix time stamp                                              |
+| `title`         | *String*                     | `Some title`       | Message [title](../publish.md#message-title); may be empty if not set              |
+| `message` ❤️    | *String*                     | `Some message`     | Message body; **this is likely what you're interested in**                         |
+| `message_bytes` | *ByteArray*                  | `(binary data)`    | Message body as binary data                                                        |
+| `encoding`️     | *String*                     | -                  | Message encoding (empty or "base64")                                               |
+| `tags`          | *String*                     | `tag1,tag2,..`     | Comma-separated list of [tags](../publish.md#tags-emojis)                          |
+| `tags_map`      | *String*                     | `0=tag1,1=tag2,..` | Map of tags to make it easier to map first, second, ... tag                        |
+| `priority`      | *Int (between 1-5)*          | `4`                | Message [priority](../publish.md#message-priority) with 1=min, 3=default and 5=max |
 
 #### Send messages using intents
 To send messages from other apps (such as [MacroDroid](https://play.google.com/store/apps/details?id=com.arlosoft.macrodroid)
@@ -164,14 +166,14 @@ Here's what that looks like:
 
 The following intent extras are supported when for the intent with the `io.heckel.ntfy.SEND_MESSAGE` action:
 
-| Extra name | Required | Type | Example | Description |
-|---|---|---|---|---|
-| `base_url` | - | *string* | `https://ntfy.sh` | Root URL of the ntfy server this message came from, defaults to `https://ntfy.sh` |
-| `topic` ❤️ | ✔ | *string* | `mytopic` | Topic name; **you must set this** |
-| `title` | - | *string* | `Some title` | Message [title](../publish.md#message-title); may be empty if not set |
-| `message` ❤️ | ✔ | *string* | `Some message` | Message body; **you must set this** |
-| `tags` | - | *string* | `tag1,tag2,..` | Comma-separated list of [tags](../publish.md#tags-emojis) |
-| `priority` | - | *string or int (between 1-5)* | `4` | Message [priority](../publish.md#message-priority) with 1=min, 3=default and 5=max |
+| Extra name   | Required | Type                          | Example           | Description                                                                        |
+|--------------|----------|-------------------------------|-------------------|------------------------------------------------------------------------------------|
+| `base_url`   | -        | *String*                      | `https://ntfy.sh` | Root URL of the ntfy server this message came from, defaults to `https://ntfy.sh`  |
+| `topic` ❤️   | ✔        | *String*                      | `mytopic`         | Topic name; **you must set this**                                                  |
+| `title`      | -        | *String*                      | `Some title`      | Message [title](../publish.md#message-title); may be empty if not set              |
+| `message` ❤️ | ✔        | *String*                      | `Some message`    | Message body; **you must set this**                                                |
+| `tags`       | -        | *String*                      | `tag1,tag2,..`    | Comma-separated list of [tags](../publish.md#tags-emojis)                          |
+| `priority`   | -        | *String or Int (between 1-5)* | `4`               | Message [priority](../publish.md#message-priority) with 1=min, 3=default and 5=max |
 
 ## iPhone/iOS
 I almost feel devious for putting the *Download on the App Store* button on this page. Currently, there is no iOS app

docs/subscribe/web.md

@@ -6,9 +6,9 @@ keep a connection open and listen for incoming notifications.
 To learn how to send messages, check out the [publishing page](../publish.md).
 
 <div id="web-screenshots" class="screenshots">
-    <a href="../../static/img/web-subscribe.png"><img src="../../static/img/web-subscribe.png"/></a>
-    <a href="../../static/img/web-notification.png"><img src="../../static/img/web-notification.png"/></a>
     <a href="../../static/img/web-detail.png"><img src="../../static/img/web-detail.png"/></a> 
+    <a href="../../static/img/web-notification.png"><img src="../../static/img/web-notification.png"/></a>
+    <a href="../../static/img/web-subscribe.png"><img src="../../static/img/web-subscribe.png"/></a>
 </div>
 
 To keep receiving desktop notifications from ntfy, you need to keep the website open. What I do, and what I highly recommend,

go.mod

@@ -14,6 +14,7 @@ require (
 	github.com/mattn/go-sqlite3 v1.14.11
 	github.com/olebedev/when v0.0.0-20211212231525-59bd4edcf9d6
 	github.com/stretchr/testify v1.7.0
+	github.com/tidwall/gjson v1.14.0
 	github.com/urfave/cli/v2 v2.3.0
 	golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9
 	golang.org/x/oauth2 v0.0.0-20211104180415-d3ed0bb246c8 // indirect
@@ -38,6 +39,8 @@ require (
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/russross/blackfriday/v2 v2.1.0 // indirect
+	github.com/tidwall/match v1.1.1 // indirect
+	github.com/tidwall/pretty v1.2.0 // indirect
 	go.opencensus.io v0.23.0 // indirect
 	golang.org/x/net v0.0.0-20210813160813-60bc85c4be6d // indirect
 	golang.org/x/sys v0.0.0-20220128215802-99c3d69c2c27 // indirect

go.sum

@@ -223,6 +223,12 @@ github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5
 github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/tidwall/gjson v1.14.0 h1:6aeJ0bzojgWLa82gDQHcx3S0Lr/O51I9bJ5nv6JFx5w=
+github.com/tidwall/gjson v1.14.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
+github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
+github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
+github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
+github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/urfave/cli/v2 v2.3.0 h1:qph92Y649prgesehzOrQjdWyxFOp/QVM+6imKHad91M=
 github.com/urfave/cli/v2 v2.3.0/go.mod h1:LJmUH05zAU44vOAcrfzZQKsZbVcdbOG8rtL3/XcUArI=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=

scripts/emoji-convert.sh

@@ -18,7 +18,7 @@ fi
 if [[ "$1" == *.js ]]; then
   echo -n "// This file is generated by scripts/emoji-convert.sh to reduce the size
 // Original data source: https://github.com/github/gemoji/blob/master/db/emoji.json
-const rawEmojis = " > "$1"
+export const rawEmojis = " > "$1"
     cat "$SCRIPTDIR/emoji.json" | jq -rc 'map({emoji: .emoji,aliases: .aliases})' >> "$1"
 elif [[ "$1" == *.md ]]; then
   echo "# Emoji reference

server/config.go

@@ -21,7 +21,8 @@ const (
 // - total topic limit: max number of topics overall
 // - various attachment limits
 const (
-	DefaultMessageLengthLimit       = 4096 // Bytes
+	DefaultMessageLengthLimit       = 4096             // Bytes
+	MaxMessageLengthLimit           = 16 * 1024 * 1024 // 16 MB, sanity size
 	DefaultTotalTopicLimit          = 15000
 	DefaultAttachmentTotalSizeLimit = int64(5 * 1024 * 1024 * 1024) // 5 GB
 	DefaultAttachmentFileSizeLimit  = int64(15 * 1024 * 1024)       // 15 MB
@@ -64,6 +65,7 @@ type Config struct {
 	AttachmentExpiryDuration             time.Duration
 	KeepaliveInterval                    time.Duration
 	ManagerInterval                      time.Duration
+	WebRootIsApp                         bool
 	AtSenderInterval                     time.Duration
 	FirebaseKeepaliveInterval            time.Duration
 	SMTPSenderAddr                       string

server/server.go

@@ -10,10 +10,10 @@ import (
 	"fmt"
 	"github.com/emersion/go-smtp"
 	"github.com/gorilla/websocket"
+	"github.com/tidwall/gjson"
 	"golang.org/x/sync/errgroup"
 	"heckel.io/ntfy/auth"
 	"heckel.io/ntfy/util"
-	"html/template"
 	"io"
 	"log"
 	"net"
@@ -51,45 +51,37 @@ type Server struct {
 	mu           sync.Mutex
 }
 
-type indexPage struct {
-	Topic         string
-	CacheDuration time.Duration
-}
-
 // handleFunc extends the normal http.HandlerFunc to be able to easily return errors
 type handleFunc func(http.ResponseWriter, *http.Request, *visitor) error
 
 var (
 	// If changed, don't forget to update Android App and auth_sqlite.go
-	topicRegex       = regexp.MustCompile(`^[-_A-Za-z0-9]{1,64}$`)  // No /!
-	topicPathRegex   = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`) // Regex must match JS & Android app!
-	jsonPathRegex    = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/json$`)
-	ssePathRegex     = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/sse$`)
-	rawPathRegex     = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/raw$`)
-	wsPathRegex      = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/ws$`)
-	authPathRegex    = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/auth$`)
-	publishPathRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/(publish|send|trigger)$`)
+	topicRegex        = regexp.MustCompile(`^[-_A-Za-z0-9]{1,64}$`)               // No /!
+	topicPathRegex    = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`)              // Regex must match JS & Android app!
+	extTopicPathRegex = regexp.MustCompile(`^/[^/]+\.[^/]+/[-_A-Za-z0-9]{1,64}$`) // Extended topic path, for web-app, e.g. /example.com/mytopic
+	jsonPathRegex     = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/json$`)
+	ssePathRegex      = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/sse$`)
+	rawPathRegex      = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/raw$`)
+	wsPathRegex       = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/ws$`)
+	authPathRegex     = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/auth$`)
+	publishPathRegex  = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/(publish|send|trigger)$`)
 
+	webConfigPath    = "/config.js"
 	staticRegex      = regexp.MustCompile(`^/static/.+`)
 	docsRegex        = regexp.MustCompile(`^/docs(|/.*)$`)
 	fileRegex        = regexp.MustCompile(`^/file/([-_A-Za-z0-9]{1,64})(?:\.[A-Za-z0-9]{1,16})?$`)
-	disallowedTopics = []string{"docs", "static", "file"} // If updated, also update in Android app
+	disallowedTopics = []string{"docs", "static", "file", "app", "settings"} // If updated, also update in Android app
 	attachURLRegex   = regexp.MustCompile(`^https?://`)
 
-	templateFnMap = template.FuncMap{
-		"durationToHuman": util.DurationToHuman,
-	}
-
-	//go:embed "index.gohtml"
-	indexSource   string
-	indexTemplate = template.Must(template.New("index").Funcs(templateFnMap).Parse(indexSource))
-
 	//go:embed "example.html"
 	exampleSource string
 
-	//go:embed static
-	webStaticFs       embed.FS
-	webStaticFsCached = &util.CachingEmbedFS{ModTime: time.Now(), FS: webStaticFs}
+	//go:embed site
+	webFs        embed.FS
+	webFsCached  = &util.CachingEmbedFS{ModTime: time.Now(), FS: webFs}
+	webSiteDir   = "/site"
+	webHomeIndex = "/home.html" // Landing page, only if "web-root: home"
+	webAppIndex  = "/app.html"  // React app
 
 	//go:embed docs
 	docsStaticFs     embed.FS
@@ -276,6 +268,8 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request, v *visit
 		return s.handleExample(w, r)
 	} else if r.Method == http.MethodHead && r.URL.Path == "/" {
 		return s.handleEmpty(w, r, v)
+	} else if r.Method == http.MethodGet && r.URL.Path == webConfigPath {
+		return s.handleWebConfig(w, r)
 	} else if r.Method == http.MethodGet && staticRegex.MatchString(r.URL.Path) {
 		return s.handleStatic(w, r)
 	} else if r.Method == http.MethodGet && docsRegex.MatchString(r.URL.Path) {
@@ -284,8 +278,6 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request, v *visit
 		return s.limitRequests(s.handleFile)(w, r, v)
 	} else if r.Method == http.MethodOptions {
 		return s.handleOptions(w, r)
-	} else if r.Method == http.MethodGet && topicPathRegex.MatchString(r.URL.Path) {
-		return s.handleTopic(w, r)
 	} else if (r.Method == http.MethodPut || r.Method == http.MethodPost) && topicPathRegex.MatchString(r.URL.Path) {
 		return s.limitRequests(s.authWrite(s.handlePublish))(w, r, v)
 	} else if r.Method == http.MethodGet && publishPathRegex.MatchString(r.URL.Path) {
@@ -300,15 +292,19 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request, v *visit
 		return s.limitRequests(s.authRead(s.handleSubscribeWS))(w, r, v)
 	} else if r.Method == http.MethodGet && authPathRegex.MatchString(r.URL.Path) {
 		return s.limitRequests(s.authRead(s.handleTopicAuth))(w, r, v)
+	} else if r.Method == http.MethodGet && (topicPathRegex.MatchString(r.URL.Path) || extTopicPathRegex.MatchString(r.URL.Path)) {
+		return s.handleTopic(w, r)
 	}
 	return errHTTPNotFound
 }
 
 func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) error {
-	return indexTemplate.Execute(w, &indexPage{
-		Topic:         r.URL.Path[1:],
-		CacheDuration: s.config.CacheDuration,
-	})
+	if s.config.WebRootIsApp {
+		r.URL.Path = webAppIndex
+	} else {
+		r.URL.Path = webHomeIndex
+	}
+	return s.handleStatic(w, r)
 }
 
 func (s *Server) handleTopic(w http.ResponseWriter, r *http.Request) error {
@@ -319,7 +315,8 @@ func (s *Server) handleTopic(w http.ResponseWriter, r *http.Request) error {
 		_, err := io.WriteString(w, `{"unifiedpush":{"version":1}}`+"\n")
 		return err
 	}
-	return s.handleHome(w, r)
+	r.URL.Path = webAppIndex
+	return s.handleStatic(w, r)
 }
 
 func (s *Server) handleEmpty(_ http.ResponseWriter, _ *http.Request, _ *visitor) error {
@@ -338,13 +335,29 @@ func (s *Server) handleExample(w http.ResponseWriter, _ *http.Request) error {
 	return err
 }
 
+func (s *Server) handleWebConfig(w http.ResponseWriter, r *http.Request) error {
+	appRoot := "/"
+	if !s.config.WebRootIsApp {
+		appRoot = "/app"
+	}
+	disallowedTopicsStr := `"` + strings.Join(disallowedTopics, `", "`) + `"`
+	w.Header().Set("Content-Type", "text/javascript")
+	_, err := io.WriteString(w, fmt.Sprintf(`// Generated server configuration
+var config = {
+  appRoot: "%s",
+  disallowedTopics: [%s]
+};`, appRoot, disallowedTopicsStr))
+	return err
+}
+
 func (s *Server) handleStatic(w http.ResponseWriter, r *http.Request) error {
-	http.FileServer(http.FS(webStaticFsCached)).ServeHTTP(w, r)
+	r.URL.Path = webSiteDir + r.URL.Path
+	util.Gzip(http.FileServer(http.FS(webFsCached))).ServeHTTP(w, r)
 	return nil
 }
 
 func (s *Server) handleDocs(w http.ResponseWriter, r *http.Request) error {
-	http.FileServer(http.FS(docsStaticCached)).ServeHTTP(w, r)
+	util.Gzip(http.FileServer(http.FS(docsStaticCached))).ServeHTTP(w, r)
 	return nil
 }
 
@@ -385,11 +398,11 @@ func (s *Server) handlePublish(w http.ResponseWriter, r *http.Request, v *visito
 		return err
 	}
 	m := newDefaultMessage(t.ID, "")
-	cache, firebase, email, unifiedpush, err := s.parsePublishParams(r, v, m)
+	cache, firebase, email, template, unifiedpush, err := s.parsePublishParams(r, v, m)
 	if err != nil {
 		return err
 	}
-	if err := s.handlePublishBody(r, v, m, body, unifiedpush); err != nil {
+	if err := s.handlePublishBody(r, v, m, body, template, unifiedpush); err != nil {
 		return err
 	}
 	if m.Message == "" {
@@ -431,7 +444,7 @@ func (s *Server) handlePublish(w http.ResponseWriter, r *http.Request, v *visito
 	return nil
 }
 
-func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (cache bool, firebase bool, email string, unifiedpush bool, err error) {
+func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (cache bool, firebase bool, email string, template string, unifiedpush bool, err error) {
 	cache = readBoolParam(r, true, "x-cache", "cache")
 	firebase = readBoolParam(r, true, "x-firebase", "firebase")
 	m.Title = readParam(r, "x-title", "title", "t")
@@ -446,7 +459,7 @@ func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (ca
 	}
 	if attach != "" {
 		if !attachURLRegex.MatchString(attach) {
-			return false, false, "", false, errHTTPBadRequestAttachmentURLInvalid
+			return false, false, "", "", false, errHTTPBadRequestAttachmentURLInvalid
 		}
 		m.Attachment.URL = attach
 		if m.Attachment.Name == "" {
@@ -465,11 +478,11 @@ func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (ca
 	email = readParam(r, "x-email", "x-e-mail", "email", "e-mail", "mail", "e")
 	if email != "" {
 		if err := v.EmailAllowed(); err != nil {
-			return false, false, "", false, errHTTPTooManyRequestsLimitEmails
+			return false, false, "", "", false, errHTTPTooManyRequestsLimitEmails
 		}
 	}
 	if s.mailer == nil && email != "" {
-		return false, false, "", false, errHTTPBadRequestEmailDisabled
+		return false, false, "", "", false, errHTTPBadRequestEmailDisabled
 	}
 	messageStr := strings.ReplaceAll(readParam(r, "x-message", "message", "m"), "\\n", "\n")
 	if messageStr != "" {
@@ -477,7 +490,7 @@ func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (ca
 	}
 	m.Priority, err = util.ParsePriority(readParam(r, "x-priority", "priority", "prio", "p"))
 	if err != nil {
-		return false, false, "", false, errHTTPBadRequestPriorityInvalid
+		return false, false, "", "", false, errHTTPBadRequestPriorityInvalid
 	}
 	tagsStr := readParam(r, "x-tags", "tags", "tag", "ta")
 	if tagsStr != "" {
@@ -489,27 +502,33 @@ func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (ca
 	delayStr := readParam(r, "x-delay", "delay", "x-at", "at", "x-in", "in")
 	if delayStr != "" {
 		if !cache {
-			return false, false, "", false, errHTTPBadRequestDelayNoCache
+			return false, false, "", "", false, errHTTPBadRequestDelayNoCache
 		}
 		if email != "" {
-			return false, false, "", false, errHTTPBadRequestDelayNoEmail // we cannot store the email address (yet)
+			return false, false, "", "", false, errHTTPBadRequestDelayNoEmail // we cannot store the email address (yet)
 		}
 		delay, err := util.ParseFutureTime(delayStr, time.Now())
 		if err != nil {
-			return false, false, "", false, errHTTPBadRequestDelayCannotParse
+			return false, false, "", "", false, errHTTPBadRequestDelayCannotParse
 		} else if delay.Unix() < time.Now().Add(s.config.MinDelay).Unix() {
-			return false, false, "", false, errHTTPBadRequestDelayTooSmall
+			return false, false, "", "", false, errHTTPBadRequestDelayTooSmall
 		} else if delay.Unix() > time.Now().Add(s.config.MaxDelay).Unix() {
-			return false, false, "", false, errHTTPBadRequestDelayTooLarge
+			return false, false, "", "", false, errHTTPBadRequestDelayTooLarge
 		}
 		m.Time = delay.Unix()
 	}
+	template = readParam(r, "x-template", "template", "tpl")
+	if template != "" {
+		if template != "json" {
+			return false, false, "", "", false, errors.New("invalid template")
+		}
+	}
 	unifiedpush = readBoolParam(r, false, "x-unifiedpush", "unifiedpush", "up") // see GET too!
 	if unifiedpush {
 		firebase = false
 		unifiedpush = true
 	}
-	return cache, firebase, email, unifiedpush, nil
+	return cache, firebase, email, template, unifiedpush, nil
 }
 
 // handlePublishBody consumes the PUT/POST body and decides whether the body is an attachment or the message.
@@ -524,15 +543,15 @@ func (s *Server) parsePublishParams(r *http.Request, v *visitor, m *message) (ca
 //    If file.txt is <= 4096 (message limit) and valid UTF-8, treat it as a message
 // 5. curl -T file.txt ntfy.sh/mytopic
 //    If file.txt is > message limit, treat it as an attachment
-func (s *Server) handlePublishBody(r *http.Request, v *visitor, m *message, body *util.PeakedReadCloser, unifiedpush bool) error {
+func (s *Server) handlePublishBody(r *http.Request, v *visitor, m *message, body *util.PeakedReadCloser, template string, unifiedpush bool) error {
 	if unifiedpush {
 		return s.handleBodyAsMessageAutoDetect(m, body) // Case 1
 	} else if m.Attachment != nil && m.Attachment.URL != "" {
-		return s.handleBodyAsTextMessage(m, body) // Case 2
+		return s.handleBodyAsTextMessage(m, body, template) // Case 2
 	} else if m.Attachment != nil && m.Attachment.Name != "" {
 		return s.handleBodyAsAttachment(r, v, m, body) // Case 3
 	} else if !body.LimitReached && utf8.Valid(body.PeakedBytes) {
-		return s.handleBodyAsTextMessage(m, body) // Case 4
+		return s.handleBodyAsTextMessage(m, body, template) // Case 4
 	}
 	return s.handleBodyAsAttachment(r, v, m, body) // Case 5
 }
@@ -547,12 +566,33 @@ func (s *Server) handleBodyAsMessageAutoDetect(m *message, body *util.PeakedRead
 	return nil
 }
 
-func (s *Server) handleBodyAsTextMessage(m *message, body *util.PeakedReadCloser) error {
+func (s *Server) handleBodyAsTextMessage(m *message, body *util.PeakedReadCloser, template string) error {
 	if !utf8.Valid(body.PeakedBytes) {
 		return errHTTPBadRequestMessageNotUTF8
 	}
 	if len(body.PeakedBytes) > 0 { // Empty body should not override message (publish via GET!)
-		m.Message = strings.TrimSpace(string(body.PeakedBytes)) // Truncates the message to the peak limit if required
+		peakedBody := strings.TrimSpace(string(body.PeakedBytes)) // Truncates the message to the peak limit if required
+		if template == "json" && gjson.Valid(peakedBody) {
+			r := regexp.MustCompile(`\${([^}]+)}`)
+			matches := r.FindAllStringSubmatch(m.Message, -1)
+			for _, v := range matches {
+				query := v[1]
+				result := gjson.Get(peakedBody, query)
+				if result.Exists() {
+					m.Message = strings.ReplaceAll(m.Message, fmt.Sprintf("${%s}", query), result.String())
+				}
+			}
+			matches = r.FindAllStringSubmatch(m.Title, -1)
+			for _, v := range matches {
+				query := v[1]
+				result := gjson.Get(peakedBody, query)
+				if result.Exists() {
+					m.Title = strings.ReplaceAll(m.Title, fmt.Sprintf("${%s}", query), result.String())
+				}
+			}
+		} else {
+			m.Message = peakedBody
+		}
 	}
 	if m.Attachment != nil && m.Attachment.Name != "" && m.Message == "" {
 		m.Message = fmt.Sprintf(defaultAttachmentMessage, m.Attachment.Name)
@@ -868,8 +908,9 @@ func parseSince(r *http.Request, poll bool) (sinceMarker, error) {
 }
 
 func (s *Server) handleOptions(w http.ResponseWriter, _ *http.Request) error {
-	w.Header().Set("Access-Control-Allow-Origin", "*") // CORS, allow cross-origin requests
 	w.Header().Set("Access-Control-Allow-Methods", "GET, PUT, POST")
+	w.Header().Set("Access-Control-Allow-Origin", "*")  // CORS, allow cross-origin requests
+	w.Header().Set("Access-Control-Allow-Headers", "*") // CORS, allow auth via JS // FIXME is this terrible?
 	return nil
 }
 
@@ -1098,7 +1139,7 @@ func (s *Server) withAuth(next handleFunc, perm auth.Permission) handleFunc {
 			return err
 		}
 		var user *auth.User // may stay nil if no auth header!
-		username, password, ok := r.BasicAuth()
+		username, password, ok := extractUserPass(r)
 		if ok {
 			if user, err = s.auth.Authenticate(username, password); err != nil {
 				log.Printf("authentication failed: %s", err.Error())
@@ -1115,6 +1156,27 @@ func (s *Server) withAuth(next handleFunc, perm auth.Permission) handleFunc {
 	}
 }
 
+// extractUserPass reads the username/password from the basic auth header (Authorization: Basic ...),
+// or from the ?auth=... query param. The latter is required only to support the WebSocket JavaScript
+// class, which does not support passing headers during the initial request. The auth query param
+// is effectively double base64 encoded. Its format is base64(Basic base64(user:pass)).
+func extractUserPass(r *http.Request) (username string, password string, ok bool) {
+	username, password, ok = r.BasicAuth()
+	if ok {
+		return
+	}
+	authParam := readQueryParam(r, "authorization", "auth")
+	if authParam != "" {
+		a, err := base64.RawURLEncoding.DecodeString(authParam)
+		if err != nil {
+			return
+		}
+		r.Header.Set("Authorization", string(a))
+		return r.BasicAuth()
+	}
+	return
+}
+
 // visitor creates or retrieves a rate.Limiter for the given visitor.
 // This function was taken from https://www.alexedwards.net/blog/how-to-rate-limit-http-requests (MIT).
 func (s *Server) visitor(r *http.Request) *visitor {

server/server.yml

@@ -126,6 +126,11 @@
 #
 # manager-interval: "1m"
 
+# Defines if the root route (/) is pointing to the landing page (as on ntfy.sh) or the
+# web app. If you self-host, you don't want to change this. Can be "app" (default) or "home".
+#
+# web-root: app
+
 # Rate limiting: Total number of topics before the server rejects new topics.
 #
 # global-topic-limit: 15000

server/server_test.go

@@ -146,9 +146,9 @@ func TestServer_StaticSites(t *testing.T) {
 
 	rr = request(t, s, "GET", "/mytopic", "", nil)
 	require.Equal(t, 200, rr.Code)
-	require.Contains(t, rr.Body.String(), `<meta name="robots" content="noindex, nofollow" />`)
+	require.Contains(t, rr.Body.String(), `<meta name="robots" content="noindex, nofollow"/>`)
 
-	rr = request(t, s, "GET", "/static/css/app.css", "", nil)
+	rr = request(t, s, "GET", "/static/css/home.css", "", nil)
 	require.Equal(t, 200, rr.Code)
 	require.Contains(t, rr.Body.String(), `html, body {`)
 
@@ -654,6 +654,25 @@ func TestServer_Auth_Fail_CannotPublish(t *testing.T) {
 	require.Equal(t, 403, response.Code) // Anonymous read not allowed
 }
 
+func TestServer_Auth_ViaQuery(t *testing.T) {
+	c := newTestConfig(t)
+	c.AuthFile = filepath.Join(t.TempDir(), "user.db")
+	c.AuthDefaultRead = false
+	c.AuthDefaultWrite = false
+	s := newTestServer(t, c)
+
+	manager := s.auth.(auth.Manager)
+	require.Nil(t, manager.AddUser("ben", "some pass", auth.RoleAdmin))
+
+	u := fmt.Sprintf("/mytopic/json?poll=1&auth=%s", base64.RawURLEncoding.EncodeToString([]byte(basicAuth("ben:some pass"))))
+	response := request(t, s, "GET", u, "", nil)
+	require.Equal(t, 200, response.Code)
+
+	u = fmt.Sprintf("/mytopic/json?poll=1&auth=%s", base64.RawURLEncoding.EncodeToString([]byte(basicAuth("ben:WRONNNGGGG"))))
+	response = request(t, s, "GET", u, "", nil)
+	require.Equal(t, 401, response.Code)
+}
+
 /*
 func TestServer_Curl_Publish_Poll(t *testing.T) {
 	s, port := test.StartServer(t)
@@ -851,7 +870,7 @@ func TestServer_PublishAttachment(t *testing.T) {
 	require.Equal(t, "attachment.txt", msg.Attachment.Name)
 	require.Equal(t, "text/plain; charset=utf-8", msg.Attachment.Type)
 	require.Equal(t, int64(5000), msg.Attachment.Size)
-	require.GreaterOrEqual(t, msg.Attachment.Expires, time.Now().Add(3*time.Hour).Unix())
+	require.GreaterOrEqual(t, msg.Attachment.Expires, time.Now().Add(179*time.Minute).Unix()) // Almost 3 hours
 	require.Contains(t, msg.Attachment.URL, "http://127.0.0.1:12345/file/")
 	require.Equal(t, "", msg.Attachment.Owner) // Should never be returned
 	require.FileExists(t, filepath.Join(s.config.AttachmentCacheDir, msg.ID))

server/static/css/app.css

@@ -1,531 +0,0 @@
-/* general styling */
-
-html, body {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    font-size: 1.1em;
-    color: #444;
-    margin: 0;
-    padding: 0;
-}
-
-html {
-    /* prevent scrollbar from repositioning website:
-     * https://www.w3docs.com/snippets/css/how-to-prevent-scrollbar-from-repositioning-web-page.html */
-    overflow-y: scroll;
-}
-
-a, a:visited {
-    color: #3a9784;
-}
-
-a:hover {
-    text-decoration: none;
-    color: #317f6f;
-}
-
-h1 {
-    margin-top: 35px;
-    margin-bottom: 30px;
-    font-size: 2.5em;
-    word-wrap: break-word; /* For very long topics */
-    padding-right: 40px; /* For the X on the detail page */
-    font-weight: 300;
-    color: #666;
-}
-
-h2 {
-    margin-top: 30px;
-    margin-bottom: 5px;
-    font-size: 1.8em;
-    font-weight: 300;
-    color: #333;
-}
-
-h3 {
-    margin-top: 25px;
-    margin-bottom: 5px;
-    font-size: 1.3em;
-    font-weight: 300;
-    color: #333;
-}
-
-p {
-    margin-top: 10px;
-    margin-bottom: 20px;
-    line-height: 160%;
-    font-weight: 400;
-}
-
-p.smallMarginBottom {
-    margin-bottom: 10px;
-}
-
-b {
-    font-weight: 500;
-}
-
-tt {
-    background: #eee;
-    padding: 2px 7px;
-    border-radius: 3px;
-}
-
-code {
-    display: block;
-    background: #eee;
-    font-family: monospace;
-    padding: 20px;
-    border-radius: 3px;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
-/* Roboto font, embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin */
-
-/* roboto-300 - latin */
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 300;
-    src: local(''),
-    url('../font/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../font/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* roboto-regular - latin */
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: local(''),
-    url('../font/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../font/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* roboto-500 - latin */
-@font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    src: local(''),
-    url('../font/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../font/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* Main page */
-
-#main {
-    max-width: 900px;
-    margin: 0 auto 50px auto;
-    padding: 0 10px;
-}
-
-#error {
-    color: darkred;
-    font-style: italic;
-}
-
-#ironicCenterTagDontFreakOut {
-    color: #666;
-}
-
-/* Anchors */
-
-.anchor .anchorLink {
-    color: #ccc;
-    text-decoration: none;
-    padding: 0 5px;
-    visibility: hidden;
-}
-
-.anchor:hover .anchorLink {
-    visibility: visible;
-}
-
-.anchor .anchorLink:hover {
-    color: #3a9784;
-    visibility: visible;
-}
-
-/* Figures */
-
-figure {
-    text-align: center;
-}
-
-figure img, figure video {
-    filter: drop-shadow(3px 3px 3px #ccc);
-    border-radius: 7px;
-    max-width: 100%;
-}
-
-figure video {
-    width: 100%;
-    max-height: 450px;
-}
-
-figcaption {
-    text-align: center;
-    font-style: italic;
-    padding-top: 10px;
-}
-
-/* Screenshots */
-
-#screenshots {
-    text-align: center;
-}
-
-#screenshots img {
-    height: 190px;
-    margin: 3px;
-    border-radius: 5px;
-    filter: drop-shadow(2px 2px 2px #ddd);
-}
-
-#screenshots .nowrap {
-    white-space: nowrap;
-}
-
-/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */
-
-.lightbox {
-    opacity: 0;
-    visibility: hidden;
-    position: fixed;
-    left:0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: -1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.15s ease-in;
-}
-
-.lightbox.show {
-    background-color: rgba(0,0,0, 0.75);
-    opacity: 1;
-    visibility: visible;
-    z-index: 1000;
-}
-
-.lightbox img {
-    max-width: 90%;
-    max-height: 90%;
-    filter: drop-shadow(5px 5px 10px #222);
-    border-radius: 5px;
-}
-
-.lightbox .close-lightbox {
-    cursor: pointer;
-    position: absolute;
-    top: 30px;
-    right: 30px;
-    width: 20px;
-    height: 20px;
-}
-
-.lightbox .close-lightbox::after,
-.lightbox .close-lightbox::before {
-    content: '';
-    width: 3px;
-    height: 20px;
-    background-color: #ddd;
-    position: absolute;
-    border-radius: 5px;
-    transform: rotate(45deg);
-}
-
-.lightbox .close-lightbox::before {
-    transform: rotate(-45deg);
-}
-
-.lightbox .close-lightbox:hover::after,
-.lightbox .close-lightbox:hover::before {
-    background-color: #fff;
-}
-
-/* Header */
-
-#header {
-    background: #3a9784;
-    height: 130px;
-}
-
-#header #headerBox {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 0 10px;
-}
-
-#header #logo {
-    margin-top: 23px;
-    float: left;
-}
-
-#header #name {
-    float: left;
-    color: white;
-    font-size: 2.6em;
-    font-weight: 300;
-    margin: 35px 0 0 20px;
-}
-
-#header ol {
-    list-style-type: none;
-    float: right;
-    margin-top: 80px;
-}
-
-#header ol li {
-    display: inline-block;
-    margin: 0 10px;
-    font-weight: 400;
-}
-
-#header ol li a, nav ol li a:visited {
-    color: white;
-    text-decoration: none;
-}
-
-#header ol li a:hover {
-    text-decoration: underline;
-}
-
-/* Subscribe box */
-
-button {
-    background: #3a9784;
-    border: none;
-    border-radius: 3px;
-    padding: 3px 5px;
-    color: white;
-    cursor: pointer;
-}
-
-button:hover {
-    background: #317f6f;
-    padding: 5px;
-}
-
-ul {
-    padding-left: 1em;
-    list-style-type: circle;
-    padding-bottom: 0;
-    margin: 0;
-}
-
-li {
-    padding: 4px 0;
-    margin: 4px 0;
-    font-size: 0.9em;
-}
-
-
-/* Hide top menu SMALL SCREEN */
-@media only screen and (max-width: 780px) {
-    #header ol {
-        display: none;
-    }
-}
-
-/* Subscribe box SMALL SCREEN */
-@media only screen and (max-width: 1599px) {
-    #subscribeBox #subscribeForm {
-        border-left: 4px solid #3a9784;
-        padding: 10px;
-    }
-
-    #subscribeBox #topicsHeader {
-        margin-bottom: 0;
-    }
-
-    #subscribeBox input {
-        height: 24px;
-        min-width: 200px;
-        max-width: 300px;
-        border-radius: 3px;
-        border: none;
-        border-bottom: 1px solid #aaa;
-        font-size: 0.8em;
-    }
-
-    #subscribeBox input:focus {
-        border-bottom: 2px solid #3a9784;
-        outline: none;
-    }
-
-    #subscribeBox ul {
-        margin: 0;
-    }
-
-    #subscribeBox li {
-        margin: 3px 0;
-        padding: 0;
-    }
-
-    #subscribeBox li img {
-        width: 15px;
-        height: 15px;
-        vertical-align: bottom;
-    }
-
-    #subscribeBox li a {
-        padding: 0 5px 0 0;
-    }
-
-    #subscribeBox button {
-        font-size: 0.8em;
-        background: #3a9784;
-        border-radius: 3px;
-        padding: 5px;
-        color: white;
-        cursor: pointer;
-    }
-
-    #subscribeBox button:hover {
-        background: #317f6f;
-    }
-}
-
-/* Subscribe box BIG SCREEN */
-@media only screen and (min-width: 1600px) {
-    #subscribeBox {
-        position: fixed;
-        top: 170px;
-        right: 10px;
-        width: 300px;
-        border-left: 4px solid #3a9784;
-        padding: 10px;
-    }
-
-    #subscribeBox h3 {
-        margin-top: 0;
-        margin-bottom: 5px;
-        font-size: 1.1em;
-    }
-
-    #subscribeBox #topicsHeader {
-        margin-bottom: 0;
-    }
-
-    #subscribeBox p {
-        font-size: 0.9em;
-        margin-bottom: 10px;
-    }
-
-    #subscribeBox ul {
-        margin: 0;
-    }
-
-    #subscribeBox input {
-        height: 18px;
-        border-radius: 3px;
-        border: none;
-        border-bottom: 1px solid #aaa;
-    }
-
-    #subscribeBox input:focus {
-        border-bottom: 2px solid #3a9784;
-        outline: none;
-    }
-
-    #subscribeBox li {
-        margin: 3px 0;
-        padding: 0;
-    }
-
-    #subscribeBox li img {
-        width: 15px;
-        height: 15px;
-        vertical-align: bottom;
-    }
-
-    #subscribeBox li a {
-        padding: 0 5px 0 0;
-    }
-
-    #subscribeBox button {
-        font-size: 0.7em;
-        background: #3a9784;
-        border-radius: 3px;
-        padding: 5px;
-        color: white;
-        cursor: pointer;
-    }
-
-    #subscribeBox button:hover {
-        background: #317f6f;
-    }
-}
-
-/** Detail view */
-
-#detail .detailEntry {
-    margin-bottom: 20px;
-}
-
-#detail .detailDate {
-    margin-bottom: 2px;
-}
-
-#detail .detailDate, #detail .detailTags {
-    color: #888;
-    font-size: 0.9em;
-}
-
-#detail .detailTags {
-    margin-top: 2px;
-}
-
-#detail .detailDate img {
-    width: 20px;
-    height: 20px;
-    vertical-align: bottom;
-}
-
-#detail .detailTitle {
-    font-weight: bold;
-}
-
-#detail #detailMain {
-    max-width: 900px;
-    margin: 0 auto;
-    position: relative; /* required for close button's "position: absolute" */
-    padding: 0 10px 50px 10px; /* Chrome and Firefox behave differently regarding bottom margin */
-}
-
-#detail #detailCloseButton {
-    background: #eee;
-    border-radius: 5px;
-    border: none;
-    padding: 5px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    display: block;
-}
-
-#detail #detailCloseButton:hover {
-    padding: 5px;
-    background: #ccc;
-}
-
-#detail #detailCloseButton img {
-    display: block; /* get rid of the weird bottom border */
-}
-
-#detail #detailNotificationsDisallowed {
-    display: none;
-    color: darkred;
-}
-
-#detail #events {
-    max-width: 900px;
-    margin: 0 auto 50px auto;
-}

server/static/img/close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

server/static/img/priority-1.svg

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24px"
-   viewBox="0 0 24 24"
-   width="24px"
-   fill="#000000"
-   version="1.1"
-   id="svg1428"
-   sodipodi:docname="priority_1_24dp.svg"
-   inkscape:version="1.1.1 (3bf5ae0, 2021-09-20)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1432" />
-  <sodipodi:namedview
-     id="namedview1430"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="20.517358"
-     inkscape:cx="22.834324"
-     inkscape:cy="15.742768"
-     inkscape:window-width="1863"
-     inkscape:window-height="1025"
-     inkscape:window-x="57"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1428" />
-  <path
-     style="color:#000000;fill:#999999;fill-opacity:1;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.195014,20.828316 a 1.2747098,1.2747098 0 0 0 0.661605,-0.185206 l 6.646593,-4.037178 a 1.2745823,1.2745823 0 0 0 0.427537,-1.751107 1.2745823,1.2745823 0 0 0 -1.750928,-0.427718 l -5.984807,3.635327 -5.9848086,-3.635327 a 1.2745823,1.2745823 0 0 0 -1.750927,0.427718 1.2745823,1.2745823 0 0 0 0.427536,1.751107 l 6.6464146,4.037178 a 1.2747098,1.2747098 0 0 0 0.661785,0.185206 z"
-     id="rect3554" />
-  <path
-     style="color:#000000;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.195014,15.694014 a 1.2747098,1.2747098 0 0 0 0.661605,-0.185206 l 6.646593,-4.037176 A 1.2745823,1.2745823 0 0 0 19.930749,9.7205243 1.2745823,1.2745823 0 0 0 18.179821,9.2928073 L 12.195014,12.928134 6.2102054,9.2928073 a 1.2745823,1.2745823 0 0 0 -1.750927,0.427717 1.2745823,1.2745823 0 0 0 0.427536,1.7511077 l 6.6464146,4.037176 a 1.2747098,1.2747098 0 0 0 0.661785,0.185206 z"
-     id="path9314" />
-  <path
-     style="color:#000000;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.116784,10.426777 a 1.2747098,1.2747098 0 0 0 0.661606,-0.185205 l 6.646593,-4.0371767 a 1.2745823,1.2745823 0 0 0 0.427537,-1.751108 1.2745823,1.2745823 0 0 0 -1.750928,-0.427718 l -5.984808,3.635327 -5.9848066,-3.635327 a 1.2745823,1.2745823 0 0 0 -1.750928,0.427718 1.2745823,1.2745823 0 0 0 0.427537,1.751108 L 11.455,10.241572 a 1.2747098,1.2747098 0 0 0 0.661784,0.185205 z"
-     id="path9316" />
-</svg>

server/static/img/priority-2.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24px"
-   viewBox="0 0 24 24"
-   width="24px"
-   fill="#000000"
-   version="1.1"
-   id="svg1428"
-   sodipodi:docname="priority_2_24dp.svg"
-   inkscape:version="1.1.1 (3bf5ae0, 2021-09-20)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1432" />
-  <sodipodi:namedview
-     id="namedview1430"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="20.517358"
-     inkscape:cx="22.834324"
-     inkscape:cy="15.742768"
-     inkscape:window-width="1863"
-     inkscape:window-height="1025"
-     inkscape:window-x="57"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1428" />
-  <path
-     style="color:#000000;fill:#999999;fill-opacity:1;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.172712,17.774352 a 1.2747098,1.2747098 0 0 0 0.661605,-0.185206 l 6.646593,-4.037178 a 1.2745823,1.2745823 0 0 0 0.427537,-1.751107 1.2745823,1.2745823 0 0 0 -1.750928,-0.427718 L 12.172712,15.00847 6.1879033,11.373143 a 1.2745823,1.2745823 0 0 0 -1.750927,0.427718 1.2745823,1.2745823 0 0 0 0.427536,1.751107 l 6.6464147,4.037178 a 1.2747098,1.2747098 0 0 0 0.661785,0.185206 z"
-     id="rect3554" />
-  <path
-     style="color:#000000;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.172712,12.64005 a 1.2747098,1.2747098 0 0 0 0.661605,-0.185206 L 19.48091,8.4176679 A 1.2745823,1.2745823 0 0 0 19.908447,6.6665602 1.2745823,1.2745823 0 0 0 18.157519,6.2388432 L 12.172712,9.8741699 6.1879033,6.2388432 a 1.2745823,1.2745823 0 0 0 -1.750927,0.427717 1.2745823,1.2745823 0 0 0 0.427536,1.7511077 l 6.6464147,4.0371761 a 1.2747098,1.2747098 0 0 0 0.661785,0.185206 z"
-     id="path9314" />
-</svg>

server/static/img/priority-4.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24px"
-   viewBox="0 0 24 24"
-   width="24px"
-   fill="#000000"
-   version="1.1"
-   id="svg1428"
-   sodipodi:docname="priority_4_24dp.svg"
-   inkscape:version="1.1.1 (3bf5ae0, 2021-09-20)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1432" />
-  <sodipodi:namedview
-     id="namedview1430"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="20.517358"
-     inkscape:cx="22.834324"
-     inkscape:cy="15.742768"
-     inkscape:window-width="1863"
-     inkscape:window-height="1025"
-     inkscape:window-x="57"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1428" />
-  <path
-     style="color:#000000;fill:#c60000;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="M 12.116784,6.5394415 A 1.2747098,1.2747098 0 0 0 11.455179,6.724648 l -6.6465926,4.037176 a 1.2745823,1.2745823 0 0 0 -0.427537,1.751108 1.2745823,1.2745823 0 0 0 1.7509281,0.427717 l 5.9848065,-3.635327 5.984809,3.635327 A 1.2745823,1.2745823 0 0 0 19.85252,12.512932 1.2745823,1.2745823 0 0 0 19.424984,10.761824 L 12.778569,6.724648 A 1.2747098,1.2747098 0 0 0 12.116784,6.5394415 Z"
-     id="path9314" />
-  <path
-     style="color:#000000;fill:#de0000;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.195014,11.806679 a 1.2747098,1.2747098 0 0 0 -0.661606,0.185205 l -6.6465924,4.037177 a 1.2745823,1.2745823 0 0 0 -0.427537,1.751108 1.2745823,1.2745823 0 0 0 1.750928,0.427718 l 5.9848074,-3.635327 5.984807,3.635327 a 1.2745823,1.2745823 0 0 0 1.750928,-0.427718 1.2745823,1.2745823 0 0 0 -0.427537,-1.751108 l -6.646414,-4.037177 a 1.2747098,1.2747098 0 0 0 -0.661784,-0.185205 z"
-     id="path9316" />
-</svg>

server/static/img/priority-5.svg

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="24px"
-   viewBox="0 0 24 24"
-   width="24px"
-   fill="#000000"
-   version="1.1"
-   id="svg1428"
-   sodipodi:docname="priority_5_24dp.svg"
-   inkscape:version="1.1.1 (3bf5ae0, 2021-09-20)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1432" />
-  <sodipodi:namedview
-     id="namedview1430"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:pageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="20.517358"
-     inkscape:cx="22.834323"
-     inkscape:cy="15.742767"
-     inkscape:window-width="1863"
-     inkscape:window-height="1025"
-     inkscape:window-x="57"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg1428" />
-  <path
-     style="color:#000000;fill:#aa0000;fill-opacity:1;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="M 12.116784,3.40514 A 1.2747098,1.2747098 0 0 0 11.455179,3.5903463 L 4.8085864,7.6275238 A 1.2745823,1.2745823 0 0 0 4.3810494,9.3786313 1.2745823,1.2745823 0 0 0 6.1319775,9.8063489 L 12.116784,6.1710217 18.101593,9.8063489 A 1.2745823,1.2745823 0 0 0 19.85252,9.3786313 1.2745823,1.2745823 0 0 0 19.424984,7.6275238 L 12.778569,3.5903463 A 1.2747098,1.2747098 0 0 0 12.116784,3.40514 Z"
-     id="rect3554" />
-  <path
-     style="color:#000000;fill:#c60000;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="M 12.116784,8.5394415 A 1.2747098,1.2747098 0 0 0 11.455179,8.724648 l -6.6465926,4.037176 a 1.2745823,1.2745823 0 0 0 -0.427537,1.751108 1.2745823,1.2745823 0 0 0 1.7509281,0.427717 l 5.9848065,-3.635327 5.984809,3.635327 A 1.2745823,1.2745823 0 0 0 19.85252,14.512932 1.2745823,1.2745823 0 0 0 19.424984,12.761824 L 12.778569,8.724648 A 1.2747098,1.2747098 0 0 0 12.116784,8.5394415 Z"
-     id="path9314" />
-  <path
-     style="color:#000000;fill:#de0000;fill-opacity:1;stroke:none;stroke-width:0.0919748;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
-     d="m 12.195014,13.806679 a 1.2747098,1.2747098 0 0 0 -0.661606,0.185205 l -6.6465924,4.037177 a 1.2745823,1.2745823 0 0 0 -0.427537,1.751108 1.2745823,1.2745823 0 0 0 1.750928,0.427718 l 5.9848074,-3.635327 5.984807,3.635327 a 1.2745823,1.2745823 0 0 0 1.750928,-0.427718 1.2745823,1.2745823 0 0 0 -0.427537,-1.751108 l -6.646414,-4.037177 a 1.2747098,1.2747098 0 0 0 -0.661784,-0.185205 z"
-     id="path9316" />
-</svg>

server/static/img/send.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>

server/static/img/unsubscribe.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>

server/static/js/app.js

@@ -1,435 +0,0 @@
-
-/**
- * Hello, dear curious visitor. I am not a web-guy, so please don't judge my horrible JS code.
- * In fact, please do tell me about all the things I did wrong and that I could improve. I've been trying
- * to read up on modern JS, but it's just a little much.
- *
- * Feel free to open tickets at https://github.com/binwiederhier/ntfy/issues. Thank you!
- */
-
-/* All the things */
-
-let topics = {};
-let currentTopic = "";
-let currentTopicUnsubscribeOnClose = false;
-let currentUrl = window.location.hostname;
-if (window.location.port) {
-    currentUrl += ':' + window.location.port
-}
-
-/* Main view */
-const main = document.getElementById("main");
-const topicsHeader = document.getElementById("topicsHeader");
-const topicsList = document.getElementById("topicsList");
-const topicField = document.getElementById("topicField");
-const notifySound = document.getElementById("notifySound");
-const subscribeButton = document.getElementById("subscribeButton");
-const errorField = document.getElementById("error");
-const originalTitle = document.title;
-
-/* Detail view */
-const detailView = document.getElementById("detail");
-const detailTitle = document.getElementById("detailTitle");
-const detailEventsList = document.getElementById("detailEventsList");
-const detailTopicUrl = document.getElementById("detailTopicUrl");
-const detailNoNotifications = document.getElementById("detailNoNotifications");
-const detailCloseButton = document.getElementById("detailCloseButton");
-const detailNotificationsDisallowed = document.getElementById("detailNotificationsDisallowed");
-
-/* Screenshots */
-const lightbox = document.getElementById("lightbox");
-
-const subscribe = (topic) => {
-    if (Notification.permission !== "granted") {
-        Notification.requestPermission().then((permission) => {
-            if (permission === "granted") {
-                subscribeInternal(topic, true, 0);
-            } else {
-                showNotificationDeniedError();
-            }
-        });
-    } else {
-        subscribeInternal(topic, true,0);
-    }
-};
-
-const subscribeInternal = (topic, persist, delaySec) => {
-    setTimeout(() => {
-        // Render list entry
-        let topicEntry = document.getElementById(`topic-${topic}`);
-        if (!topicEntry) {
-            topicEntry = document.createElement('li');
-            topicEntry.id = `topic-${topic}`;
-            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/unsubscribe.svg"> Unsubscribe</button>`;
-            topicsList.appendChild(topicEntry);
-        }
-        topicsHeader.style.display = '';
-
-        // Open event source
-        let eventSource = new EventSource(`${topic}/sse`);
-        eventSource.onopen = () => {
-            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/unsubscribe.svg"> Unsubscribe</button>`;
-            delaySec = 0; // Reset on successful connection
-        };
-        eventSource.onerror = (e) => {
-            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <i>(Reconnecting)</i> <button disabled="disabled">Test</button> <button onclick="unsubscribe('${topic}'); return false;">Unsubscribe</button>`;
-            eventSource.close();
-            const newDelaySec = (delaySec + 5 <= 15) ? delaySec + 5 : 15;
-            subscribeInternal(topic, persist, newDelaySec);
-        };
-        eventSource.onmessage = (e) => {
-            const event = JSON.parse(e.data);
-            topics[topic]['messages'].push(event);
-            topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
-            if (currentTopic === topic) {
-                rerenderDetailView();
-            }
-            if (Notification.permission === "granted") {
-                notifySound.play();
-                const title = formatTitle(event);
-                const message = formatMessage(event);
-                const notification = new Notification(title, {
-                    body: message,
-                    icon: '/static/img/favicon.png'
-                });
-                notification.onclick = (e) => {
-                    showDetail(event.topic);
-                };
-            }
-        };
-        topics[topic] = {
-            'eventSource': eventSource,
-            'messages': [],
-            'persist': persist
-        };
-        fetchCachedMessages(topic).then(() => {
-            if (currentTopic === topic) {
-                rerenderDetailView();
-            }
-        })
-        let persistedTopicKeys = Object.keys(topics).filter(t => topics[t].persist);
-        localStorage.setItem('topics', JSON.stringify(persistedTopicKeys));
-    }, delaySec * 1000);
-};
-
-const unsubscribe = (topic) => {
-    topics[topic]['eventSource'].close();
-    delete topics[topic];
-    localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
-    document.getElementById(`topic-${topic}`).remove();
-    if (Object.keys(topics).length === 0) {
-        topicsHeader.style.display = 'none';
-    }
-};
-
-const test = (topic) => {
-    fetch(`/${topic}`, {
-        method: 'PUT',
-        body: `This is a test notification sent by the ntfy.sh Web UI at ${new Date().toString()}.`
-    });
-};
-
-const fetchCachedMessages = async (topic) => {
-    const topicJsonUrl = `/${topic}/json?poll=1`; // Poll!
-    for await (let line of makeTextFileLineIterator(topicJsonUrl)) {
-        const message = JSON.parse(line);
-        topics[topic]['messages'].push(message);
-    }
-    topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
-};
-
-const showDetail = (topic) => {
-    currentTopic = topic;
-    history.replaceState(topic, `${currentUrl}/${topic}`, `/${topic}`);
-    window.scrollTo(0, 0);
-    rerenderDetailView();
-    return false;
-};
-
-const rerenderDetailView = () => {
-    detailTitle.innerHTML = `${currentUrl}/${currentTopic}`; // document.location.replaceAll(..)
-    detailTopicUrl.innerHTML = `${currentUrl}/${currentTopic}`;
-    while (detailEventsList.firstChild) {
-        detailEventsList.removeChild(detailEventsList.firstChild);
-    }
-    topics[currentTopic]['messages'].forEach(m => {
-        const entryDiv = document.createElement('div');
-        const dateDiv = document.createElement('div');
-        const titleDiv = document.createElement('div');
-        const messageDiv = document.createElement('div');
-        const tagsDiv = document.createElement('div');
-
-        entryDiv.classList.add('detailEntry');
-        dateDiv.classList.add('detailDate');
-        titleDiv.classList.add('detailTitle');
-        messageDiv.classList.add('detailMessage');
-        tagsDiv.classList.add('detailTags');
-
-        const dateStr = new Date(m.time * 1000).toLocaleString();
-        if (m.priority && [1,2,4,5].includes(m.priority)) {
-            dateDiv.innerHTML = `${dateStr} <img src="static/img/priority-${m.priority}.svg"/>`;
-        } else {
-            dateDiv.innerHTML = `${dateStr}`;
-        }
-        messageDiv.innerText = formatMessage(m);
-        entryDiv.appendChild(dateDiv);
-        if (m.title) {
-            titleDiv.innerText = formatTitleA(m);
-            entryDiv.appendChild(titleDiv);
-        }
-        entryDiv.appendChild(messageDiv);
-        const otherTags = unmatchedTags(m.tags);
-        if (otherTags.length > 0) {
-            tagsDiv.innerText = `Tags: ${otherTags.join(", ")}`;
-            entryDiv.appendChild(tagsDiv);
-        }
-        detailEventsList.appendChild(entryDiv);
-    })
-    if (topics[currentTopic]['messages'].length === 0) {
-        detailNoNotifications.style.display = '';
-    } else {
-        detailNoNotifications.style.display = 'none';
-    }
-    if (Notification.permission === "granted") {
-        detailNotificationsDisallowed.style.display = 'none';
-    } else {
-        detailNotificationsDisallowed.style.display = 'block';
-    }
-    detailView.style.display = 'block';
-    main.style.display = 'none';
-};
-
-const hideDetailView = () => {
-    if (currentTopicUnsubscribeOnClose) {
-        unsubscribe(currentTopic);
-        currentTopicUnsubscribeOnClose = false;
-    }
-    currentTopic = "";
-    history.replaceState('', originalTitle, '/');
-    detailView.style.display = 'none';
-    main.style.display = 'block';
-    return false;
-};
-
-const requestPermission = () => {
-    if (Notification.permission !== "granted") {
-        Notification.requestPermission().then((permission) => {
-            if (permission === "granted") {
-                detailNotificationsDisallowed.style.display = 'none';
-            }
-        });
-    }
-    return false;
-};
-
-const showError = (msg) => {
-    errorField.innerHTML = msg;
-    topicField.disabled = true;
-    subscribeButton.disabled = true;
-};
-
-const showBrowserIncompatibleError = () => {
-    showError("Your browser is not compatible to use the web-based desktop notifications.");
-};
-
-const showNotificationDeniedError = () => {
-    showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications.");
-};
-
-const showScreenshotOverlay = (e, el, index) => {
-    lightbox.classList.add('show');
-    document.addEventListener('keydown', nextScreenshotKeyboardListener);
-    return showScreenshot(e, index);
-};
-
-const showScreenshot = (e, index) => {
-    const actualIndex = resolveScreenshotIndex(index);
-    lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[actualIndex].innerHTML;
-    lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e,actualIndex+1); };
-    currentScreenshotIndex = actualIndex;
-    e.stopPropagation();
-    return false;
-};
-
-const nextScreenshot = (e) => {
-    return showScreenshot(e, currentScreenshotIndex+1);
-};
-
-const previousScreenshot = (e) => {
-    return showScreenshot(e, currentScreenshotIndex-1);
-};
-
-const resolveScreenshotIndex = (index) => {
-    if (index < 0) {
-        return screenshots.length - 1;
-    } else if (index > screenshots.length - 1) {
-        return 0;
-    }
-    return index;
-};
-
-const hideScreenshotOverlay = (e) => {
-    lightbox.classList.remove('show');
-    document.removeEventListener('keydown', nextScreenshotKeyboardListener);
-};
-
-const nextScreenshotKeyboardListener = (e) => {
-    switch (e.keyCode) {
-        case 37:
-            previousScreenshot(e);
-            break;
-        case 39:
-            nextScreenshot(e);
-            break;
-    }
-};
-
-const formatTitle = (m) => {
-    if (m.title) {
-        return formatTitleA(m);
-    } else {
-        return `${location.host}/${m.topic}`;
-    }
-};
-
-const formatTitleA = (m) => {
-    const emojiList = toEmojis(m.tags);
-    if (emojiList.length > 0) {
-        return `${emojiList.join(" ")} ${m.title}`;
-    } else {
-        return m.title;
-    }
-};
-
-const formatMessage = (m) => {
-    if (m.title) {
-        return m.message;
-    } else {
-        const emojiList = toEmojis(m.tags);
-        if (emojiList.length > 0) {
-            return `${emojiList.join(" ")} ${m.message}`;
-        } else {
-            return m.message;
-        }
-    }
-};
-
-const toEmojis = (tags) => {
-    if (!tags) return [];
-    else return tags.filter(tag => tag in emojis).map(tag => emojis[tag]);
-}
-
-const unmatchedTags = (tags) => {
-    if (!tags) return [];
-    else return tags.filter(tag => !(tag in emojis));
-}
-
-// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
-async function* makeTextFileLineIterator(fileURL) {
-    const utf8Decoder = new TextDecoder('utf-8');
-    const response = await fetch(fileURL);
-    const reader = response.body.getReader();
-    let { value: chunk, done: readerDone } = await reader.read();
-    chunk = chunk ? utf8Decoder.decode(chunk) : '';
-
-    const re = /\n|\r|\r\n/gm;
-    let startIndex = 0;
-    let result;
-
-    for (;;) {
-        let result = re.exec(chunk);
-        if (!result) {
-            if (readerDone) {
-                break;
-            }
-            let remainder = chunk.substr(startIndex);
-            ({ value: chunk, done: readerDone } = await reader.read());
-            chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
-            startIndex = re.lastIndex = 0;
-            continue;
-        }
-        yield chunk.substring(startIndex, result.index);
-        startIndex = re.lastIndex;
-    }
-    if (startIndex < chunk.length) {
-        yield chunk.substr(startIndex); // last line didn't end in a newline char
-    }
-}
-
-subscribeButton.onclick = () => {
-    if (!topicField.value) {
-        return false;
-    }
-    subscribe(topicField.value);
-    topicField.value = "";
-    return false;
-};
-
-detailCloseButton.onclick = () => {
-    hideDetailView();
-};
-
-let currentScreenshotIndex = 0;
-const screenshots = [...document.querySelectorAll("#screenshots a")];
-screenshots.forEach((el, index) => {
-    el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
-});
-
-lightbox.onclick = hideScreenshotOverlay;
-
-// Disable Web UI if notifications of EventSource are not available
-if (!window["Notification"] || !window["EventSource"]) {
-    showBrowserIncompatibleError();
-} else if (Notification.permission === "denied") {
-    showNotificationDeniedError();
-}
-
-// Reset UI
-topicField.value = "";
-
-// Restore topics
-const storedTopics = JSON.parse(localStorage.getItem('topics') || "[]");
-if (storedTopics) {
-    storedTopics.forEach((topic) => { subscribeInternal(topic, true, 0); });
-    if (storedTopics.length === 0) {
-        topicsHeader.style.display = 'none';
-    }
-} else {
-    topicsHeader.style.display = 'none';
-}
-
-// (Temporarily) subscribe topic if we navigated to /sometopic URL
-const match = location.pathname.match(/^\/([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
-if (match) {
-    currentTopic = match[1];
-    if (!storedTopics.includes(currentTopic)) {
-        subscribeInternal(currentTopic, false,0);
-        currentTopicUnsubscribeOnClose = true;
-    }
-}
-
-// Add anchor links
-document.querySelectorAll('.anchor').forEach((el) => {
-    if (el.hasAttribute('id')) {
-        const id = el.getAttribute('id');
-        const anchor = document.createElement('a');
-        anchor.innerHTML = `<a href="#${id}" class="anchorLink">#</a>`;
-        el.appendChild(anchor);
-    }
-});
-
-// Change ntfy.sh url and protocol to match self-hosted one
-document.querySelectorAll('.ntfyUrl').forEach((el) => {
-    el.innerHTML = currentUrl;
-});
-document.querySelectorAll('.ntfyProtocol').forEach((el) => {
-    el.innerHTML = window.location.protocol + "//";
-});
-
-// Format emojis (see emoji.js)
-const emojis = {};
-rawEmojis.forEach(emoji => {
-    emoji.aliases.forEach(alias => {
-        emojis[alias] = emoji.emoji;
-    });
-});

server/util.go

@@ -14,12 +14,24 @@ func readBoolParam(r *http.Request, defaultValue bool, names ...string) bool {
 }
 
 func readParam(r *http.Request, names ...string) string {
+	value := readHeaderParam(r, names...)
+	if value != "" {
+		return value
+	}
+	return readQueryParam(r, names...)
+}
+
+func readHeaderParam(r *http.Request, names ...string) string {
 	for _, name := range names {
 		value := r.Header.Get(name)
 		if value != "" {
 			return strings.TrimSpace(value)
 		}
 	}
+	return ""
+}
+
+func readQueryParam(r *http.Request, names ...string) string {
 	for _, name := range names {
 		value := r.URL.Query().Get(strings.ToLower(name))
 		if value != "" {

util/gzip_handler.go

@@ -0,0 +1,52 @@
+package util
+
+import (
+	"compress/gzip"
+	"io"
+	"io/ioutil"
+	"net/http"
+	"strings"
+	"sync"
+)
+
+// Gzip is a HTTP middleware to transparently compress responses using gzip.
+// Original code from https://gist.github.com/CJEnright/bc2d8b8dc0c1389a9feeddb110f822d7 (MIT)
+func Gzip(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if !strings.Contains(r.Header.Get("Accept-Encoding"), "gzip") {
+			next.ServeHTTP(w, r)
+			return
+		}
+		w.Header().Set("Content-Encoding", "gzip")
+
+		gz := gzPool.Get().(*gzip.Writer)
+		defer gzPool.Put(gz)
+
+		gz.Reset(w)
+		defer gz.Close()
+
+		r.Header.Del("Accept-Encoding") // prevent double-gzipping
+		next.ServeHTTP(&gzipResponseWriter{ResponseWriter: w, Writer: gz}, r)
+	})
+}
+
+var gzPool = sync.Pool{
+	New: func() interface{} {
+		w := gzip.NewWriter(ioutil.Discard)
+		return w
+	},
+}
+
+type gzipResponseWriter struct {
+	io.Writer
+	http.ResponseWriter
+}
+
+func (w *gzipResponseWriter) WriteHeader(status int) {
+	w.Header().Del("Content-Length")
+	w.ResponseWriter.WriteHeader(status)
+}
+
+func (w *gzipResponseWriter) Write(b []byte) (int, error) {
+	return w.Writer.Write(b)
+}

util/gzip_handler_test.go

@@ -0,0 +1,40 @@
+package util
+
+import (
+	"compress/gzip"
+	"github.com/stretchr/testify/require"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+func TestGzipHandler(t *testing.T) {
+	s := Gzip(http.FileServer(http.FS(testFs)))
+
+	rr := httptest.NewRecorder()
+	req, _ := http.NewRequest("GET", "/embedfs/test.txt", nil)
+	req.Header.Set("Accept-Encoding", "gzip, deflate")
+	s.ServeHTTP(rr, req)
+	require.Equal(t, 200, rr.Code)
+	require.Equal(t, "gzip", rr.Header().Get("Content-Encoding"))
+	require.Equal(t, "", rr.Header().Get("Content-Length"))
+
+	gz, _ := gzip.NewReader(rr.Body)
+	b, _ := io.ReadAll(gz)
+	require.Equal(t, "This is a test file for embedfs_test.go\n", string(b))
+}
+
+func TestGzipHandler_NoGzip(t *testing.T) {
+	s := Gzip(http.FileServer(http.FS(testFs)))
+
+	rr := httptest.NewRecorder()
+	req, _ := http.NewRequest("GET", "/embedfs/test.txt", nil)
+	s.ServeHTTP(rr, req)
+	require.Equal(t, 200, rr.Code)
+	require.Equal(t, "", rr.Header().Get("Content-Encoding"))
+	require.Equal(t, "40", rr.Header().Get("Content-Length"))
+
+	b, _ := io.ReadAll(rr.Body)
+	require.Equal(t, "This is a test file for embedfs_test.go\n", string(b))
+}

web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "ntfy",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "latest",
+    "dexie": "^3.2.1",
+    "dexie-react-hooks": "^1.1.1",
+    "js-base64": "^3.7.2",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "^5.0.0",
+    "stacktrace-gps": "^3.0.4",
+    "stacktrace-js": "^2.0.2",
+    "svgo": "^2.8.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

web/public/config.js

@@ -0,0 +1,9 @@
+// Configuration injected by the ntfy server.
+//
+// This file is just an example. It is removed during the build process.
+// The actual config is dynamically generated server-side.
+
+var config = {
+    appRoot: "/",
+    disallowedTopics: ["docs", "static", "file", "app", "settings"]
+};

web/public/home.html

@@ -1,11 +1,10 @@
-{{- /*gotype: heckel.io/ntfy/server.indexPage*/ -}}
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
 
     <title>ntfy.sh | Send push notifications to your phone via PUT/POST</title>
-    <link rel="stylesheet" href="static/css/app.css" type="text/css">
+    <link rel="stylesheet" href="static/css/home.css" type="text/css">
 
     <!-- Mobile view -->
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -24,14 +23,13 @@
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:site_name" content="ntfy.sh" />
-    <meta property="og:title" content="ntfy.sh | Send push notifications to your phone or desktop via PUT/POST" />
+    <meta property="og:title" content="ntfy.sh | Push notifications to your phone or desktop via PUT/POST" />
     <meta property="og:description" content="ntfy is a simple HTTP-based pub-sub notification service. It allows you to send desktop notifications via scripts from any computer, entirely without signup or cost. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy." />
     <meta property="og:image" content="/static/img/ntfy.png" />
     <meta property="og:url" content="https://ntfy.sh" />
-{{if .Topic}}
-    <!-- Never index topic page -->
-    <meta name="robots" content="noindex, nofollow" />
-{{end}}
+
+    <!-- Fonts -->
+    <link rel="stylesheet" href="static/css/fonts.css" type="text/css">
 </head>
 <body>
 
@@ -40,15 +38,15 @@
         <img id="logo" src="static/img/ntfy.png" alt="logo"/>
         <div id="name">ntfy</div>
         <ol>
-            <li><a href="docs/">Getting started</a></li>
+            <li><a href="app">Web app</a></li>
             <li><a href="docs/subscribe/phone/">Android/iOS</a></li>
+            <li><a href="docs/">Docs</a></li>
             <li><a href="docs/publish/">API</a></li>
-            <li><a href="docs/install/">Self-hosting</a></li>
             <li><a href="https://github.com/binwiederhier/ntfy">GitHub</a></li>
         </ol>
     </div>
 </nav>
-<div id="main"{{if .Topic}} style="display: none"{{end}}>
+<div id="main">
     <h1>Send push notifications to your phone or desktop via PUT/POST</h1>
     <p>
         <b>ntfy</b> (pronounce: <i>notify</i>) is a simple HTTP-based <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">pub-sub</a> notification service.
@@ -94,7 +92,7 @@
         Here's what that looks like in the <a href="docs/subscribe/phone/">Android app</a>:
     </p>
     <figure>
-        <img src="static/img/priority-notification.png" style="max-height: 200px"/>
+        <img src="static/img/screenshot-phone-popover.png" style="max-height: 200px"/>
         <figcaption>Urgent notification with pop-over</figcaption>
     </figure>
 
@@ -122,31 +120,23 @@
         <figcaption>Sending push notifications to your Android phone</figcaption>
     </figure>
 
-    <div id="subscribeBox">
-        <h3 id="subscribe-web" class="anchor">Subscribe in this Web UI</h3>
-        <p id="error"></p>
-        <p>
-            Subscribe to topics here and receive messages as <b>desktop notification</b>. Topics are not password-protected,
-            so choose a name that's not easy to guess.
-        </p>
-        <form id="subscribeForm">
-            <p>
-                <b>Topic:</b><br/>
-                <input type="text" id="topicField" autocomplete="off" placeholder="Topic name, e.g. phil_alerts" maxlength="64" pattern="[-_A-Za-z0-9]{1,64}" />
-                <button id="subscribeButton">Subscribe</button>
-            </p>
-            <p id="topicsHeader"><b>Subscribed topics:</b></p>
-            <ul id="topicsList"></ul>
-        </form>
-        <audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
-    </div>
+    <h3 id="subscribe-web" class="anchor">Subscribe via web app</h3>
+    <p>
+        Subscribe to topics in the <a href="app">web app</a> and receive messages as <b>desktop notification</b>.
+        It is available at <b><a href="app"><span class="ntfyUrl">ntfy.sh</span>/app</a></b>.
+    </p>
+    <figure>
+        <a href="app"><img src="static/img/screenshot-web-detail.png" width="100%"/></a>
+        <figcaption>ntfy web app, available at <a href="app"><span class="ntfyUrl">ntfy.sh</span>/app</a></figcaption>
+    </figure>
 
     <h3 id="subscribe-api" class="anchor">Subscribe using the API</h3>
     <p>
         There's a super simple API that you can use to integrate your own app. You can consume
         a <a href="docs/subscribe/api/#subscribe-as-json-stream">JSON stream</a>,
-        an <a href="docs/subscribe/api/#subscribe-as-sse-stream">SSE/EventSource stream</a> (useful for web apps),
-        as well as a <a href="docs/subscribe/api/#subscribe-as-raw-stream">plain text stream</a>.
+        an <a href="docs/subscribe/api/#subscribe-as-sse-stream">SSE/EventSource stream</a>,
+        a <a href="docs/subscribe/api/#subscribe-as-raw-stream">plain text stream</a>,
+        or <a href="docs/subscribe/api/#websockets">via WebSockets</a>.
     </p>
     <p class="smallMarginBottom">
         Here's an example for JSON. The <b>connection stays open</b>, so you can retrieve messages as they come in:
@@ -186,33 +176,7 @@
 
     <center id="ironicCenterTagDontFreakOut"><i>Made with ❤️ by <a href="https://heckel.io">Philipp C. Heckel</a></i></center>
 </div>
-<div id="detail"{{if not .Topic}} style="display: none"{{end}}>
-    <div id="detailMain">
-        <button id="detailCloseButton"><img src="static/img/close.svg"/></button>
-        <h1><span id="detailTitle"></span></h1>
-        <p class="smallMarginBottom">
-            <b>ntfy</b> is a simple HTTP-based pub-sub notification service. This is a ntfy topic.
-            To send notifications to it, simply PUT or POST to the topic URL. Here's an example using <tt>curl</tt>:
-        </p>
-        <code>
-            curl -d "Backup failed" <span id="detailTopicUrl">ntfy.sh/topic</span>
-        </code>
-        <p id="detailNotificationsDisallowed">
-            If you'd like to receive desktop notifications when new messages arrive on this topic, you have to
-            <a href="#" onclick="return requestPermission()">grant the browser permission</a> to show notifications.
-            Click the link to do so.
-        </p>
-        <p class="smallMarginBottom">
-            <b>Recent notifications</b> ({{if .CacheDuration}}cached for {{.CacheDuration | durationToHuman}}{{else}}caching is disabled{{end}}):
-        </p>
-        <p id="detailNoNotifications">
-            <i>You haven't received any notifications for this topic yet.</i>
-        </p>
-        <div id="detailEventsList"></div>
-    </div>
-</div>
 <div id="lightbox" class="lightbox"></div>
-<script src="static/js/emoji.js"></script>
-<script src="static/js/app.js"></script>
+<script src="static/js/home.js"></script>
 </body>
 </html>

web/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ntfy web</title>
+
+  <!-- Mobile view -->
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="HandheldFriendly" content="true">
+
+  <!-- Mobile browsers, background color -->
+  <meta name="theme-color" content="#317f6f">
+  <meta name="msapplication-navbutton-color" content="#317f6f">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#317f6f">
+
+  <!-- Favicon, see favicon.io -->
+  <link rel="icon" type="image/png" href="%PUBLIC_URL%/static/img/favicon.png">
+
+  <!-- Previews in Google, Slack, WhatsApp, etc. -->
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:site_name" content="ntfy web" />
+  <meta property="og:title" content="ntfy web" />
+  <meta property="og:description" content="ntfy lets you send push notifications via scripts from any computer or phone, entirely without signup or cost. Made with ❤ by Philipp C. Heckel, Apache License 2.0, source at https://heckel.io/ntfy." />
+  <meta property="og:image" content="%PUBLIC_URL%/static/img/ntfy.png" />
+  <meta property="og:url" content="https://ntfy.sh" />
+
+  <!-- Never index -->
+  <meta name="robots" content="noindex, nofollow" />
+
+  <!-- Fonts -->
+  <link rel="stylesheet" href="%PUBLIC_URL%/static/css/fonts.css" type="text/css">
+</head>
+<body>
+  <noscript>
+    ntfy web requires JavaScript, but you can also use the <a href="https://ntfy.sh/docs/subscribe/cli/">CLI</a>
+    or <a href="https://ntfy.sh/docs/subscribe/phone/">Android/iOS app</a> to subscribe.
+  </noscript>
+  <div id="root"></div>
+  <script src="%PUBLIC_URL%/config.js"></script>
+</body>
+</html>

web/public/static/css/fonts.css

@@ -0,0 +1,41 @@
+/* Roboto font, embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin */
+
+/* roboto-300 - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+    url('../fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-regular - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+    url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-500 - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local(''),
+    url('../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-700 - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+    url('../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('../fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

web/public/static/css/home.css

@@ -0,0 +1,280 @@
+/* general styling */
+
+html, body {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 1.1em;
+    color: #444;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    /* prevent scrollbar from repositioning website:
+     * https://www.w3docs.com/snippets/css/how-to-prevent-scrollbar-from-repositioning-web-page.html */
+    overflow-y: scroll;
+}
+
+a, a:visited {
+    color: #3a9784;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #317f6f;
+}
+
+h1 {
+    margin-top: 35px;
+    margin-bottom: 30px;
+    font-size: 2.5em;
+    word-wrap: break-word; /* For very long topics */
+    padding-right: 40px; /* For the X on the detail page */
+    font-weight: 300;
+    color: #666;
+}
+
+h2 {
+    margin-top: 30px;
+    margin-bottom: 5px;
+    font-size: 1.8em;
+    font-weight: 300;
+    color: #333;
+}
+
+h3 {
+    margin-top: 25px;
+    margin-bottom: 5px;
+    font-size: 1.3em;
+    font-weight: 300;
+    color: #333;
+}
+
+p {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    line-height: 160%;
+    font-weight: 400;
+}
+
+p.smallMarginBottom {
+    margin-bottom: 10px;
+}
+
+b {
+    font-weight: 500;
+}
+
+tt {
+    background: #eee;
+    padding: 2px 7px;
+    border-radius: 3px;
+}
+
+code {
+    display: block;
+    background: #eee;
+    font-family: monospace;
+    padding: 20px;
+    border-radius: 3px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+/* Main page */
+
+#main {
+    max-width: 900px;
+    margin: 0 auto 50px auto;
+    padding: 0 10px;
+}
+
+#error {
+    color: darkred;
+    font-style: italic;
+}
+
+#ironicCenterTagDontFreakOut {
+    color: #666;
+}
+
+/* Anchors */
+
+.anchor .anchorLink {
+    color: #ccc;
+    text-decoration: none;
+    padding: 0 5px;
+    visibility: hidden;
+}
+
+.anchor:hover .anchorLink {
+    visibility: visible;
+}
+
+.anchor .anchorLink:hover {
+    color: #3a9784;
+    visibility: visible;
+}
+
+/* Figures */
+
+figure {
+    text-align: center;
+}
+
+figure img, figure video {
+    filter: drop-shadow(3px 3px 3px #ccc);
+    border-radius: 7px;
+    max-width: 100%;
+}
+
+figure video {
+    width: 100%;
+    max-height: 450px;
+}
+
+figcaption {
+    text-align: center;
+    font-style: italic;
+    padding-top: 10px;
+}
+
+/* Screenshots */
+
+#screenshots {
+    text-align: center;
+}
+
+#screenshots img {
+    height: 190px;
+    margin: 3px;
+    border-radius: 5px;
+    filter: drop-shadow(2px 2px 2px #ddd);
+}
+
+#screenshots .nowrap {
+    white-space: nowrap;
+}
+
+/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */
+
+.lightbox {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    left:0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease-in;
+}
+
+.lightbox.show {
+    background-color: rgba(0,0,0, 0.75);
+    opacity: 1;
+    visibility: visible;
+    z-index: 1000;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    filter: drop-shadow(5px 5px 10px #222);
+    border-radius: 5px;
+}
+
+.lightbox .close-lightbox {
+    cursor: pointer;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    width: 20px;
+    height: 20px;
+}
+
+.lightbox .close-lightbox::after,
+.lightbox .close-lightbox::before {
+    content: '';
+    width: 3px;
+    height: 20px;
+    background-color: #ddd;
+    position: absolute;
+    border-radius: 5px;
+    transform: rotate(45deg);
+}
+
+.lightbox .close-lightbox::before {
+    transform: rotate(-45deg);
+}
+
+.lightbox .close-lightbox:hover::after,
+.lightbox .close-lightbox:hover::before {
+    background-color: #fff;
+}
+
+/* Header */
+
+#header {
+    background: #3a9784;
+    height: 130px;
+}
+
+#header #headerBox {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 10px;
+}
+
+#header #logo {
+    margin-top: 23px;
+    float: left;
+}
+
+#header #name {
+    float: left;
+    color: white;
+    font-size: 2.6em;
+    font-weight: 300;
+    margin: 35px 0 0 20px;
+}
+
+#header ol {
+    list-style-type: none;
+    float: right;
+    margin-top: 80px;
+}
+
+#header ol li {
+    display: inline-block;
+    margin: 0 10px;
+    font-weight: 400;
+}
+
+#header ol li a, nav ol li a:visited {
+    color: white;
+    text-decoration: none;
+}
+
+#header ol li a:hover {
+    text-decoration: underline;
+}
+
+li {
+    padding: 4px 0;
+    margin: 4px 0;
+    font-size: 0.9em;
+}
+
+
+/* Hide top menu SMALL SCREEN */
+@media only screen and (max-width: 780px) {
+    #header ol {
+        display: none;
+    }
+}

web/public/static/js/home.js

@@ -0,0 +1,84 @@
+
+/* All the things */
+
+let currentUrl = window.location.hostname;
+if (window.location.port) {
+    currentUrl += ':' + window.location.port
+}
+
+/* Screenshots */
+const lightbox = document.getElementById("lightbox");
+
+const showScreenshotOverlay = (e, el, index) => {
+    lightbox.classList.add('show');
+    document.addEventListener('keydown', nextScreenshotKeyboardListener);
+    return showScreenshot(e, index);
+};
+
+const showScreenshot = (e, index) => {
+    const actualIndex = resolveScreenshotIndex(index);
+    lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[actualIndex].innerHTML;
+    lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e,actualIndex+1); };
+    currentScreenshotIndex = actualIndex;
+    e.stopPropagation();
+    return false;
+};
+
+const nextScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex+1);
+};
+
+const previousScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex-1);
+};
+
+const resolveScreenshotIndex = (index) => {
+    if (index < 0) {
+        return screenshots.length - 1;
+    } else if (index > screenshots.length - 1) {
+        return 0;
+    }
+    return index;
+};
+
+const hideScreenshotOverlay = (e) => {
+    lightbox.classList.remove('show');
+    document.removeEventListener('keydown', nextScreenshotKeyboardListener);
+};
+
+const nextScreenshotKeyboardListener = (e) => {
+    switch (e.keyCode) {
+        case 37:
+            previousScreenshot(e);
+            break;
+        case 39:
+            nextScreenshot(e);
+            break;
+    }
+};
+
+let currentScreenshotIndex = 0;
+const screenshots = [...document.querySelectorAll("#screenshots a")];
+screenshots.forEach((el, index) => {
+    el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
+});
+
+lightbox.onclick = hideScreenshotOverlay;
+
+// Add anchor links
+document.querySelectorAll('.anchor').forEach((el) => {
+    if (el.hasAttribute('id')) {
+        const id = el.getAttribute('id');
+        const anchor = document.createElement('a');
+        anchor.innerHTML = `<a href="#${id}" class="anchorLink">#</a>`;
+        el.appendChild(anchor);
+    }
+});
+
+// Change ntfy.sh url and protocol to match self-hosted one
+document.querySelectorAll('.ntfyUrl').forEach((el) => {
+    el.innerHTML = currentUrl;
+});
+document.querySelectorAll('.ntfyProtocol').forEach((el) => {
+    el.innerHTML = window.location.protocol + "//";
+});

web/src/app/Api.js

@@ -0,0 +1,68 @@
+import {
+    fetchLinesIterator,
+    maybeWithBasicAuth,
+    topicShortUrl,
+    topicUrl,
+    topicUrlAuth,
+    topicUrlJsonPoll,
+    topicUrlJsonPollWithSince
+} from "./utils";
+import userManager from "./UserManager";
+
+class Api {
+    async poll(baseUrl, topic, since) {
+        const user = await userManager.get(baseUrl);
+        const shortUrl = topicShortUrl(baseUrl, topic);
+        const url = (since)
+            ? topicUrlJsonPollWithSince(baseUrl, topic, since)
+            : topicUrlJsonPoll(baseUrl, topic);
+        const messages = [];
+        const headers = maybeWithBasicAuth({}, user);
+        console.log(`[Api] Polling ${url}`);
+        for await (let line of fetchLinesIterator(url, headers)) {
+            console.log(`[Api, ${shortUrl}] Received message ${line}`);
+            messages.push(JSON.parse(line));
+        }
+        return messages;
+    }
+
+    async publish(baseUrl, topic, message, title, priority, tags) {
+        const user = await userManager.get(baseUrl);
+        const url = topicUrl(baseUrl, topic);
+        console.log(`[Api] Publishing message to ${url}`);
+        const headers = {};
+        if (title) {
+            headers["X-Title"] = title;
+        }
+        if (priority !== 3) {
+            headers["X-Priority"] = `${priority}`;
+        }
+        if (tags.length > 0) {
+            headers["X-Tags"] = tags.join(",");
+        }
+        await fetch(url, {
+            method: 'PUT',
+            body: message,
+            headers: maybeWithBasicAuth(headers, user)
+        });
+    }
+
+    async auth(baseUrl, topic, user) {
+        const url = topicUrlAuth(baseUrl, topic);
+        console.log(`[Api] Checking auth for ${url}`);
+        const response = await fetch(url, {
+            headers: maybeWithBasicAuth({}, user)
+        });
+        if (response.status >= 200 && response.status <= 299) {
+            return true;
+        } else if (!user && response.status === 404) {
+            return true; // Special case: Anonymous login to old servers return 404 since /<topic>/auth doesn't exist
+        } else if (response.status === 401 || response.status === 403) { // See server/server.go
+            return false;
+        }
+        throw new Error(`Unexpected server response ${response.status}`);
+    }
+}
+
+const api = new Api();
+export default api;

web/src/app/Connection.js

@@ -0,0 +1,112 @@
+import {basicAuth, encodeBase64Url, topicShortUrl, topicUrlWs} from "./utils";
+
+const retryBackoffSeconds = [5, 10, 15, 20, 30];
+
+/**
+ * A connection contains a single WebSocket connection for one topic. It handles its connection
+ * status itself, including reconnect attempts and backoff.
+ *
+ * Incoming messages and state changes are forwarded via listeners.
+ */
+class Connection {
+    constructor(connectionId, subscriptionId, baseUrl, topic, user, since, onNotification, onStateChanged) {
+        this.connectionId = connectionId;
+        this.subscriptionId = subscriptionId;
+        this.baseUrl = baseUrl;
+        this.topic = topic;
+        this.user = user;
+        this.since = since;
+        this.shortUrl = topicShortUrl(baseUrl, topic);
+        this.onNotification = onNotification;
+        this.onStateChanged = onStateChanged;
+        this.ws = null;
+        this.retryCount = 0;
+        this.retryTimeout = null;
+    }
+
+    start() {
+        // Don't fetch old messages; we do that as a poll() when adding a subscription;
+        // we don't want to re-trigger the main view re-render potentially hundreds of times.
+
+        const wsUrl = this.wsUrl();
+        console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Opening connection to ${wsUrl}`);
+
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = (event) => {
+            console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Connection established`, event);
+            this.retryCount = 0;
+            this.onStateChanged(this.subscriptionId, ConnectionState.Connected);
+        }
+        this.ws.onmessage = (event) => {
+            console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Message received from server: ${event.data}`);
+            try {
+                const data = JSON.parse(event.data);
+                if (data.event === 'open') {
+                    return;
+                }
+                const relevantAndValid =
+                    data.event === 'message' &&
+                    'id' in data &&
+                    'time' in data &&
+                    'message' in data;
+                if (!relevantAndValid) {
+                    console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Unexpected message. Ignoring.`);
+                    return;
+                }
+                this.since = data.id;
+                this.onNotification(this.subscriptionId, data);
+            } catch (e) {
+                console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Error handling message: ${e}`);
+            }
+        };
+        this.ws.onclose = (event) => {
+            if (event.wasClean) {
+                console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+                this.ws = null;
+            } else {
+                const retrySeconds = retryBackoffSeconds[Math.min(this.retryCount, retryBackoffSeconds.length-1)];
+                this.retryCount++;
+                console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Connection died, retrying in ${retrySeconds} seconds`);
+                this.retryTimeout = setTimeout(() => this.start(), retrySeconds * 1000);
+                this.onStateChanged(this.subscriptionId, ConnectionState.Connecting);
+            }
+        };
+        this.ws.onerror = (event) => {
+            console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Error occurred: ${event}`, event);
+        };
+    }
+
+    close() {
+        console.log(`[Connection, ${this.shortUrl}, ${this.connectionId}] Closing connection`);
+        const socket = this.ws;
+        const retryTimeout = this.retryTimeout;
+        if (socket !== null) {
+            socket.close();
+        }
+        if (retryTimeout !== null) {
+            clearTimeout(retryTimeout);
+        }
+        this.retryTimeout = null;
+        this.ws = null;
+    }
+
+    wsUrl() {
+        const params = [];
+        if (this.since) {
+            params.push(`since=${this.since}`);
+        }
+        if (this.user) {
+            const auth = encodeBase64Url(basicAuth(this.user.username, this.user.password));
+            params.push(`auth=${auth}`);
+        }
+        const wsUrl = topicUrlWs(this.baseUrl, this.topic);
+        return (params.length === 0) ? wsUrl : `${wsUrl}?${params.join('&')}`;
+    }
+}
+
+export class ConnectionState {
+    static Connected = "connected";
+    static Connecting = "connecting";
+}
+
+export default Connection;

web/src/app/ConnectionManager.js

@@ -0,0 +1,117 @@
+import Connection from "./Connection";
+import {hashCode} from "./utils";
+
+/**
+ * The connection manager keeps track of active connections (WebSocket connections, see Connection).
+ *
+ * Its refresh() method reconciles state changes with the target state by closing/opening connections
+ * as required. This is done pretty much exactly the same way as in the Android app.
+ */
+class ConnectionManager {
+    constructor() {
+        this.connections = new Map(); // ConnectionId -> Connection (hash, see below)
+        this.stateListener = null; // Fired when connection state changes
+        this.notificationListener = null; // Fired when new notifications arrive
+    }
+
+    registerStateListener(listener) {
+        this.stateListener = listener;
+    }
+
+    resetStateListener() {
+        this.stateListener = null;
+    }
+
+    registerNotificationListener(listener) {
+        this.notificationListener = listener;
+    }
+
+    resetNotificationListener() {
+        this.notificationListener = null;
+    }
+
+    /**
+     * This function figures out which websocket connections should be running by comparing the
+     * current state of the world (connections) with the target state (targetIds).
+     *
+     * It uses a "connectionId", which is sha256($subscriptionId|$username|$password) to identify
+     * connections. If any of them change, the connection is closed/replaced.
+     */
+    async refresh(subscriptions, users) {
+        if (!subscriptions || !users) {
+            return;
+        }
+        console.log(`[ConnectionManager] Refreshing connections`);
+        const subscriptionsWithUsersAndConnectionId = await Promise.all(subscriptions
+            .map(async s => {
+                const [user] = users.filter(u => u.baseUrl === s.baseUrl);
+                const connectionId = await makeConnectionId(s, user);
+                return {...s, user, connectionId};
+            }));
+        const targetIds = subscriptionsWithUsersAndConnectionId.map(s => s.connectionId);
+        const deletedIds = Array.from(this.connections.keys()).filter(id => !targetIds.includes(id));
+
+        // Create and add new connections
+        subscriptionsWithUsersAndConnectionId.forEach(subscription => {
+            const subscriptionId = subscription.id;
+            const connectionId = subscription.connectionId;
+            const added = !this.connections.get(connectionId)
+            if (added) {
+                const baseUrl = subscription.baseUrl;
+                const topic = subscription.topic;
+                const user = subscription.user;
+                const since = subscription.last;
+                const connection = new Connection(
+                    connectionId,
+                    subscriptionId,
+                    baseUrl,
+                    topic,
+                    user,
+                    since,
+                    (subscriptionId, notification) => this.notificationReceived(subscriptionId, notification),
+                    (subscriptionId, state) => this.stateChanged(subscriptionId, state)
+                );
+                this.connections.set(connectionId, connection);
+                console.log(`[ConnectionManager] Starting new connection ${connectionId} (subscription ${subscriptionId} with user ${user ? user.username : "anonymous"})`);
+                connection.start();
+            }
+        });
+
+        // Delete old connections
+        deletedIds.forEach(id => {
+            console.log(`[ConnectionManager] Closing connection ${id}`);
+            const connection = this.connections.get(id);
+            this.connections.delete(id);
+            connection.close();
+        });
+    }
+
+    stateChanged(subscriptionId, state) {
+        if (this.stateListener) {
+            try {
+                this.stateListener(subscriptionId, state);
+            } catch (e) {
+                console.error(`[ConnectionManager] Error updating state of ${subscriptionId} to ${state}`, e);
+            }
+        }
+    }
+
+    notificationReceived(subscriptionId, notification) {
+        if (this.notificationListener) {
+            try {
+                this.notificationListener(subscriptionId, notification);
+            } catch (e) {
+                console.error(`[ConnectionManager] Error handling notification for ${subscriptionId}`, e);
+            }
+        }
+    }
+}
+
+const makeConnectionId = async (subscription, user) => {
+    return (user)
+        ? hashCode(`${subscription.id}|${user.username}|${user.password}`)
+        : hashCode(`${subscription.id}`);
+}
+
+const connectionManager = new ConnectionManager();
+export default connectionManager;

web/src/app/Notifier.js

@@ -0,0 +1,82 @@
+import {formatMessage, formatTitleWithDefault, openUrl, playSound, topicShortUrl} from "./utils";
+import prefs from "./Prefs";
+import subscriptionManager from "./SubscriptionManager";
+import logo from "../img/ntfy.png";
+
+/**
+ * The notifier is responsible for displaying desktop notifications. Note that not all modern browsers
+ * support this; most importantly, all iOS browsers do not support window.Notification.
+ */
+class Notifier {
+    async notify(subscriptionId, notification, onClickFallback) {
+        if (!this.supported()) {
+            return;
+        }
+        const subscription = await subscriptionManager.get(subscriptionId);
+        const shouldNotify = await this.shouldNotify(subscription, notification);
+        if (!shouldNotify) {
+            return;
+        }
+        const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
+        const message = formatMessage(notification);
+        const title = formatTitleWithDefault(notification, shortUrl);
+
+        // Show notification
+        console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
+        const n = new Notification(title, {
+            body: message,
+            icon: logo
+        });
+        if (notification.click) {
+            n.onclick = (e) => openUrl(notification.click);
+        } else {
+            n.onclick = () => onClickFallback(subscription);
+        }
+
+        // Play sound
+        const sound = await prefs.sound();
+        if (sound && sound !== "none") {
+            try {
+                await playSound(sound);
+            } catch (e) {
+                console.log(`[Notifier, ${shortUrl}] Error playing audio`, e);
+            }
+        }
+    }
+
+    granted() {
+        return this.supported() && Notification.permission === 'granted';
+    }
+
+    maybeRequestPermission(cb) {
+        if (!this.supported()) {
+            cb(false);
+            return;
+        }
+        if (!this.granted()) {
+            Notification.requestPermission().then((permission) => {
+                const granted = permission === 'granted';
+                cb(granted);
+            });
+        }
+    }
+
+    async shouldNotify(subscription, notification) {
+        if (subscription.mutedUntil === 1) {
+            return false;
+        }
+        const priority = (notification.priority) ? notification.priority : 3;
+        const minPriority = await prefs.minPriority();
+        if (priority < minPriority) {
+            return false;
+        }
+        return true;
+    }
+
+    supported() {
+        return 'Notification' in window;
+    }
+}
+
+const notifier = new Notifier();
+export default notifier;

web/src/app/Poller.js

@@ -0,0 +1,61 @@
+import api from "./Api";
+import subscriptionManager from "./SubscriptionManager";
+
+const delayMillis = 8000; // 8 seconds
+const intervalMillis = 300000; // 5 minutes
+
+class Poller {
+    constructor() {
+        this.timer = null;
+    }
+
+    startWorker() {
+        if (this.timer !== null) {
+            return;
+        }
+        console.log(`[Poller] Starting worker`);
+        this.timer = setInterval(() => this.pollAll(), intervalMillis);
+        setTimeout(() => this.pollAll(), delayMillis);
+    }
+
+    async pollAll() {
+        console.log(`[Poller] Polling all subscriptions`);
+        const subscriptions = await subscriptionManager.all();
+        for (const s of subscriptions) {
+            try {
+                await this.poll(s);
+            } catch (e) {
+                console.log(`[Poller] Error polling ${s.id}`, e);
+            }
+        }
+    }
+
+    async poll(subscription) {
+        console.log(`[Poller] Polling ${subscription.id}`);
+
+        const since = subscription.last;
+        const notifications = await api.poll(subscription.baseUrl, subscription.topic, since);
+        if (!notifications || notifications.length === 0) {
+            console.log(`[Poller] No new notifications found for ${subscription.id}`);
+            return;
+        }
+        console.log(`[Poller] Adding ${notifications.length} notification(s) for ${subscription.id}`);
+        await subscriptionManager.addNotifications(subscription.id, notifications);
+    }
+
+    pollInBackground(subscription) {
+        const fn = async () => {
+            try {
+                await this.poll(subscription);
+            } catch (e) {
+                console.error(`[App] Error polling subscription ${subscription.id}`, e);
+            }
+        };
+        setTimeout(() => fn(), 0);
+    }
+}
+
+const poller = new Poller();
+poller.startWorker();
+
+export default poller;

web/src/app/Prefs.js

@@ -0,0 +1,33 @@
+import db from "./db";
+
+class Prefs {
+    async setSound(sound) {
+        db.prefs.put({key: 'sound', value: sound.toString()});
+    }
+
+    async sound() {
+        const sound = await db.prefs.get('sound');
+        return (sound) ? sound.value : "ding";
+    }
+
+    async setMinPriority(minPriority) {
+        db.prefs.put({key: 'minPriority', value: minPriority.toString()});
+    }
+
+    async minPriority() {
+        const minPriority = await db.prefs.get('minPriority');
+        return (minPriority) ? Number(minPriority.value) : 1;
+    }
+
+    async setDeleteAfter(deleteAfter) {
+        db.prefs.put({key:'deleteAfter', value: deleteAfter.toString()});
+    }
+
+    async deleteAfter() {
+        const deleteAfter = await db.prefs.get('deleteAfter');
+        return (deleteAfter) ? Number(deleteAfter.value) : 604800; // Default is one week
+    }
+}
+
+const prefs = new Prefs();
+export default prefs;

web/src/app/Pruner.js

@@ -0,0 +1,40 @@
+import prefs from "./Prefs";
+import subscriptionManager from "./SubscriptionManager";
+
+const delayMillis = 15000; // 15 seconds
+const intervalMillis = 1800000; // 30 minutes
+
+class Pruner {
+    constructor() {
+        this.timer = null;
+    }
+
+    startWorker() {
+        if (this.timer !== null) {
+            return;
+        }
+        console.log(`[Pruner] Starting worker`);
+        this.timer = setInterval(() => this.prune(), intervalMillis);
+        setTimeout(() => this.prune(), delayMillis);
+    }
+
+    async prune() {
+        const deleteAfterSeconds = await prefs.deleteAfter();
+        const pruneThresholdTimestamp = Math.round(Date.now()/1000) - deleteAfterSeconds;
+        if (deleteAfterSeconds === 0) {
+            console.log(`[Pruner] Pruning is disabled. Skipping.`);
+            return;
+        }
+        console.log(`[Pruner] Pruning notifications older than ${deleteAfterSeconds}s (timestamp ${pruneThresholdTimestamp})`);
+        try {
+            await subscriptionManager.pruneNotifications(pruneThresholdTimestamp);
+        } catch (e) {
+            console.log(`[Pruner] Error pruning old subscriptions`, e);
+        }
+    }
+}
+
+const pruner = new Pruner();
+pruner.startWorker();
+
+export default pruner;

web/src/app/SubscriptionManager.js

@@ -0,0 +1,125 @@
+import db from "./db";
+import {topicUrl} from "./utils";
+
+class SubscriptionManager {
+    /** All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining */
+    async all() {
+        const subscriptions = await db.subscriptions.toArray();
+        await Promise.all(subscriptions.map(async s => {
+            s.new = await db.notifications
+                .where({ subscriptionId: s.id, new: 1 })
+                .count();
+        }));
+        return subscriptions;
+    }
+
+    async get(subscriptionId) {
+        return await db.subscriptions.get(subscriptionId)
+    }
+
+    async add(baseUrl, topic) {
+        const subscription = {
+            id: topicUrl(baseUrl, topic),
+            baseUrl: baseUrl,
+            topic: topic,
+            mutedUntil: 0,
+            last: null
+        };
+        await db.subscriptions.put(subscription);
+        return subscription;
+    }
+
+    async updateState(subscriptionId, state) {
+        db.subscriptions.update(subscriptionId, { state: state });
+    }
+
+    async remove(subscriptionId) {
+        await db.subscriptions.delete(subscriptionId);
+        await db.notifications
+            .where({subscriptionId: subscriptionId})
+            .delete();
+    }
+
+    async first() {
+        return db.subscriptions.toCollection().first(); // May be undefined
+    }
+
+    async getNotifications(subscriptionId) {
+        // This is quite awkward, but it is the recommended approach as per the Dexie docs.
+        // It's actually fine, because the reading and filtering is quite fast. The rendering is what's
+        // killing performance. See  https://dexie.org/docs/Collection/Collection.offset()#a-better-paging-approach
+
+        return db.notifications
+            .orderBy("time") // Sort by time first
+            .filter(n => n.subscriptionId === subscriptionId)
+            .reverse()
+            .toArray();
+    }
+
+    async getAllNotifications() {
+        return db.notifications
+            .orderBy("time") // Efficient, see docs
+            .reverse()
+            .toArray();
+    }
+
+    /** Adds notification, or returns false if it already exists */
+    async addNotification(subscriptionId, notification) {
+        const exists = await db.notifications.get(notification.id);
+        if (exists) {
+            return false;
+        }
+        try {
+            notification.new = 1; // New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
+            await db.notifications.add({ ...notification, subscriptionId }); // FIXME consider put() for double tab
+            await db.subscriptions.update(subscriptionId, {
+                last: notification.id
+            });
+        } catch (e) {
+            console.error(`[SubscriptionManager] Error adding notification`, e);
+        }
+        return true;
+    }
+
+    /** Adds/replaces notifications, will not throw if they exist */
+    async addNotifications(subscriptionId, notifications) {
+        const notificationsWithSubscriptionId = notifications
+            .map(notification => ({ ...notification, subscriptionId }));
+        const lastNotificationId = notifications.at(-1).id;
+        await db.notifications.bulkPut(notificationsWithSubscriptionId);
+        await db.subscriptions.update(subscriptionId, {
+            last: lastNotificationId
+        });
+    }
+
+    async deleteNotification(notificationId) {
+        await db.notifications.delete(notificationId);
+    }
+
+    async deleteNotifications(subscriptionId) {
+        await db.notifications
+            .where({subscriptionId: subscriptionId})
+            .delete();
+    }
+
+    async markNotificationsRead(subscriptionId) {
+        await db.notifications
+            .where({subscriptionId: subscriptionId, new: 1})
+            .modify({new: 0});
+    }
+
+    async setMutedUntil(subscriptionId, mutedUntil) {
+        await db.subscriptions.update(subscriptionId, {
+            mutedUntil: mutedUntil
+        });
+    }
+
+    async pruneNotifications(thresholdTimestamp) {
+        await db.notifications
+            .where("time").below(thresholdTimestamp)
+            .delete();
+    }
+}
+
+const subscriptionManager = new SubscriptionManager();
+export default subscriptionManager;

web/src/app/UserManager.js

@@ -0,0 +1,22 @@
+import db from "./db";
+
+class UserManager {
+    async all() {
+        return db.users.toArray();
+    }
+
+    async get(baseUrl) {
+        return db.users.get(baseUrl);
+    }
+
+    async save(user) {
+        await db.users.put(user);
+    }
+
+    async delete(baseUrl) {
+        await db.users.delete(baseUrl);
+    }
+}
+
+const userManager = new UserManager();
+export default userManager;

web/src/app/config.js

@@ -0,0 +1,2 @@
+const config = window.config;
+export default config;

web/src/app/db.js

@@ -0,0 +1,18 @@
+import Dexie from 'dexie';
+
+// Uses Dexie.js
+// https://dexie.org/docs/API-Reference#quick-reference
+//
+// Notes:
+// - As per docs, we only declare the indexable columns, not all columns
+
+const db = new Dexie('ntfy');
+
+db.version(1).stores({
+    subscriptions: '&id,baseUrl',
+    notifications: '&id,subscriptionId,time,new,[subscriptionId+new]', // compound key for query performance
+    users: '&baseUrl,username',
+    prefs: '&key'
+});
+
+export default db;

web/src/app/utils.js

@@ -0,0 +1,193 @@
+import {rawEmojis} from "./emojis";
+import beep from "../sounds/beep.mp3";
+import juntos from "../sounds/juntos.mp3";
+import pristine from "../sounds/pristine.mp3";
+import ding from "../sounds/ding.mp3";
+import dadum from "../sounds/dadum.mp3";
+import pop from "../sounds/pop.mp3";
+import popSwoosh from "../sounds/pop-swoosh.mp3";
+import config from "./config";
+import {Base64} from 'js-base64';
+
+export const topicUrl = (baseUrl, topic) => `${baseUrl}/${topic}`;
+export const topicUrlWs = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/ws`
+    .replaceAll("https://", "wss://")
+    .replaceAll("http://", "ws://");
+export const topicUrlJson = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/json`;
+export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, topic)}?poll=1`;
+export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJson(baseUrl, topic)}?poll=1&since=${since}`;
+export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`;
+export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
+export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
+export const expandUrl = (url) => [`https://${url}`, `http://${url}`];
+export const expandSecureUrl = (url) => `https://${url}`;
+
+export const validUrl = (url) => {
+    return url.match(/^https?:\/\//);
+}
+
+export const validTopic = (topic) => {
+    if (disallowedTopic(topic)) {
+        return false;
+    }
+    return topic.match(/^([-_a-zA-Z0-9]{1,64})$/); // Regex must match Go & Android app!
+}
+
+export const disallowedTopic = (topic) => {
+    return config.disallowedTopics.includes(topic);
+}
+
+// Format emojis (see emoji.js)
+const emojis = {};
+rawEmojis.forEach(emoji => {
+    emoji.aliases.forEach(alias => {
+        emojis[alias] = emoji.emoji;
+    });
+});
+
+const toEmojis = (tags) => {
+    if (!tags) return [];
+    else return tags.filter(tag => tag in emojis).map(tag => emojis[tag]);
+}
+
+export const formatTitleWithDefault = (m, fallback) => {
+    if (m.title) {
+        return formatTitle(m);
+    }
+    return fallback;
+};
+
+export const formatTitle = (m) => {
+    const emojiList = toEmojis(m.tags);
+    if (emojiList.length > 0) {
+        return `${emojiList.join(" ")} ${m.title}`;
+    } else {
+        return m.title;
+    }
+};
+
+export const formatMessage = (m) => {
+    if (m.title) {
+        return m.message;
+    } else {
+        const emojiList = toEmojis(m.tags);
+        if (emojiList.length > 0) {
+            return `${emojiList.join(" ")} ${m.message}`;
+        } else {
+            return m.message;
+        }
+    }
+};
+
+export const unmatchedTags = (tags) => {
+    if (!tags) return [];
+    else return tags.filter(tag => !(tag in emojis));
+}
+
+
+export const maybeWithBasicAuth = (headers, user) => {
+    if (user) {
+        headers['Authorization'] = `Basic ${encodeBase64(`${user.username}:${user.password}`)}`;
+    }
+    return headers;
+}
+
+export const basicAuth = (username, password) => {
+    return `Basic ${encodeBase64(`${username}:${password}`)}`;
+}
+
+export const encodeBase64 = (s) => {
+    return Base64.encode(s);
+}
+
+export const encodeBase64Url = (s) => {
+    return Base64.encodeURI(s);
+}
+
+export const shuffle = (arr) => {
+    let j, x;
+    for (let index = arr.length - 1; index > 0; index--) {
+        j = Math.floor(Math.random() * (index + 1));
+        x = arr[index];
+        arr[index] = arr[j];
+        arr[j] = x;
+    }
+    return arr;
+}
+
+/** Non-cryptographic hash function, see https://stackoverflow.com/a/8831937/1440785 */
+export const hashCode = async (s) => {
+    let hash = 0;
+    for (let i = 0; i < s.length; i++) {
+        const char = s.charCodeAt(i);
+        hash = ((hash<<5)-hash)+char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}
+
+export const formatShortDateTime = (timestamp) => {
+    return new Intl.DateTimeFormat('default', {dateStyle: 'short', timeStyle: 'short'})
+        .format(new Date(timestamp * 1000));
+}
+
+export const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0) return '0 bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export const openUrl = (url) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+};
+
+export const sounds = {
+    "beep": beep,
+    "juntos": juntos,
+    "pristine": pristine,
+    "ding": ding,
+    "dadum": dadum,
+    "pop": pop,
+    "pop-swoosh": popSwoosh
+};
+
+export const playSound = async (sound) => {
+    const audio = new Audio(sounds[sound]);
+    return audio.play();
+};
+
+// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
+export async function* fetchLinesIterator(fileURL, headers) {
+    const utf8Decoder = new TextDecoder('utf-8');
+    const response = await fetch(fileURL, {
+        headers: headers
+    });
+    const reader = response.body.getReader();
+    let { value: chunk, done: readerDone } = await reader.read();
+    chunk = chunk ? utf8Decoder.decode(chunk) : '';
+
+    const re = /\n|\r|\r\n/gm;
+    let startIndex = 0;
+
+    for (;;) {
+        let result = re.exec(chunk);
+        if (!result) {
+            if (readerDone) {
+                break;
+            }
+            let remainder = chunk.substr(startIndex);
+            ({ value: chunk, done: readerDone } = await reader.read());
+            chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
+            startIndex = re.lastIndex = 0;
+            continue;
+        }
+        yield chunk.substring(startIndex, result.index);
+        startIndex = re.lastIndex;
+    }
+    if (startIndex < chunk.length) {
+        yield chunk.substr(startIndex); // last line didn't end in a newline char
+    }
+}

web/src/components/ActionBar.js

@@ -0,0 +1,194 @@
+import AppBar from "@mui/material/AppBar";
+import Navigation from "./Navigation";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import {useEffect, useRef, useState} from "react";
+import Box from "@mui/material/Box";
+import {formatShortDateTime, shuffle, topicShortUrl} from "../app/utils";
+import {useLocation, useNavigate} from "react-router-dom";
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+import api from "../app/Api";
+import routes from "./routes";
+import subscriptionManager from "../app/SubscriptionManager";
+import logo from "../img/ntfy.svg";
+
+const ActionBar = (props) => {
+    const location = useLocation();
+    let title = "ntfy";
+    if (props.selected) {
+        title = topicShortUrl(props.selected.baseUrl, props.selected.topic);
+    } else if (location.pathname === "/settings") {
+        title = "Settings";
+    }
+    return (
+        <AppBar position="fixed" sx={{
+            width: '100%',
+            zIndex: { sm: 1250 }, // > Navigation (1200), but < Dialog (1300)
+            ml: { sm: `${Navigation.width}px` }
+        }}>
+            <Toolbar sx={{pr: '24px'}}>
+                <IconButton
+                    color="inherit"
+                    edge="start"
+                    onClick={props.onMobileDrawerToggle}
+                    sx={{ mr: 2, display: { sm: 'none' } }}
+                >
+                    <MenuIcon />
+                </IconButton>
+                <Box component="img" src={logo} sx={{
+                    display: { xs: 'none', sm: 'block' },
+                    marginRight: '10px',
+                    height: '28px'
+                }}/>
+                <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+                    {title}
+                </Typography>
+                {props.selected &&
+                    <SettingsIcons
+                        subscription={props.selected}
+                        onUnsubscribe={props.onUnsubscribe}
+                    />}
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+// Originally from https://mui.com/components/menus/#MenuListComposition.js
+const SettingsIcons = (props) => {
+    const navigate = useNavigate();
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const subscription = props.subscription;
+
+    const handleToggleOpen = () => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+
+    const handleToggleMute = async () => {
+        const mutedUntil = (subscription.mutedUntil) ? 0 : 1; // Make this a timestamp in the future
+        await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
+    }
+
+    const handleClose = (event) => {
+        if (anchorRef.current && anchorRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+    };
+
+    const handleClearAll = async (event) => {
+        handleClose(event);
+        console.log(`[ActionBar] Deleting all notifications from ${props.subscription.id}`);
+        await subscriptionManager.deleteNotifications(props.subscription.id);
+    };
+
+    const handleUnsubscribe = async (event) => {
+        console.log(`[ActionBar] Unsubscribing from ${props.subscription.id}`);
+        handleClose(event);
+        await subscriptionManager.remove(props.subscription.id);
+        const newSelected = await subscriptionManager.first(); // May be undefined
+        if (newSelected) {
+            navigate(routes.forSubscription(newSelected));
+        } else {
+            navigate(routes.root);
+        }
+    };
+
+    const handleSendTestMessage = () => {
+        const baseUrl = props.subscription.baseUrl;
+        const topic = props.subscription.topic;
+        const tags = shuffle([
+            "grinning", "octopus", "upside_down_face", "palm_tree", "maple_leaf", "apple", "skull", "warning", "jack_o_lantern",
+            "de-server-1", "backups", "cron-script", "script-error", "phils-automation", "mouse", "go-rocks", "hi-ben"])
+                .slice(0, Math.round(Math.random() * 4));
+        const priority = shuffle([1, 2, 3, 4, 5])[0];
+        const title = shuffle([
+            "",
+            "",
+            "", // Higher chance of no title
+            "Oh my, another test message?",
+            "Titles are optional, did you know that?",
+            "ntfy is open source, and will always be free. Cool, right?",
+            "I don't really like apples",
+            "My favorite TV show is The Wire. You should watch it!"
+        ])[0];
+        const message = shuffle([
+            `Hello friend, this is a test notification from ntfy web. It's ${formatShortDateTime(Date.now())} right now. Is that early or late?`,
+            `So I heard you like ntfy? If that's true, go to GitHub and star it, or to the Play store and rate it. Thanks! Oh yeah, this is a test notification.`,
+            `It's almost like you want to hear what I have to say. I'm not even a machine. I'm just a sentence that Phil typed on a random Thursday.`,
+            `Alright then, it's ${formatShortDateTime(Date.now())} already. Boy oh boy, where did the time go? I hope you're alright, friend.`,
+            `There are nine million bicycles in Beijing That's a fact; It's a thing we can't deny. I wonder if that's true ...`,
+            `I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/annoucements.`,
+            `It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?`
+        ])[0];
+        api.publish(baseUrl, topic, message, title, priority, tags);
+        setOpen(false);
+    }
+
+    const handleListKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            setOpen(false);
+        } else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }
+
+    // return focus to the button when we transitioned from !open -> open
+    const prevOpen = useRef(open);
+    useEffect(() => {
+        if (prevOpen.current === true && open === false) {
+            anchorRef.current.focus();
+        }
+        prevOpen.current = open;
+    }, [open]);
+
+    return (
+        <>
+            <IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} sx={{marginRight: 0}}>
+                {subscription.mutedUntil ? <NotificationsOffIcon/> : <NotificationsIcon/>}
+            </IconButton>
+            <IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen}>
+                <MoreVertIcon/>
+            </IconButton>
+            <Popper
+                open={open}
+                anchorEl={anchorRef.current}
+                role={undefined}
+                placement="bottom-start"
+                transition
+                disablePortal
+            >
+                {({TransitionProps, placement}) => (
+                    <Grow
+                        {...TransitionProps}
+                        style={{transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom'}}
+                    >
+                        <Paper>
+                            <ClickAwayListener onClickAway={handleClose}>
+                                <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
+                                    <MenuItem onClick={handleSendTestMessage}>Send test notification</MenuItem>
+                                    <MenuItem onClick={handleClearAll}>Clear all notifications</MenuItem>
+                                    <MenuItem onClick={handleUnsubscribe}>Unsubscribe</MenuItem>
+                                </MenuList>
+                            </ClickAwayListener>
+                        </Paper>
+                    </Grow>
+                )}
+            </Popper>
+        </>
+    );
+};
+
+export default ActionBar;

web/src/components/App.js

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import Box from '@mui/material/Box';
+import {ThemeProvider} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Toolbar from '@mui/material/Toolbar';
+import Notifications from "./Notifications";
+import theme from "./theme";
+import Navigation from "./Navigation";
+import ActionBar from "./ActionBar";
+import notifier from "../app/Notifier";
+import Preferences from "./Preferences";
+import {useLiveQuery} from "dexie-react-hooks";
+import subscriptionManager from "../app/SubscriptionManager";
+import userManager from "../app/UserManager";
+import {BrowserRouter, Outlet, Route, Routes, useOutletContext, useParams} from "react-router-dom";
+import {expandUrl} from "../app/utils";
+import ErrorBoundary from "./ErrorBoundary";
+import routes from "./routes";
+import {useAutoSubscribe, useConnectionListeners, useLocalStorageMigration} from "./hooks";
+
+// TODO add drag and drop
+// TODO races when two tabs are open
+// TODO investigate service workers
+
+const App = () => {
+    return (
+        <BrowserRouter>
+            <ThemeProvider theme={theme}>
+                <CssBaseline/>
+                <ErrorBoundary>
+                    <Routes>
+                        <Route element={<Layout/>}>
+                            <Route path={routes.root} element={<AllSubscriptions/>}/>
+                            <Route path={routes.settings} element={<Preferences/>}/>
+                            <Route path={routes.subscription} element={<SingleSubscription/>}/>
+                            <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
+                        </Route>
+                    </Routes>
+                </ErrorBoundary>
+            </ThemeProvider>
+        </BrowserRouter>
+    );
+}
+
+const AllSubscriptions = () => {
+    const { subscriptions } = useOutletContext();
+    return <Notifications mode="all" subscriptions={subscriptions}/>;
+};
+
+const SingleSubscription = () => {
+    const { subscriptions, selected } = useOutletContext();
+    useAutoSubscribe(subscriptions, selected);
+    return <Notifications mode="one" subscription={selected}/>;
+};
+
+const Layout = () => {
+    const params = useParams();
+    const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
+    const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
+    const users = useLiveQuery(() => userManager.all());
+    const subscriptions = useLiveQuery(() => subscriptionManager.all());
+    const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
+    const [selected] = (subscriptions || []).filter(s => {
+        return (params.baseUrl && expandUrl(params.baseUrl).includes(s.baseUrl) && params.topic === s.topic)
+            || (window.location.origin === s.baseUrl && params.topic === s.topic)
+    });
+
+    useConnectionListeners(subscriptions, users);
+    useLocalStorageMigration();
+    useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
+
+    return (
+        <Box sx={{display: 'flex'}}>
+            <CssBaseline/>
+            <ActionBar
+                selected={selected}
+                onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
+            />
+            <Navigation
+                subscriptions={subscriptions}
+                selectedSubscription={selected}
+                notificationsGranted={notificationsGranted}
+                mobileDrawerOpen={mobileDrawerOpen}
+                onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
+                onNotificationGranted={setNotificationsGranted}
+            />
+            <Main>
+                <Toolbar/>
+                <Outlet context={{ subscriptions, selected }}/>
+            </Main>
+        </Box>
+    );
+}
+
+const Main = (props) => {
+    return (
+        <Box
+            id="main"
+            component="main"
+            sx={{
+                display: 'flex',
+                flexGrow: 1,
+                flexDirection: 'column',
+                padding: 3,
+                width: {sm: `calc(100% - ${Navigation.width}px)`},
+                height: '100vh',
+                overflow: 'auto',
+                backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
+            }}
+        >
+            {props.children}
+        </Box>
+    );
+};
+
+const updateTitle = (newNotificationsCount) => {
+    document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
+}
+
+export default App;

web/src/components/ErrorBoundary.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import StackTrace from "stacktrace-js";
+import {CircularProgress} from "@mui/material";
+import Button from "@mui/material/Button";
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: false,
+            originalStack: null,
+            niceStack: null
+        };
+    }
+
+    componentDidCatch(error, info) {
+        console.error("[ErrorBoundary] Error caught", error, info);
+
+        // Immediately render original stack trace
+        const prettierOriginalStack = info.componentStack
+            .trim()
+            .split("\n")
+            .map(line => `  at ${line}`)
+            .join("\n");
+        this.setState({
+            error: true,
+            originalStack: `${error.toString()}\n${prettierOriginalStack}`
+        });
+
+        // Fetch additional info and a better stack trace
+        StackTrace.fromError(error).then(stack => {
+            console.error("[ErrorBoundary] Stacktrace fetched", stack);
+            const niceStack = `${error.toString()}\n` + stack.map( el => `  at ${el.functionName} (${el.fileName}:${el.columnNumber}:${el.lineNumber})`).join("\n");
+            this.setState({ niceStack });
+        });
+    }
+
+    copyStack() {
+        let stack = "";
+        if (this.state.niceStack) {
+            stack += `${this.state.niceStack}\n\n`;
+        }
+        stack += `${this.state.originalStack}\n`;
+        navigator.clipboard.writeText(stack);
+    }
+
+    render() {
+        if (this.state.error) {
+            return (
+                <div style={{margin: '20px'}}>
+                    <h2>Oh no, ntfy crashed 😮</h2>
+                    <p>
+                        This should obviously not happen. Very sorry about this.<br/>
+                        If you have a minute, please <a href="https://github.com/binwiederhier/ntfy/issues">report this on GitHub</a>, or let us
+                        know via <a href="https://discord.gg/cT7ECsZj9w">Discord</a> or <a href="https://matrix.to/#/#ntfy:matrix.org">Matrix</a>.
+                    </p>
+                    <p>
+                        <Button variant="outlined" onClick={() => this.copyStack()}>Copy stack trace</Button>
+                    </p>
+                    <h3>Stack trace</h3>
+                    {this.state.niceStack
+                        ? <pre>{this.state.niceStack}</pre>
+                        : <><CircularProgress size="20px" sx={{verticalAlign: "text-bottom"}}/> Gather more info ...</>}
+                    <pre>{this.state.originalStack}</pre>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

web/src/components/Navigation.js

@@ -0,0 +1,213 @@
+import Drawer from "@mui/material/Drawer";
+import * as React from "react";
+import {useState} from "react";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
+import ListItemText from "@mui/material/ListItemText";
+import Toolbar from "@mui/material/Toolbar";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import SettingsIcon from "@mui/icons-material/Settings";
+import AddIcon from "@mui/icons-material/Add";
+import SubscribeDialog from "./SubscribeDialog";
+import {Alert, AlertTitle, Badge, CircularProgress, ListSubheader} from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import {openUrl, topicShortUrl, topicUrl} from "../app/utils";
+import routes from "./routes";
+import {ConnectionState} from "../app/Connection";
+import {useLocation, useNavigate} from "react-router-dom";
+import subscriptionManager from "../app/SubscriptionManager";
+import {ChatBubble, NotificationsOffOutlined} from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import notifier from "../app/Notifier";
+import config from "../app/config";
+import ArticleIcon from '@mui/icons-material/Article';
+
+const navWidth = 280;
+
+const Navigation = (props) => {
+    const navigationList = <NavList {...props}/>;
+    return (
+        <Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
+            {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
+            <Drawer
+                variant="temporary"
+                open={props.mobileDrawerOpen}
+                onClose={props.onMobileDrawerToggle}
+                ModalProps={{ keepMounted: true }} // Better open performance on mobile.
+                sx={{
+                    display: { xs: 'block', sm: 'none' },
+                    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
+                }}
+            >
+                {navigationList}
+            </Drawer>
+            {/* Big screen drawer; persistent, shown if screen is big */}
+            <Drawer
+                open
+                variant="permanent"
+                sx={{
+                    display: { xs: 'none', sm: 'block' },
+                    '& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
+                }}
+            >
+                {navigationList}
+            </Drawer>
+        </Box>
+    );
+};
+Navigation.width = navWidth;
+
+const NavList = (props) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [subscribeDialogKey, setSubscribeDialogKey] = useState(0);
+    const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
+
+    const handleSubscribeReset = () => {
+        setSubscribeDialogOpen(false);
+        setSubscribeDialogKey(prev => prev+1);
+    }
+
+    const handleSubscribeSubmit = (subscription) => {
+        console.log(`[Navigation] New subscription: ${subscription.id}`, subscription);
+        handleSubscribeReset();
+        navigate(routes.forSubscription(subscription));
+        handleRequestNotificationPermission();
+    }
+
+    const handleRequestNotificationPermission = () => {
+       notifier.maybeRequestPermission(granted => props.onNotificationGranted(granted))
+    };
+
+    const showSubscriptionsList = props.subscriptions?.length > 0;
+    const showNotificationNotSupportedBox = !notifier.supported();
+    const showNotificationGrantBox = notifier.supported() && props.subscriptions?.length > 0 && !props.notificationsGranted;
+
+    return (
+        <>
+            <Toolbar sx={{ display: { xs: 'none', sm: 'block' } }}/>
+            <List component="nav" sx={{ paddingTop: (showNotificationGrantBox || showNotificationNotSupportedBox) ? '0' : '' }}>
+                {showNotificationNotSupportedBox && <NotificationNotSupportedAlert/>}
+                {showNotificationGrantBox && <NotificationGrantAlert onRequestPermissionClick={handleRequestNotificationPermission}/>}
+                {!showSubscriptionsList &&
+                    <ListItemButton onClick={() => navigate(routes.root)} selected={location.pathname === config.appRoot}>
+                        <ListItemIcon><ChatBubble/></ListItemIcon>
+                        <ListItemText primary="All notifications"/>
+                    </ListItemButton>}
+                {showSubscriptionsList &&
+                    <>
+                        <ListSubheader>Subscribed topics</ListSubheader>
+                        <ListItemButton onClick={() => navigate(routes.root)} selected={location.pathname === config.appRoot}>
+                            <ListItemIcon><ChatBubble/></ListItemIcon>
+                            <ListItemText primary="All notifications"/>
+                        </ListItemButton>
+                        <SubscriptionList
+                            subscriptions={props.subscriptions}
+                            selectedSubscription={props.selectedSubscription}
+                        />
+                        <Divider sx={{my: 1}}/>
+                    </>}
+                <ListItemButton onClick={() => navigate(routes.settings)} selected={location.pathname === routes.settings}>
+                    <ListItemIcon><SettingsIcon/></ListItemIcon>
+                    <ListItemText primary="Settings"/>
+                </ListItemButton>
+                <ListItemButton onClick={() => openUrl("/docs")}>
+                    <ListItemIcon><ArticleIcon/></ListItemIcon>
+                    <ListItemText primary="Documentation"/>
+                </ListItemButton>
+                <ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
+                    <ListItemIcon><AddIcon/></ListItemIcon>
+                    <ListItemText primary="Add subscription"/>
+                </ListItemButton>
+            </List>
+            <SubscribeDialog
+                key={`subscribeDialog${subscribeDialogKey}`} // Resets dialog when canceled/closed
+                open={subscribeDialogOpen}
+                subscriptions={props.subscriptions}
+                onCancel={handleSubscribeReset}
+                onSuccess={handleSubscribeSubmit}
+            />
+        </>
+    );
+};
+
+const SubscriptionList = (props) => {
+    const sortedSubscriptions = props.subscriptions.sort( (a, b) => {
+        return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1;
+    });
+    return (
+        <>
+            {sortedSubscriptions.map(subscription =>
+                <SubscriptionItem
+                    key={subscription.id}
+                    subscription={subscription}
+                    selected={props.selectedSubscription && props.selectedSubscription.id === subscription.id}
+            />)}
+        </>
+    );
+}
+
+const SubscriptionItem = (props) => {
+    const navigate = useNavigate();
+    const subscription = props.subscription;
+    const iconBadge = (subscription.new <= 99) ? subscription.new : "99+";
+    const icon = (subscription.state === ConnectionState.Connecting)
+        ? <CircularProgress size="24px"/>
+        : <Badge badgeContent={iconBadge} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
+    const label = (subscription.baseUrl === window.location.origin)
+        ? subscription.topic
+        : topicShortUrl(subscription.baseUrl, subscription.topic);
+    const handleClick = async () => {
+        navigate(routes.forSubscription(subscription));
+        await subscriptionManager.markNotificationsRead(subscription.id);
+    };
+    return (
+        <ListItemButton onClick={handleClick} selected={props.selected}>
+            <ListItemIcon>{icon}</ListItemIcon>
+            <ListItemText primary={label}/>
+            {subscription.mutedUntil > 0 &&
+                <ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>}
+        </ListItemButton>
+    );
+};
+
+const NotificationGrantAlert = (props) => {
+    return (
+        <>
+            <Alert severity="warning" sx={{paddingTop: 2}}>
+                <AlertTitle>Notifications are disabled</AlertTitle>
+                <Typography gutterBottom>
+                    Grant your browser permission to display desktop notifications.
+                </Typography>
+                <Button
+                    sx={{float: 'right'}}
+                    color="inherit"
+                    size="small"
+                    onClick={props.onRequestPermissionClick}
+                >
+                    Grant now
+                </Button>
+            </Alert>
+            <Divider/>
+        </>
+    );
+};
+
+const NotificationNotSupportedAlert = () => {
+    return (
+        <>
+            <Alert severity="warning" sx={{paddingTop: 2}}>
+                <AlertTitle>Notifications not supported</AlertTitle>
+                <Typography gutterBottom>
+                    Notifications are not supported in your browser.
+                </Typography>
+            </Alert>
+            <Divider/>
+        </>
+    );
+};
+
+export default Navigation;

web/src/components/Notifications.js

@@ -0,0 +1,437 @@
+import Container from "@mui/material/Container";
+import {
+    ButtonBase,
+    CardActions,
+    CardContent,
+    CircularProgress,
+    Fade,
+    Link,
+    Modal,
+    Snackbar,
+    Stack,
+    Tooltip
+} from "@mui/material";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import {useEffect, useState} from "react";
+import {
+    formatBytes,
+    formatMessage,
+    formatShortDateTime,
+    formatTitle,
+    openUrl, shortUrl,
+    topicShortUrl,
+    unmatchedTags
+} from "../app/utils";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from '@mui/icons-material/Close';
+import {LightboxBackdrop, Paragraph, VerticallyCenteredContainer} from "./styles";
+import {useLiveQuery} from "dexie-react-hooks";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import subscriptionManager from "../app/SubscriptionManager";
+import InfiniteScroll from "react-infinite-scroll-component";
+import fileApp from "../img/file-app.svg";
+import fileAudio from "../img/file-audio.svg";
+import fileDocument from "../img/file-document.svg";
+import fileImage from "../img/file-image.svg";
+import fileVideo from "../img/file-video.svg";
+import priority1 from "../img/priority-1.svg";
+import priority2 from "../img/priority-2.svg";
+import priority4 from "../img/priority-4.svg";
+import priority5 from "../img/priority-5.svg";
+import logoOutline from "../img/ntfy-outline.svg";
+
+const Notifications = (props) => {
+    if (props.mode === "all") {
+        return (props.subscriptions) ? <AllSubscriptions subscriptions={props.subscriptions}/> : <Loading/>;
+    }
+    return (props.subscription) ? <SingleSubscription subscription={props.subscription}/> : <Loading/>;
+}
+
+const AllSubscriptions = (props) => {
+    const subscriptions = props.subscriptions;
+    const notifications = useLiveQuery(() => subscriptionManager.getAllNotifications(), []);
+    if (notifications === null || notifications === undefined) {
+        return <Loading/>;
+    } else if (subscriptions.length === 0) {
+        return <NoSubscriptions/>;
+    } else if (notifications.length === 0) {
+        return <NoNotificationsWithoutSubscription subscriptions={subscriptions}/>;
+    }
+    return <NotificationList key="all" notifications={notifications}/>;
+}
+
+const SingleSubscription = (props) => {
+    const subscription = props.subscription;
+    const notifications = useLiveQuery(() => subscriptionManager.getNotifications(subscription.id), [subscription]);
+    if (notifications === null || notifications === undefined) {
+        return <Loading/>;
+    } else if (notifications.length === 0) {
+        return <NoNotifications subscription={subscription}/>;
+    }
+    return <NotificationList id={subscription.id} notifications={notifications}/>;
+}
+
+const NotificationList = (props) => {
+    const pageSize = 20;
+    const notifications = props.notifications;
+    const [snackOpen, setSnackOpen] = useState(false);
+    const [maxCount, setMaxCount] = useState(pageSize);
+    const count = Math.min(notifications.length, maxCount);
+
+    useEffect(() => {
+        return () => {
+            setMaxCount(pageSize);
+            document.getElementById("main").scrollTo(0, 0);
+        }
+    }, [props.id]);
+
+    return (
+        <InfiniteScroll
+            dataLength={count}
+            next={() => setMaxCount(prev => prev + pageSize)}
+            hasMore={count < notifications.length}
+            loader={<>Loading ...</>}
+            scrollThreshold={0.7}
+            scrollableTarget="main"
+        >
+            <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
+                <Stack spacing={3}>
+                    {notifications.slice(0, count).map(notification =>
+                        <NotificationItem
+                            key={notification.id}
+                            notification={notification}
+                            onShowSnack={() => setSnackOpen(true)}
+                        />)}
+                    <Snackbar
+                        open={snackOpen}
+                        autoHideDuration={3000}
+                        onClose={() => setSnackOpen(false)}
+                        message="Copied to clipboard"
+                    />
+                </Stack>
+            </Container>
+        </InfiniteScroll>
+    );
+}
+
+const NotificationItem = (props) => {
+    const notification = props.notification;
+    const subscriptionId = notification.subscriptionId;
+    const attachment = notification.attachment;
+    const date = formatShortDateTime(notification.time);
+    const otherTags = unmatchedTags(notification.tags);
+    const tags = (otherTags.length > 0) ? otherTags.join(', ') : null;
+    const handleDelete = async () => {
+        console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`);
+        await subscriptionManager.deleteNotification(notification.id)
+    }
+    const handleCopy = (s) => {
+        navigator.clipboard.writeText(s);
+        props.onShowSnack();
+    };
+    const expired = attachment && attachment.expires && attachment.expires < Date.now()/1000;
+    const showAttachmentActions = attachment && !expired;
+    const showClickAction = notification.click;
+    const showActions = showAttachmentActions || showClickAction;
+    return (
+        <Card sx={{ minWidth: 275, padding: 1 }}>
+            <CardContent>
+                <IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
+                    <CloseIcon />
+                </IconButton>
+                <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                    {date}
+                    {[1,2,4,5].includes(notification.priority) &&
+                        <img
+                            src={priorityFiles[notification.priority]}
+                            alt={`Priority ${notification.priority}`}
+                            style={{ verticalAlign: 'bottom' }}
+                        />}
+                    {notification.new === 1 &&
+                        <svg style={{ width: '8px', height: '8px', marginLeft: '4px' }} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="50" cy="50" r="50" fill="#338574"/>
+                        </svg>}
+                </Typography>
+                {notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
+                <Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{autolink(formatMessage(notification))}</Typography>
+                {attachment && <Attachment attachment={attachment}/>}
+                {tags && <Typography sx={{ fontSize: 14 }} color="text.secondary">Tags: {tags}</Typography>}
+            </CardContent>
+            {showActions &&
+                <CardActions sx={{paddingTop: 0}}>
+                    {showAttachmentActions && <>
+                        <Tooltip title="Copy attachment URL to clipboard">
+                            <Button onClick={() => handleCopy(attachment.url)}>Copy URL</Button>
+                        </Tooltip>
+                        <Tooltip title={`Go to ${attachment.url}`}>
+                            <Button onClick={() => openUrl(attachment.url)}>Open attachment</Button>
+                        </Tooltip>
+                    </>}
+                    {showClickAction && <>
+                        <Tooltip title="Copy link URL to clipboard">
+                            <Button onClick={() => handleCopy(notification.click)}>Copy link</Button>
+                        </Tooltip>
+                        <Tooltip title={`Go to ${notification.click}`}>
+                            <Button onClick={() => openUrl(notification.click)}>Open link</Button>
+                        </Tooltip>
+                    </>}
+                </CardActions>}
+        </Card>
+    );
+}
+
+/**
+ * Replace links with <Link/> components; this is a combination of the genius function
+ * in [1] and the regex in [2].
+ *
+ * [1] https://github.com/facebook/react/issues/3386#issuecomment-78605760
+ * [2] https://github.com/bryanwoods/autolink-js/blob/master/autolink.js#L9
+ */
+const autolink = (s) => {
+    const parts = s.split(/(\bhttps?:\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|]\b)/gi);
+    for (let i = 1; i < parts.length; i += 2) {
+        parts[i] = <Link key={i} href={parts[i]} underline="hover" target="_blank" rel="noreferrer,noopener">{shortUrl(parts[i])}</Link>;
+    }
+    return <>{parts}</>;
+};
+
+const priorityFiles = {
+    1: priority1,
+    2: priority2,
+    4: priority4,
+    5: priority5
+};
+
+const Attachment = (props) => {
+    const attachment = props.attachment;
+    const expired = attachment.expires && attachment.expires < Date.now()/1000;
+    const expires = attachment.expires && attachment.expires > Date.now()/1000;
+    const displayableImage = !expired && attachment.type && attachment.type.startsWith("image/");
+
+    // Unexpired image
+    if (displayableImage) {
+        return <Image attachment={attachment}/>;
+    }
+
+    // Anything else: Show box
+    const infos = [];
+    if (attachment.size) {
+        infos.push(formatBytes(attachment.size));
+    }
+    if (expires) {
+        infos.push(`link expires ${formatShortDateTime(attachment.expires)}`);
+    }
+    if (expired) {
+        infos.push(`download link expired`);
+    }
+    const maybeInfoText = (infos.length > 0) ? <><br/>{infos.join(", ")}</> : null;
+
+    // If expired, just show infos without click target
+    if (expired) {
+        return (
+            <Box sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginTop: 2,
+                    padding: 1,
+                    borderRadius: '4px',
+            }}>
+                <Icon type={attachment.type}/>
+                <Typography variant="body2" sx={{ marginLeft: 1, textAlign: 'left', color: 'text.primary' }}>
+                    <b>{attachment.name}</b>
+                    {maybeInfoText}
+                </Typography>
+            </Box>
+        );
+    }
+
+    // Not expired
+    return (
+        <ButtonBase sx={{
+            marginTop: 2,
+        }}>
+            <Link
+                href={attachment.url}
+                target="_blank"
+                rel="noopener"
+                underline="none"
+                sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: 1,
+                        borderRadius: '4px',
+                        '&:hover': {
+                            backgroundColor: 'rgba(0, 0, 0, 0.05)'
+                        }
+                }}
+            >
+                <Icon type={attachment.type}/>
+                <Typography variant="body2" sx={{ marginLeft: 1, textAlign: 'left', color: 'text.primary' }}>
+                    <b>{attachment.name}</b>
+                    {maybeInfoText}
+                </Typography>
+            </Link>
+        </ButtonBase>
+    );
+};
+
+const Image = (props) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <Box
+                component="img"
+                src={props.attachment.url}
+                loading="lazy"
+                onClick={() => setOpen(true)}
+                sx={{
+                    marginTop: 2,
+                    borderRadius: '4px',
+                    boxShadow: 2,
+                    width: 1,
+                    maxHeight: '400px',
+                    objectFit: 'cover',
+                    cursor: 'pointer'
+                }}
+            />
+            <Modal
+                open={open}
+                onClose={() => setOpen(false)}
+                BackdropComponent={LightboxBackdrop}
+            >
+                <Fade in={open}>
+                    <Box
+                        component="img"
+                        src={props.attachment.url}
+                        loading="lazy"
+                        sx={{
+                            maxWidth: 1,
+                            maxHeight: 1,
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            padding: 4,
+                        }}
+                    />
+                </Fade>
+            </Modal>
+        </>
+    );
+}
+
+const Icon = (props) => {
+    const type = props.type;
+    let imageFile;
+    if (!type) {
+        imageFile = fileDocument;
+    } else if (type.startsWith('image/')) {
+        imageFile = fileImage;
+    } else if (type.startsWith('video/')) {
+        imageFile = fileVideo;
+    } else if (type.startsWith('audio/')) {
+        imageFile = fileAudio;
+    } else if (type === "application/vnd.android.package-archive") {
+        imageFile = fileApp;
+    } else {
+        imageFile = fileDocument;
+    }
+    return (
+        <Box
+            component="img"
+            src={imageFile}
+            loading="lazy"
+            sx={{
+                width: '28px',
+                height: '28px'
+            }}
+        />
+    );
+}
+
+const NoNotifications = (props) => {
+    const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic);
+    return (
+        <VerticallyCenteredContainer maxWidth="xs">
+            <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+                <img src={logoOutline} height="64" width="64" alt="No notifications"/><br />
+                You haven't received any notifications for this topic yet.
+            </Typography>
+            <Paragraph>
+                To send notifications to this topic, simply PUT or POST to the topic URL.
+            </Paragraph>
+            <Paragraph>
+                Example:<br/>
+                <tt>
+                    $ curl -d "Hi" {shortUrl}
+                </tt>
+            </Paragraph>
+            <Paragraph>
+                For more detailed instructions, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+                {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+            </Paragraph>
+        </VerticallyCenteredContainer>
+    );
+};
+
+const NoNotificationsWithoutSubscription = (props) => {
+    const subscription = props.subscriptions[0];
+    const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
+    return (
+        <VerticallyCenteredContainer maxWidth="xs">
+            <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+                <img src={logoOutline} height="64" width="64" alt="No notifications"/><br />
+                You haven't received any notifications.
+            </Typography>
+            <Paragraph>
+                To send notifications to a topic, simply PUT or POST to the topic URL. Here's
+                an example using one of your topics.
+            </Paragraph>
+            <Paragraph>
+                Example:<br/>
+                <tt>
+                    $ curl -d "Hi" {shortUrl}
+                </tt>
+            </Paragraph>
+            <Paragraph>
+                For more detailed instructions, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+                {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+            </Paragraph>
+        </VerticallyCenteredContainer>
+    );
+};
+
+const NoSubscriptions = () => {
+    return (
+        <VerticallyCenteredContainer maxWidth="xs">
+            <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+                <img src={logoOutline} height="64" width="64" alt="No topics"/><br />
+                It looks like you don't have any subscriptions yet.
+            </Typography>
+            <Paragraph>
+                Click the "Add subscription" link to create or subscribe to a topic. After that, you can send messages
+                via PUT or POST and you'll receive notifications here.
+            </Paragraph>
+            <Paragraph>
+                For more information, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+                {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+            </Paragraph>
+        </VerticallyCenteredContainer>
+    );
+};
+
+const Loading = () => {
+    return (
+        <VerticallyCenteredContainer>
+            <Typography variant="h5" color="text.secondary" align="center" sx={{ paddingBottom: 1 }}>
+                <CircularProgress disableShrink sx={{marginBottom: 1}}/><br />
+                Loading notifications ...
+            </Typography>
+        </VerticallyCenteredContainer>
+    );
+};
+
+export default Notifications;

web/src/components/Preferences.js

@@ -0,0 +1,365 @@
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {
+    CardActions,
+    CardContent,
+    FormControl,
+    Select,
+    Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    useMediaQuery
+} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import prefs from "../app/Prefs";
+import {Paragraph} from "./styles";
+import EditIcon from '@mui/icons-material/Edit';
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import Container from "@mui/material/Container";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Card from "@mui/material/Card";
+import Button from "@mui/material/Button";
+import {useLiveQuery} from "dexie-react-hooks";
+import theme from "./theme";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import userManager from "../app/UserManager";
+import {playSound} from "../app/utils";
+
+const Preferences = () => {
+    return (
+        <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
+            <Stack spacing={3}>
+                <Notifications/>
+                <Users/>
+            </Stack>
+        </Container>
+    );
+};
+
+const Notifications = () => {
+    return (
+        <Card sx={{p: 3}}>
+            <Typography variant="h5">
+                Notifications
+            </Typography>
+            <PrefGroup>
+                <Sound/>
+                <MinPriority/>
+                <DeleteAfter/>
+            </PrefGroup>
+        </Card>
+    );
+};
+
+
+const Sound = () => {
+    const sound = useLiveQuery(async () => prefs.sound());
+    const handleChange = async (ev) => {
+        await prefs.setSound(ev.target.value);
+    }
+    if (!sound) {
+        return null; // While loading
+    }
+    return (
+        <Pref title="Notification sound">
+            <div style={{ display: 'flex', width: '100%' }}>
+                <FormControl fullWidth variant="standard" sx={{ margin: 1 }}>
+                    <Select value={sound} onChange={handleChange}>
+                        <MenuItem value={"none"}>No sound</MenuItem>
+                        <MenuItem value={"ding"}>Ding</MenuItem>
+                        <MenuItem value={"juntos"}>Juntos</MenuItem>
+                        <MenuItem value={"pristine"}>Pristine</MenuItem>
+                        <MenuItem value={"dadum"}>Dadum</MenuItem>
+                        <MenuItem value={"pop"}>Pop</MenuItem>
+                        <MenuItem value={"pop-swoosh"}>Pop swoosh</MenuItem>
+                        <MenuItem value={"beep"}>Beep</MenuItem>
+                    </Select>
+                </FormControl>
+                <IconButton onClick={() => playSound(sound)} disabled={sound === "none"}>
+                    <PlayArrowIcon />
+                </IconButton>
+            </div>
+        </Pref>
+    )
+};
+
+const MinPriority = () => {
+    const minPriority = useLiveQuery(async () => prefs.minPriority());
+    const handleChange = async (ev) => {
+        await prefs.setMinPriority(ev.target.value);
+    }
+    if (!minPriority) {
+        return null; // While loading
+    }
+    return (
+        <Pref title="Minimum priority">
+            <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+                <Select value={minPriority} onChange={handleChange}>
+                    <MenuItem value={1}>Any priority</MenuItem>
+                    <MenuItem value={2}>Low priority and higher</MenuItem>
+                    <MenuItem value={3}>Default priority and higher</MenuItem>
+                    <MenuItem value={4}>High priority and higher</MenuItem>
+                    <MenuItem value={5}>Only max priority</MenuItem>
+                </Select>
+            </FormControl>
+        </Pref>
+    )
+};
+
+const DeleteAfter = () => {
+    const deleteAfter = useLiveQuery(async () => prefs.deleteAfter());
+    const handleChange = async (ev) => {
+        await prefs.setDeleteAfter(ev.target.value);
+    }
+    if (!deleteAfter) {
+        return null; // While loading
+    }
+    return (
+        <Pref title="Delete notifications">
+            <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+                <Select value={deleteAfter} onChange={handleChange}>
+                    <MenuItem value={0}>Never</MenuItem>
+                    <MenuItem value={10800}>After three hours</MenuItem>
+                    <MenuItem value={86400}>After one day</MenuItem>
+                    <MenuItem value={604800}>After one week</MenuItem>
+                    <MenuItem value={2592000}>After one month</MenuItem>
+                </Select>
+            </FormControl>
+        </Pref>
+    )
+};
+
+const PrefGroup = (props) => {
+    return (
+        <div style={{
+            display: 'flex',
+            flexWrap: 'wrap'
+        }}>
+            {props.children}
+        </div>
+    )
+};
+
+const Pref = (props) => {
+    return (
+        <>
+            <div style={{
+                flex: '1 0 30%',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                minHeight: '60px',
+                justifyContent: 'center'
+            }}>
+                <b>{props.title}</b>
+            </div>
+            <div style={{
+                flex: '1 0 calc(70% - 50px)',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                minHeight: '60px',
+                justifyContent: 'center'
+            }}>
+                {props.children}
+            </div>
+        </>
+    );
+};
+
+const Users = () => {
+    const [dialogKey, setDialogKey] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const users = useLiveQuery(() => userManager.all());
+    const handleAddClick = () => {
+        setDialogKey(prev => prev+1);
+        setDialogOpen(true);
+    };
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+    };
+    const handleDialogSubmit = async (user) => {
+        setDialogOpen(false);
+        try {
+            await userManager.save(user);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} added`);
+        } catch (e) {
+            console.log(`[Preferences] Error adding user.`, e);
+        }
+    };
+    return (
+        <Card sx={{ padding: 1 }}>
+            <CardContent>
+                <Typography variant="h5">
+                    Manage users
+                </Typography>
+                <Paragraph>
+                    Add/remove users for your protected topics here. Please note that username and password are
+                    stored in the browser's local storage.
+                </Paragraph>
+                {users?.length > 0 && <UserTable users={users}/>}
+            </CardContent>
+            <CardActions>
+                <Button onClick={handleAddClick}>Add user</Button>
+                <UserDialog
+                    key={`userAddDialog${dialogKey}`}
+                    open={dialogOpen}
+                    user={null}
+                    users={users}
+                    onCancel={handleDialogCancel}
+                    onSubmit={handleDialogSubmit}
+                />
+            </CardActions>
+        </Card>
+    );
+};
+
+const UserTable = (props) => {
+    const [dialogKey, setDialogKey] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [dialogUser, setDialogUser] = useState(null);
+    const handleEditClick = (user) => {
+        setDialogKey(prev => prev+1);
+        setDialogUser(user);
+        setDialogOpen(true);
+    };
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+    };
+    const handleDialogSubmit = async (user) => {
+        setDialogOpen(false);
+        try {
+            await userManager.save(user);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} updated`);
+        } catch (e) {
+            console.log(`[Preferences] Error updating user.`, e);
+        }
+    };
+    const handleDeleteClick = async (user) => {
+        try {
+            await userManager.delete(user.baseUrl);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} deleted`);
+        } catch (e) {
+            console.error(`[Preferences] Error deleting user for ${user.baseUrl}`, e);
+        }
+    };
+    return (
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>User</TableCell>
+                    <TableCell>Service URL</TableCell>
+                    <TableCell/>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {props.users?.map(user => (
+                    <TableRow
+                        key={user.baseUrl}
+                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                    >
+                        <TableCell component="th" scope="row">{user.username}</TableCell>
+                        <TableCell>{user.baseUrl}</TableCell>
+                        <TableCell align="right">
+                            <IconButton onClick={() => handleEditClick(user)}>
+                                <EditIcon/>
+                            </IconButton>
+                            <IconButton onClick={() => handleDeleteClick(user)}>
+                                <CloseIcon />
+                            </IconButton>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+            <UserDialog
+                key={`userEditDialog${dialogKey}`}
+                open={dialogOpen}
+                user={dialogUser}
+                users={props.users}
+                onCancel={handleDialogCancel}
+                onSubmit={handleDialogSubmit}
+            />
+        </Table>
+    );
+};
+
+const UserDialog = (props) => {
+    const [baseUrl, setBaseUrl] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const editMode = props.user !== null;
+    const addButtonEnabled = (() => {
+        if (editMode) {
+            return username.length > 0 && password.length > 0;
+        }
+        const baseUrlExists = props.users?.map(user => user.baseUrl).includes(baseUrl);
+        return !baseUrlExists && username.length > 0 && password.length > 0;
+    })();
+    const handleSubmit = async () => {
+        props.onSubmit({
+            baseUrl: baseUrl,
+            username: username,
+            password: password
+        })
+    };
+    useEffect(() => {
+        if (editMode) {
+            setBaseUrl(props.user.baseUrl);
+            setUsername(props.user.username);
+            setPassword(props.user.password);
+        }
+    }, [editMode, props.user]);
+    return (
+        <Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
+            <DialogTitle>{editMode ? "Edit user" : "Add user"}</DialogTitle>
+            <DialogContent>
+                {!editMode && <TextField
+                    autoFocus
+                    margin="dense"
+                    id="baseUrl"
+                    label="Service URL, e.g. https://ntfy.sh"
+                    value={baseUrl}
+                    onChange={ev => setBaseUrl(ev.target.value)}
+                    type="url"
+                    fullWidth
+                    variant="standard"
+                />}
+                <TextField
+                    autoFocus={editMode}
+                    margin="dense"
+                    id="username"
+                    label="Username, e.g. phil"
+                    value={username}
+                    onChange={ev => setUsername(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    id="password"
+                    label="Password"
+                    type="password"
+                    value={password}
+                    onChange={ev => setPassword(ev.target.value)}
+                    fullWidth
+                    variant="standard"
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onCancel}>Cancel</Button>
+                <Button onClick={handleSubmit} disabled={!addButtonEnabled}>{editMode ? "Save" : "Add"}</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default Preferences;

web/src/components/SubscribeDialog.js

@@ -0,0 +1,214 @@
+import * as React from 'react';
+import {useState} from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material";
+import theme from "./theme";
+import api from "../app/Api";
+import {topicUrl, validTopic, validUrl} from "../app/utils";
+import Box from "@mui/material/Box";
+import userManager from "../app/UserManager";
+import subscriptionManager from "../app/SubscriptionManager";
+import poller from "../app/Poller";
+
+const publicBaseUrl = "https://ntfy.sh";
+
+const SubscribeDialog = (props) => {
+    const [baseUrl, setBaseUrl] = useState("");
+    const [topic, setTopic] = useState("");
+    const [showLoginPage, setShowLoginPage] = useState(false);
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const handleSuccess = async () => {
+        const actualBaseUrl = (baseUrl) ? baseUrl : window.location.origin;
+        const subscription = await subscriptionManager.add(actualBaseUrl, topic);
+        poller.pollInBackground(subscription); // Dangle!
+        props.onSuccess(subscription);
+    }
+    return (
+        <Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
+            {!showLoginPage && <SubscribePage
+                baseUrl={baseUrl}
+                setBaseUrl={setBaseUrl}
+                topic={topic}
+                setTopic={setTopic}
+                subscriptions={props.subscriptions}
+                onCancel={props.onCancel}
+                onNeedsLogin={() => setShowLoginPage(true)}
+                onSuccess={handleSuccess}
+            />}
+            {showLoginPage && <LoginPage
+                baseUrl={baseUrl}
+                topic={topic}
+                onBack={() => setShowLoginPage(false)}
+                onSuccess={handleSuccess}
+            />}
+        </Dialog>
+    );
+};
+
+const SubscribePage = (props) => {
+    const [anotherServerVisible, setAnotherServerVisible] = useState(false);
+    const [errorText, setErrorText] = useState("");
+    const baseUrl = (anotherServerVisible) ? props.baseUrl : window.location.origin;
+    const topic = props.topic;
+    const existingTopicUrls = props.subscriptions.map(s => topicUrl(s.baseUrl, s.topic));
+    const existingBaseUrls = Array.from(new Set([publicBaseUrl, ...props.subscriptions.map(s => s.baseUrl)]))
+        .filter(s => s !== window.location.origin);
+    const handleSubscribe = async () => {
+        const user = await userManager.get(baseUrl); // May be undefined
+        const username = (user) ? user.username : "anonymous";
+        const success = await api.auth(baseUrl, topic, user);
+        if (!success) {
+            console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
+            if (user) {
+                setErrorText(`User ${username} not authorized`);
+                return;
+            } else {
+                props.onNeedsLogin();
+                return;
+            }
+        }
+        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
+        props.onSuccess();
+    };
+    const handleUseAnotherChanged = (e) => {
+        props.setBaseUrl("");
+        setAnotherServerVisible(e.target.checked);
+    };
+    const subscribeButtonEnabled = (() => {
+        if (anotherServerVisible) {
+            const isExistingTopicUrl = existingTopicUrls.includes(topicUrl(baseUrl, topic));
+            return validTopic(topic) && validUrl(baseUrl) && !isExistingTopicUrl;
+        } else {
+            const isExistingTopicUrl = existingTopicUrls.includes(topicUrl(window.location.origin, topic));
+            return validTopic(topic) && !isExistingTopicUrl;
+        }
+    })();
+    return (
+        <>
+            <DialogTitle>Subscribe to topic</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    Topics may not be password-protected, so choose a name that's not easy to guess.
+                    Once subscribed, you can PUT/POST notifications.
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="topic"
+                    placeholder="Topic name, e.g. phil_alerts"
+                    inputProps={{ maxLength: 64 }}
+                    value={props.topic}
+                    onChange={ev => props.setTopic(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <FormControlLabel
+                    sx={{pt: 1}}
+                    control={<Checkbox onChange={handleUseAnotherChanged}/>}
+                    label="Use another server" />
+                {anotherServerVisible && <Autocomplete
+                    freeSolo
+                    options={existingBaseUrls}
+                    sx={{ maxWidth: 400 }}
+                    inputValue={props.baseUrl}
+                    onInputChange={(ev, newVal) => props.setBaseUrl(newVal)}
+                    renderInput={ (params) =>
+                        <TextField {...params} placeholder={window.location.origin} variant="standard"/>
+                    }
+                />}
+            </DialogContent>
+            <DialogFooter status={errorText}>
+                <Button onClick={props.onCancel}>Cancel</Button>
+                <Button onClick={handleSubscribe} disabled={!subscribeButtonEnabled}>Subscribe</Button>
+            </DialogFooter>
+        </>
+    );
+};
+
+const LoginPage = (props) => {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [errorText, setErrorText] = useState("");
+    const baseUrl = (props.baseUrl) ? props.baseUrl : window.location.origin;
+    const topic = props.topic;
+    const handleLogin = async () => {
+        const user = {baseUrl, username, password};
+        const success = await api.auth(baseUrl, topic, user);
+        if (!success) {
+            console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
+            setErrorText(`User ${username} not authorized`);
+            return;
+        }
+        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
+        await userManager.save(user);
+        props.onSuccess();
+    };
+    return (
+        <>
+            <DialogTitle>Login required</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    This topic is password-protected. Please enter username and
+                    password to subscribe.
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="username"
+                    label="Username, e.g. phil"
+                    value={username}
+                    onChange={ev => setUsername(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    id="password"
+                    label="Password"
+                    type="password"
+                    value={password}
+                    onChange={ev => setPassword(ev.target.value)}
+                    fullWidth
+                    variant="standard"
+                />
+            </DialogContent>
+            <DialogFooter status={errorText}>
+                <Button onClick={props.onBack}>Back</Button>
+                <Button onClick={handleLogin}>Login</Button>
+            </DialogFooter>
+        </>
+    );
+};
+
+const DialogFooter = (props) => {
+    return (
+        <Box sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingLeft: '24px',
+            paddingTop: '8px 24px',
+            paddingBottom: '8px 24px',
+        }}>
+            <DialogContentText sx={{
+                margin: '0px',
+                paddingTop: '8px',
+            }}>
+                {props.status}
+            </DialogContentText>
+            <DialogActions>
+                {props.children}
+            </DialogActions>
+        </Box>
+    );
+};
+
+export default SubscribeDialog;

web/src/components/hooks.js

@@ -0,0 +1,95 @@
+import {useNavigate, useParams} from "react-router-dom";
+import {useEffect, useState} from "react";
+import subscriptionManager from "../app/SubscriptionManager";
+import {disallowedTopic, expandSecureUrl, topicUrl} from "../app/utils";
+import notifier from "../app/Notifier";
+import routes from "./routes";
+import connectionManager from "../app/ConnectionManager";
+import poller from "../app/Poller";
+
+/**
+ * Wire connectionManager and subscriptionManager so that subscriptions are updated when the connection
+ * state changes. Conversely, when the subscription changes, the connection is refreshed (which may lead
+ * to the connection being re-established).
+ */
+export const useConnectionListeners = (subscriptions, users) => {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+            const handleNotification = async (subscriptionId, notification) => {
+                const added = await subscriptionManager.addNotification(subscriptionId, notification);
+                if (added) {
+                    const defaultClickAction = (subscription) => navigate(routes.forSubscription(subscription));
+                    await notifier.notify(subscriptionId, notification, defaultClickAction)
+                }
+            };
+            connectionManager.registerStateListener(subscriptionManager.updateState);
+            connectionManager.registerNotificationListener(handleNotification);
+            return () => {
+                connectionManager.resetStateListener();
+                connectionManager.resetNotificationListener();
+            }
+        },
+        // We have to disable dep checking for "navigate". This is fine, it never changes.
+        // eslint-disable-next-line
+        []
+    );
+
+    useEffect(() => {
+        connectionManager.refresh(subscriptions, users); // Dangle
+    }, [subscriptions, users]);
+};
+
+/**
+ * Automatically adds a subscription if we navigate to a page that has not been subscribed to.
+ * This will only be run once after the initial page load.
+ */
+export const useAutoSubscribe = (subscriptions, selected) => {
+    const [hasRun, setHasRun] = useState(false);
+    const params = useParams();
+
+    useEffect(() => {
+        const loaded = subscriptions !== null && subscriptions !== undefined;
+        if (!loaded || hasRun) {
+            return;
+        }
+        setHasRun(true);
+        const eligible = params.topic && !selected && !disallowedTopic(params.topic);
+        if (eligible) {
+            const baseUrl = (params.baseUrl) ? expandSecureUrl(params.baseUrl) : window.location.origin;
+            console.log(`[App] Auto-subscribing to ${topicUrl(baseUrl, params.topic)}`);
+            (async () => {
+                const subscription = await subscriptionManager.add(baseUrl, params.topic);
+                poller.pollInBackground(subscription); // Dangle!
+            })();
+        }
+    }, [params, subscriptions, selected, hasRun]);
+};
+
+/**
+ * Migrate the 'topics' item in localStorage to the subscriptionManager. This is only done once to migrate away
+ * from the old web UI.
+ */
+export const useLocalStorageMigration = () => {
+    const [hasRun, setHasRun] = useState(false);
+    useEffect(() => {
+        if (hasRun) {
+            return;
+        }
+        const topicsStr = localStorage.getItem("topics");
+        if (topicsStr) {
+            const topics = JSON.parse(topicsStr).filter(topic => topic !== "");
+            if (topics.length > 0) {
+                (async () => {
+                    for (const topic of topics) {
+                        const baseUrl = window.location.origin;
+                        const subscription = await subscriptionManager.add(baseUrl, topic);
+                        poller.pollInBackground(subscription); // Dangle!
+                    }
+                    localStorage.removeItem("topics");
+                })();
+            }
+        }
+        setHasRun(true);
+    }, []);
+}

web/src/components/routes.js

@@ -0,0 +1,16 @@
+import config from "../app/config";
+import {shortUrl} from "../app/utils";
+
+const routes = {
+    root: config.appRoot,
+    settings: "/settings",
+    subscription: "/:topic",
+    subscriptionExternal: "/:baseUrl/:topic",
+    forSubscription: (subscription) => {
+        if (subscription.baseUrl !== window.location.origin) {
+            return `/${shortUrl(subscription.baseUrl)}/${subscription.topic}`;
+        }
+        return `/${subscription.topic}`;
+    }
+};
+export default routes;

web/src/components/styles.js

@@ -0,0 +1,22 @@
+import Typography from "@mui/material/Typography";
+import theme from "./theme";
+import Container from "@mui/material/Container";
+import {Backdrop, styled} from "@mui/material";
+
+export const Paragraph = styled(Typography)({
+  paddingTop: 8,
+  paddingBottom: 8,
+});
+
+export const VerticallyCenteredContainer = styled(Container)({
+  display: 'flex',
+  flexGrow: 1,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignContent: 'center',
+  color: theme.palette.text.primary
+});
+
+export const LightboxBackdrop = styled(Backdrop)({
+  backgroundColor: 'rgba(0, 0, 0, 0.8)' // was: 0.5
+});

web/src/components/theme.js

@@ -0,0 +1,36 @@
+import { red } from '@mui/material/colors';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#338574',
+    },
+    secondary: {
+      main: '#6cead0',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  components: {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: '36px',
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          ':last-child': {
+            paddingBottom: '16px'
+          }
+        }
+      }
+    }
+  },
+});
+
+export default theme;

web/src/img/file-app.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#555"><path d="M0 0h24v24H0V0z" fill="none"/><path d="m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"/></svg>

web/src/img/file-audio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#B300FF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="m12 3 .01 10.55c-.59-.34-1.27-.55-2-.55a4.001 4.001 0 1 0 0 8c2.22 0 3.99-1.79 3.99-4V7h4V3h-6zm-1.99 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>

web/src/img/file-document.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#00ADFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>