Fix typo

Examples and anchors on website
Anchors in web UI
2021-11-18 13:14:55 -05:00 · 2021-11-18 09:22:33 -05:00 · 2021-11-17 20:50:47 -05:00 · 2021-11-16 13:11:31 -05:00 · 2021-11-15 07:56:58 -05:00 · 2021-11-12 14:43:32 -05:00
25 changed files with 1016 additions and 303 deletions
--- a/README.md
+++ b/README.md
@@ -1,14 +1,22 @@
 ![ntfy](server/static/img/ntfy.png)
-# ntfy - simple HTTP-based pub-sub
+# ntfy.sh | simple HTTP-based pub-sub
-**ntfy** (pronounce: *notify*) is a simple HTTP-based [pub-sub](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) notification service.
+**Ntfy** (pronounce: *notify*) is a simple HTTP-based [pub-sub](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) notification service.
 It allows you to **send notifications to your phone or desktop via scripts** from any computer, entirely **without signup or cost**.
 It's also open source (as you can plainly see) if you want to run your own.
 I run a free version of it at **[ntfy.sh](https://ntfy.sh)**, and there's an [Android app](https://play.google.com/store/apps/details?id=io.heckel.ntfy)
 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">
 </p>
 ## Usage
 ### Publishing messages
@@ -129,13 +137,13 @@ sudo apt install ntfy
 **Debian/Ubuntu** (*manual install*)**:**
 ```bash
 sudo apt install tmux
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.2.4/ntfy_1.2.4_amd64.deb
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.0/ntfy_1.3.0_amd64.deb
-dpkg -i ntfy_1.2.4_amd64.deb
+dpkg -i ntfy_1.4.0_amd64.deb
 ```
 **Fedora/RHEL/CentOS:**
 ```bash
-rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.2.4/ntfy_1.2.4_amd64.rpm
+rpm -ivh https://github.com/binwiederhier/ntfy/releases/download/v1.4.0/ntfy_1.3.0_amd64.rpm
 ```
 **Docker:**
@@ -150,8 +158,8 @@ go get -u heckel.io/ntfy
 **Manual install** (*any x86_64-based Linux*)**:**
 ```bash
-wget https://github.com/binwiederhier/ntfy/releases/download/v1.2.4/ntfy_1.2.4_linux_x86_64.tar.gz
+wget https://github.com/binwiederhier/ntfy/releases/download/v1.4.0/ntfy_1.3.0_linux_x86_64.tar.gz
-sudo tar -C /usr/bin -zxf ntfy_1.2.4_linux_x86_64.tar.gz ntfy
+sudo tar -C /usr/bin -zxf ntfy_1.4.0_linux_x86_64.tar.gz ntfy
 ./ntfy
 ```
@@ -183,3 +191,4 @@ Third party libraries and resources:
 * [GoReleaser](https://goreleaser.com/) (MIT) is used to create releases
 * [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
 * [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox) 
--- a/examples/linux-desktop-notifications/notify-desktop.sh
+++ b/examples/linux-desktop-notifications/notify-desktop.sh
--- a/examples/ssh-login-alert/ntfy-ssh-login.sh
+++ b/examples/ssh-login-alert/ntfy-ssh-login.sh
@@ -0,0 +1,7 @@
 #!/bin/bash
 # This is a PAM script hook that shows how to notify you when
 # somebody logs into your server. Place at /usr/local/bin/ntfy-ssh-login.sh (with chmod +x!).
 if [ "${PAM_TYPE}" = "open_session" ]; then
  echo -en "\u26A0\uFE0F SSH login to $(hostname): ${PAM_USER} from ${PAM_RHOST}" | curl -T- ntfy.sh/alerts
 fi
--- a/examples/ssh-login-alert/pam_sshd
+++ b/examples/ssh-login-alert/pam_sshd
@@ -0,0 +1,8 @@
 # PAM config file snippet
 #
 # Put this snippet AT THE END of the file /etc/pam.d/sshd
 # See https://geekthis.net/post/run-scripts-after-ssh-authentication/ for details.
 # (lots of stuff here ...)
 session optional pam_exec.so /usr/local/bin/ntfy-ssh-login.sh
--- a/examples/web-example-eventsource/example-ssh.html
+++ b/examples/web-example-eventsource/example-ssh.html
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <title>ntfy.sh: EventSource Example</title>
    <meta name="robots" content="noindex, nofollow" />
    <style>
        body { font-size: 1.2em; line-height: 130%; }
        #events { font-family: monospace; }
@@ -13,6 +14,7 @@
 <p>
    This is an example showing how to use <a href="https://ntfy.sh">ntfy.sh</a> with
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>.<br/>
    This example doesn't need a server. You can just save the HTML page and run it from anywhere.
 </p>
 <button id="publishButton">Send test notification</button>
 <p><b>Log:</b></p>
--- a/server/cache.go
+++ b/server/cache.go
@@ -7,7 +7,7 @@ import (
 type cache interface {
 	AddMessage(m *message) error
-	Messages(topic string, since time.Time) ([]*message, error)
+	Messages(topic string, since sinceTime) ([]*message, error)
 	MessageCount(topic string) (int, error)
 	Topics() (map[string]*topic, error)
 	Prune(keep time.Duration) error
--- a/server/cache_mem.go
+++ b/server/cache_mem.go
@@ -29,7 +29,7 @@ func (s *memCache) AddMessage(m *message) error {
 	return nil
 }
-func (s *memCache) Messages(topic string, since time.Time) ([]*message, error) {
+func (s *memCache) Messages(topic string, since sinceTime) ([]*message, error) {
 	s.mu.Lock()
 	defer s.mu.Unlock()
 	if _, ok := s.messages[topic]; !ok {
@@ -38,7 +38,7 @@ func (s *memCache) Messages(topic string, since time.Time) ([]*message, error) {
 	messages := make([]*message, 0) // copy!
 	for _, m := range s.messages[topic] {
 		msgTime := time.Unix(m.Time, 0)
-		if msgTime == since || msgTime.After(since) {
+		if msgTime == since.Time() || msgTime.After(since.Time()) {
 			messages = append(messages, m)
 		}
 	}
--- a/server/cache_sqlite.go
+++ b/server/cache_sqlite.go
@@ -55,8 +55,8 @@ func (c *sqliteCache) AddMessage(m *message) error {
 	return err
 }
-func (c *sqliteCache) Messages(topic string, since time.Time) ([]*message, error) {
+func (c *sqliteCache) Messages(topic string, since sinceTime) ([]*message, error) {
-	rows, err := c.db.Query(selectMessagesSinceTimeQuery, topic, since.Unix())
+	rows, err := c.db.Query(selectMessagesSinceTimeQuery, topic, since.Time().Unix())
 	if err != nil {
 		return nil, err
 	}
--- a/server/example.html
+++ b/server/example.html
@@ -0,0 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>ntfy.sh: EventSource Example</title>
    <meta name="robots" content="noindex, nofollow" />
    <style>
        body { font-size: 1.2em; line-height: 130%; }
        #events { font-family: monospace; }
    </style>
 </head>
 <body>
 <h1>ntfy.sh: EventSource Example</h1>
 <p>
    This is an example showing how to use <a href="https://ntfy.sh">ntfy.sh</a> with
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>.<br/>
    This example doesn't need a server. You can just save the HTML page and run it from anywhere.
 </p>
 <button id="publishButton">Send test notification</button>
 <p><b>Log:</b></p>
 <div id="events"></div>
 <script type="text/javascript">
    const publishURL = `https://ntfy.sh/example`;
    const subscribeURL = `https://ntfy.sh/example/sse`;
    const events = document.getElementById('events');
    const eventSource = new EventSource(subscribeURL);
    // Publish button
    document.getElementById("publishButton").onclick = () => {
        fetch(publishURL, {
            method: 'POST', // works with PUT as well, though that sends an OPTIONS request too!
            body: `It is ${new Date().toString()}. This is a test.`
        })
    };
    // Incoming events
    eventSource.onopen = () => {
        let event = document.createElement('div');
        event.innerHTML = `EventSource connected to ${subscribeURL}`;
        events.appendChild(event);
    };
    eventSource.onerror = (e) => {
        let event = document.createElement('div');
        event.innerHTML = `EventSource error: Failed to connect to ${subscribeURL}`;
        events.appendChild(event);
    };
    eventSource.onmessage = (e) => {
        let event = document.createElement('div');
        event.innerHTML = e.data;
        events.appendChild(event);
    };
 </script>
 </body>
 </html>
--- a/server/index.gohtml
+++ b/server/index.gohtml
@@ -0,0 +1,353 @@
 {{- /*gotype: heckel.io/ntfy/server.indexPage*/ -}}
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>ntfy.sh | simple HTTP-based pub-sub</title>
    <link rel="stylesheet" href="static/css/app.css" type="text/css">
    <!-- 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="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.sh" />
    <meta property="og:title" content="ntfy.sh | simple HTTP-based pub-sub" />
    <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}}
 </head>
 <body>
 <div id="main"{{if .Topic}} style="display: none"{{end}}>
    <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/>ntfy.sh | simple HTTP-based pub-sub</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.
        It allows you to send notifications <a href="#subscribe-phone">to your phone</a> or desktop via scripts from any computer,
        entirely <b>without signup or cost</b>. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
    </p>
    <div id="screenshots">
        <a href="static/img/screenshot-curl.png"><img src="static/img/screenshot-curl.png"/></a>
        <a href="static/img/screenshot-web-detail.png"><img src="static/img/screenshot-web-detail.png"/></a>
        <span class="nowrap">
            <a href="static/img/screenshot-phone-main.jpg"><img src="static/img/screenshot-phone-main.jpg"/></a>
            <a href="static/img/screenshot-phone-detail.jpg"><img src="static/img/screenshot-phone-detail.jpg"/></a>
            <a href="static/img/screenshot-phone-notification.jpg"><img src="static/img/screenshot-phone-notification.jpg"/></a>
        </span>
    </div>
    <p>
        There are many ways to use Ntfy. You can send yourself messages for all sorts of things: When a long process finishes or fails,
        or to notify yourself when somebody logs into your server(s). Or you may want to use it in your own app to distribute messages to subscribed clients.
        Endless possibilities 😀. Be sure to check out the <a href="#examples">examples below</a>.
    </p>
    <h2 id="publish" class="anchor">Publishing messages</h2>
    <p>
        Publishing messages can be done via PUT or POST. Topics are created on the fly by subscribing or publishing to them.
        Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable.
    </p>
    <p class="smallMarginBottom">
        Here's an example showing how to publish a message using <tt>curl</tt> (via POST):
    </p>
    <code>
        curl -d "Backup successful 😀" ntfy.sh/mytopic
    </code>
    <p class="smallMarginBottom">
        And another one using PUT:
    </p>
    <code>
        echo -en "\u26A0\uFE0F Unauthorized login" | curl -sT- ntfy.sh/mytopic
    </code>
    <p class="smallMarginBottom">
        Here's an example in JS with <tt>fetch()</tt> (see <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">full example</a>):
    </p>
    <code>
        fetch('https://ntfy.sh/mytopic', {<br/>
        &nbsp;&nbsp;method: 'POST', // PUT works too<br/>
        &nbsp;&nbsp;body: 'Hello from the other side.'<br/>
        })
    </code>
    <h2 id="subscribe" class="anchor">Subscribe to a topic</h2>
    <p>
        You can create and subscribe to a topic either in this web UI, or in your own app by subscribing to an
        <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>, a JSON feed, or raw feed.
    </p>
    <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. Once subscribed, you can publish messages via PUT/POST.
        </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-phone" class="anchor">Subscribe from your phone</h3>
    <p>
        You can use the <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">Ntfy Android App</a>
        to receive notifications directly on your phone. Just like the server, this app is also <a href="https://github.com/binwiederhier/ntfy-android">open source</a>.
        Since I don't have an iPhone or a Mac, I didn't make an iOS app yet. I'd be awesome if <a href="https://github.com/binwiederhier/ntfy/issues/4">someone else could help out</a>.
    </p>
    <p>
        <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy"><img src="static/img/badge-googleplay.png"></a>
        <a href="https://github.com/binwiederhier/ntfy/issues/4"><img src="static/img/badge-appstore.png"></a>
    </p>
    <h3 id="subscribe-api" class="anchor">Subscribe via your app, or via the CLI</h3>
    <p class="smallMarginBottom">
        Using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a> in JS, you can consume
        notifications like this (see <a href="example.html">live example</a>):
    </p>
    <code>
        const eventSource = new EventSource('https://ntfy.sh/mytopic/sse');<br/>
        eventSource.onmessage = (e) => {<br/>
        &nbsp;&nbsp;// Do something with e.data<br/>
        };
    </code>
    <p class="smallMarginBottom">
        You can also use the same <tt>/sse</tt> endpoint via <tt>curl</tt> or any other HTTP library:
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/sse<br/>
        event: open<br/>
        data: {"id":"weSj9RtNkj","time":1635528898,"event":"open","topic":"mytopic"}<br/><br/>
        data: {"id":"p0M5y6gcCY","time":1635528909,"event":"message","topic":"mytopic","message":"Hi!"}<br/><br/>
        event: keepalive<br/>
        data: {"id":"VNxNIg5fpt","time":1635528928,"event":"keepalive","topic":"test"}
    </code>
    <p class="smallMarginBottom">
        To consume JSON instead, use the <tt>/json</tt> endpoint, which prints one message per line:
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/json<br/>
        {"id":"SLiKI64DOt","time":1635528757,"event":"open","topic":"mytopic"}<br/>
        {"id":"hwQ2YpKdmg","time":1635528741,"event":"message","topic":"mytopic","message":"Hi!"}<br/>
        {"id":"DGUDShMCsc","time":1635528787,"event":"keepalive","topic":"mytopic"}
    </code>
    <p class="smallMarginBottom">
        Or use the <tt>/raw</tt> endpoint if you need something super simple (empty lines are keepalive messages):
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/raw<br/>
        <br/>
        This is a notification<br/>
        And another one with a smiley face 😀
    </code>
    <h2 id="other-features" class="anchor">Other features</h2>
    <h3 id="fetching-cached-messages" class="anchor">Fetching cached messages (<tt>since=</tt>)</h3>
    <p class="smallMarginBottom">
        Messages are cached on disk for {{.CacheDuration}} to account for network interruptions of subscribers.
        You can read back what you missed by using the <tt>since=</tt> query parameter. It takes either a
        duration (e.g. <tt>10m</tt> or <tt>30s</tt>), a Unix timestamp (e.g. <tt>1635528757</tt>) or <tt>all</tt> (all
        cached messages).
    </p>
    <code>
        curl -s "ntfy.sh/mytopic/json?since=10m"
    </code>
    <h3 id="polling" class="anchor">Polling (<tt>poll=1</tt>)</h3>
    <p class="smallMarginBottom">
        You can also just poll for messages if you don't like the long-standing connection using the <tt>poll=1</tt>
        query parameter. The connection will end after all available messages have been read. This parameter can be
        combined with <tt>since=</tt> (defaults to <tt>since=all</tt>).
    </p>
    <code>
        curl -s "ntfy.sh/mytopic/json?poll=1"
    </code>
    <h3 id="multiple-topics" class="anchor">Subscribing to multiple topics (<tt>topic1,topic2,...</tt>)</h3>
    <p class="smallMarginBottom">
        It's possible to subscribe to multiple topics in one HTTP call by providing a
        comma-separated list of topics in the URL. This allows you to reduce the number of connections you have to maintain:
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic1,mytopic2/json<br/>
        {"id":"0OkXIryH3H","time":1637182619,"event":"open","topic":"mytopic1,mytopic2,mytopic3"}<br/>
        {"id":"dzJJm7BCWs","time":1637182634,"event":"message","topic":"mytopic1","message":"for topic 1"}<br/>
        {"id":"Cm02DsxUHb","time":1637182643,"event":"message","topic":"mytopic2","message":"for topic 2"}
    </code>
    <h2 id="examples" class="anchor">Examples</h2>
    <p>
        There are a million ways to use Ntfy, but here are some inspirations. I try to collect
        <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">examples on GitHub</a>, so be sure to check
        those out, too.
    </p>
    <h3 id="example-alerts" class="anchor">Example: A long process is done: backups, copying data, pipelines, ...</h3>
    <p class="smallMarginBottom">
        I started adding notifications pretty much all of my scripts. Typically, I just chain the <tt>curl</tt> call
        directly to the command I'm running. The following example will either send <i>Laptop backup succeeded</i>
        or ⚠️ <i>Laptop backup failed</i> directly to my phone:
    </p>
    <code>
        rsync -a root@laptop /backups/laptop \<br/>
        &nbsp;&nbsp;&& zfs snapshot ... \<br/>
        &nbsp;&nbsp;&& curl -d "Laptop backup succeeded" ntfy.sh/backups \<br/>
        &nbsp;&nbsp;|| echo -en "\u26A0\uFE0F Laptop backup failed" | curl -sT- ntfy.sh/backups
    </code>
    <h3 id="example-web" class="anchor">Example: Server-sent messages in your web app</h3>
    <p>
        Just as you can <a href="#subscribe-web">subscribe to topics in this Web UI</a>, 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.
    </p>
    <h3 id="example-notify-ssh" class="anchor">Example: Notify on SSH login</h3>
    <p>
        Years ago my home server was broken into. That shook me hard, so every time someone logs into any machine that I
        own, I now message myself. Here's an example of how to use <a href="https://en.wikipedia.org/wiki/Linux_PAM">PAM</a>
        to notify yourself on SSH login.
    </p>
    <p class="smallMarginBottom">
        <b>/etc/pam.d/sshd</b> (at the end of the file):
    </p>
    <code>
        session optional pam_exec.so /usr/local/bin/ntfy-ssh-login.sh
    </code>
    <p class="smallMarginBottom">
        <b>/usr/local/bin/ntfy-ssh-login.sh</b>:
    </p>
    <code>
        #!/bin/bash<br/>
        if [ "${PAM_TYPE}" = "open_session" ]; then<br/>
        &nbsp;&nbsp;echo -en "\u26A0\uFE0F SSH login: ${PAM_USER} from ${PAM_RHOST}" | curl -T- ntfy.sh/alerts<br/>
        fi
    </code>
    <h3 id="example-collect-data" class="anchor">Example: Collect data from multiple machines</h3>
    <p>
        The other day I was running tasks on 20 servers and I wanted to collect the interim results
        as a CSV in one place. Here's the script I wrote:
    </p>
    <code>
        while read result; do<br/>
        &nbsp;&nbsp;[ -n "$result" ] && echo "result" >> results.csv<br/>
        done < <(stdbuf -i0 -o0 curl -s ntfy.sh/results/raw)
    </code>
    <h2 id="faq" class="anchor">FAQ</h2>
    <p>
        <b id="isnt-this-like" class="anchor">Isn't this like ...?</b><br/>
        Who knows. I didn't do a lot of research before making this. It was fun making it.
    </p>
    <p>
        <b id="is-it-free" class="anchor">Can I use this in my app? Will it stay free?</b><br/>
        Yes. As long as you don't abuse it, it'll be available and free of charge. I do not plan on monetizing
        the service.
    </p>
    <p>
        <b id="uptime-guarantees" class="anchor">What are the uptime guarantees?</b><br/>
        Best effort.
    </p>
    <p>
        <b id="multiple-subscribers" class="anchor">What happens if there are multiple subscribers to the same topic?</b><br/>
        As per usual with pub-sub, all subscribers receive notifications if they are
        subscribed to a topic.
    </p>
    <p>
        <b id="can-you-spy-on-me" class="anchor">Will you know what topics exist, can you spy on me?</b><br/>
        If you don't trust me or your messages are sensitive, run your own server. It's <a href="https://github.com/binwiederhier/ntfy">open source</a>.
        That said, the logs do not contain any topic names or other details about you.
        Messages are cached for {{.CacheDuration}} to facilitate service restarts, message polling and to overcome
        client network disruptions.
    </p>
    <p>
        <b id="selfhosted" class="anchor">Can I self-host it?</b><br/>
        Yes. The server (including this Web UI) can be self-hosted, and the Android app supports adding topics from
        your own server as well. There are <a href="https://github.com/binwiederhier/ntfy#installation">install instructions</a>
        on GitHub.
    </p>
    <p>
        <b id="why-firebase" class="anchor">Why is Firebase used?</b><br/>
        In addition to caching messages locally and delivering them to long-polling subscribers, all messages are also
        published to Firebase Cloud Messaging (FCM) (if <tt>FirebaseKeyFile</tt> is set, which it is on ntfy.sh). This
        is to facilitate instant notifications on Android.
    </p>
    <p>
        <b id="why-no-ios" class="anchor">Why is there no iOS app (yet)?</b><br/>
        I don't have an iPhone or a Mac, so I didn't make an iOS app yet. I'd be awesome if
        <a href="https://github.com/binwiederhier/ntfy/issues/4">someone else could help out</a>.
    </p>
    <h2 id="privacy" class="anchor">Privacy policy</h2>
    <p>
        Neither the server nor the app record any personal information, or share any of the messages and topics with
        any outside service. All data is exclusively used to make the service function properly. The one exception
        is the Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see
        FAQ for details).
    </p>
    <p>
        The web server does not log or otherwise store request paths, remote IP addresses or even topics or messages,
        aside from a short on-disk cache (for {{.CacheDuration}}) to support service restarts.
    </p>
    <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_black_24dp.svg"/></button>
        <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/><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"></span>
        </code>
        <p id="detailNotificationsDisallowed">
            If you'd like to receive desktop notifications when new messages arrive on this topic, you have
            <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> (cached for {{.CacheDuration}}):
        </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/app.js"></script>
 </body>
 </html>
--- a/server/index.html
+++ b/server/index.html
@@ -1,214 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>ntfy.sh | simple HTTP-based pub-sub</title>
    <link rel="stylesheet" href="static/css/app.css" type="text/css">
    <!-- 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="#39005a">
    <meta name="msapplication-navbutton-color" content="#39005a">
    <meta name="apple-mobile-web-app-status-bar-style" content="#39005a">
    <!-- Favicon, see favicon.io -->
    <link rel="icon" type="image/png" href="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.sh" />
    <meta property="og:title" content="ntfy.sh | simple HTTP-based pub-sub" />
    <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" />
 </head>
 <body>
 <div id="main">
    <h1><img src="static/img/ntfy.png" alt="ntfy"/><br/>ntfy.sh - simple HTTP-based pub-sub</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.
        It allows you to send notifications <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">to your phone</a> or desktop via scripts from any computer,
        entirely <b>without signup or cost</b>. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
    </p>
    <p>
        There are many ways to use ntfy. You can send yourself messages for all sorts of things: When a long process finishes or fails (a backup, a long rsync job, ...),
        or to notify yourself when somebody logs into your server(s). Or you may want to use it in your own app to distribute messages to subscribed clients.
        Endless possibilities 😀.
    </p>
    <h2>Publishing messages</h2>
    <p>
        Publishing messages can be done via PUT or POST using. Topics are created on the fly by subscribing or publishing to them.
        Because there is no sign-up, <b>the topic is essentially a password</b>, so pick something that's not easily guessable.
    </p>
    <p class="smallMarginBottom">
        Here's an example showing how to publish a message using <tt>curl</tt>:
    </p>
    <code>
        curl -d "long process is done" ntfy.sh/mytopic
    </code>
    <p class="smallMarginBottom">
        Here's an example in JS with <tt>fetch()</tt> (see <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">full example</a>):
    </p>
    <code>
        fetch('https://ntfy.sh/mytopic', {<br/>
        &nbsp;&nbsp;method: 'POST', // PUT works too<br/>
        &nbsp;&nbsp;body: 'Hello from the other side.'<br/>
        })
    </code>
    <h2>Subscribe to a topic</h2>
    <p>
        You can create and subscribe to a topic either in this web UI, or in your own app by subscribing to an
        <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>, a JSON feed, or raw feed.
    </p>
    <div id="subscribeBox">
        <h3>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. Once subscribed, you can publish messages via PUT/POST.
        </p>
        <form id="subscribeForm">
            <p>
                <b>Topic:</b><br/>
                <input type="text" id="topicField" autocomplete="off" placeholder="Topic name, e.g. phil_alerts"  pattern="[-_A-Za-z]{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>Subscribe via Android App</h3>
    <p>
        You can use the <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">Ntfy Android App</a>
        to receive notifications directly on your phone. Just like the server, this app is also <a href="https://github.com/binwiederhier/ntfy-android">open source</a>.
    </p>
    <h3>Subscribe via your app, or via the CLI</h3>
    <p class="smallMarginBottom">
        Using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a> in JS, you can consume
        notifications like this (see <a href="https://github.com/binwiederhier/ntfy/tree/main/examples">full example</a>):
    </p>
    <code>
        const eventSource = new EventSource('https://ntfy.sh/mytopic/sse');<br/>
        eventSource.onmessage = (e) => {<br/>
        &nbsp;&nbsp;// Do something with e.data<br/>
        };
    </code>
    <p class="smallMarginBottom">
        You can also use the same <tt>/sse</tt> endpoint via <tt>curl</tt> or any other HTTP library:
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/sse<br/>
        event: open<br/>
        data: {"id":"weSj9RtNkj","time":1635528898,"event":"open","topic":"mytopic"}<br/><br/>
        data: {"id":"p0M5y6gcCY","time":1635528909,"event":"message","topic":"mytopic","message":"Hi!"}<br/><br/>
        event: keepalive<br/>
        data: {"id":"VNxNIg5fpt","time":1635528928,"event":"keepalive","topic":"test"}
    </code>
    <p class="smallMarginBottom">
        To consume JSON instead, use the <tt>/json</tt> endpoint, which prints one message per line:
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/json<br/>
        {"id":"SLiKI64DOt","time":1635528757,"event":"open","topic":"mytopic"}<br/>
        {"id":"hwQ2YpKdmg","time":1635528741,"event":"message","topic":"mytopic","message":"Hi!"}<br/>
        {"id":"DGUDShMCsc","time":1635528787,"event":"keepalive","topic":"mytopic"}
    </code>
    <p class="smallMarginBottom">
        Or use the <tt>/raw</tt> endpoint if you need something super simple (empty lines are keepalive messages):
    </p>
    <code>
        $ curl -s ntfy.sh/mytopic/raw<br/>
        <br/>
        This is a notification
    </code>
    <p class="smallMarginBottom">
        Here's an example of how to use this endpoint to send desktop notifications for every incoming message:
    </p>
    <code>
        while read msg; do<br/>
        &nbsp;&nbsp;[ -n "$msg" ] && notify-send "$msg"<br/>
        done < <(stdbuf -i0 -o0 curl -s ntfy.sh/mytopic/raw)
    </code>
    <h3>Message buffering and polling</h3>
    <p class="smallMarginBottom">
        Messages are buffered in memory for a few hours to account for network interruptions of subscribers.
        You can read back what you missed by using the <tt>since=...</tt> query parameter. It takes either a
        duration (e.g. <tt>10m</tt> or <tt>30s</tt>) or a Unix timestamp (e.g. <tt>1635528757</tt>):
    </p>
    <code>
        $ curl -s "ntfy.sh/mytopic/json?since=10m"<br/>
        # Same output as above, but includes messages from up to 10 minutes ago
    </code>
    <p class="smallMarginBottom">
        You can also just poll for messages if you don't like the long-standing connection using the <tt>poll=1</tt>
        query parameter. The connection will end after all available messages have been read. This parameter has to be
        combined with <tt>since=</tt>.
    </p>
    <code>
        $ curl -s "ntfy.sh/mytopic/json?poll=1&since=10m"<br/>
        # Returns messages from up to 10 minutes ago and ends the connection
    </code>
    <h2>FAQ</h2>
    <p>
        <b>Isn't this like ...?</b><br/>
        Who knows. I didn't do a lot of research before making this. It was fun making it.
    </p>
    <p>
        <b>Can I use this in my app? Will it stay free?</b><br/>
        Yes. As long as you don't abuse it, it'll be available and free of charge. I do not plan on monetizing
        the service.
    </p>
    <p>
        <b>What are the uptime guarantees?</b><br/>
        Best effort.
    </p>
    <p>
        <b>Will you know what topics exist, can you spy on me?</b><br/>
        If you don't trust me or your messages are sensitive, run your own server. It's <a href="https://github.com/binwiederhier/ntfy">open source</a>.
        That said, the logs do not contain any topic names or other details about you. Check the code if you don't believe me.
    </p>
    <p>
        <b>Why is Firebase used?</b><br/>
        In addition to caching messages locally and delivering them to long-polling subscribers, all messages are also
        published to Firebase Cloud Messaging (FCM) (if <tt>FirebaseKeyFile</tt> is set, which it is on ntfy.sh). This
        is to facilitate instant notifications on Android. I tried really, really hard to avoid using FCM, but newer
        versions of Android made it impossible to implement <a href="https://developer.android.com/guide/background">background services</a>.
    </p>
    <h2>Privacy policy</h2>
    <p>
        Neither the server nor the app record any personal information, or share any of the messages and topics with
        any outside service. All data is exclusively used to make the service function properly. The one exception
        is the Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see
        FAQ for details).
    </p>
    <p>
        The web server does not log or otherwise store request paths, remote IP addresses or even topics or messages,
        aside from a short on-disk cache (up to a day) to support service restarts.
    </p>
    <center id="ironicCenterTagDontFreakOut"><i>Made with ❤️ by <a href="https://heckel.io">Philipp C. Heckel</a></i></center>
 </div>
 <script src="static/js/app.js"></script>
 </body>
 </html>
--- a/server/server.go
+++ b/server/server.go
@@ -11,6 +11,8 @@ import (
 	"fmt"
 	"google.golang.org/api/option"
 	"heckel.io/ntfy/config"
 	"heckel.io/ntfy/util"
 	"html/template"
 	"io"
 	"log"
 	"net"
@@ -46,20 +48,48 @@ func (e errHTTP) Error() string {
 	return fmt.Sprintf("http: %s", e.Status)
 }
 type indexPage struct {
 	Topic         string
 	CacheDuration string
 }
 type sinceTime time.Time
 func (t sinceTime) IsAll() bool {
 	return t == sinceAllMessages
 }
 func (t sinceTime) IsNone() bool {
 	return t == sinceNoMessages
 }
 func (t sinceTime) Time() time.Time {
 	return time.Time(t)
 }
 var (
 	sinceAllMessages = sinceTime(time.Unix(0, 0))
 	sinceNoMessages  = sinceTime(time.Unix(1, 0))
 )
 const (
 	messageLimit = 512
 )
 var (
-	topicRegex = regexp.MustCompile(`^/[^/]+$`)
+	topicRegex = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}$`) // Regex must match JS & Android app!
-	jsonRegex  = regexp.MustCompile(`^/[^/]+/json$`)
+	jsonRegex  = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/json$`)
-	sseRegex   = regexp.MustCompile(`^/[^/]+/sse$`)
+	sseRegex   = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/sse$`)
-	rawRegex   = regexp.MustCompile(`^/[^/]+/raw$`)
+	rawRegex   = regexp.MustCompile(`^/[-_A-Za-z0-9]{1,64}(,[-_A-Za-z0-9]{1,64})*/raw$`)
 	staticRegex = regexp.MustCompile(`^/static/.+`)
-	//go:embed "index.html"
+	//go:embed "index.gohtml"
-	indexSource string
+	indexSource   string
 	indexTemplate = template.Must(template.New("index").Parse(indexSource))
 	//go:embed "example.html"
 	exampleSource   string
 	//go:embed static
 	webStaticFs embed.FS
@@ -159,8 +189,10 @@ func (s *Server) handle(w http.ResponseWriter, r *http.Request) {
 }
 func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request) error {
-	if r.Method == http.MethodGet && r.URL.Path == "/" {
+	if r.Method == http.MethodGet && (r.URL.Path == "/" || topicRegex.MatchString(r.URL.Path)) {
 		return s.handleHome(w, r)
 	} else if r.Method == http.MethodGet && r.URL.Path == "/example.html" {
 		return s.handleExample(w, r)
 	} else if r.Method == http.MethodHead && r.URL.Path == "/" {
 		return s.handleEmpty(w, r)
 	} else if r.Method == http.MethodGet && staticRegex.MatchString(r.URL.Path) {
@@ -180,21 +212,28 @@ func (s *Server) handleInternal(w http.ResponseWriter, r *http.Request) error {
 }
 func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) error {
-	_, err := io.WriteString(w, indexSource)
+	return indexTemplate.Execute(w, &indexPage{
-	return err
+		Topic:         r.URL.Path[1:],
 		CacheDuration: util.DurationToHuman(s.config.CacheDuration),
 	})
 }
 func (s *Server) handleEmpty(w http.ResponseWriter, r *http.Request) error {
 	return nil
 }
 func (s *Server) handleExample(w http.ResponseWriter, r *http.Request) error {
 	_, err := io.WriteString(w, exampleSource)
 	return err
 }
 func (s *Server) handleStatic(w http.ResponseWriter, r *http.Request) error {
 	http.FileServer(http.FS(webStaticFs)).ServeHTTP(w, r)
 	return nil
 }
 func (s *Server) handlePublish(w http.ResponseWriter, r *http.Request, v *visitor) error {
-	t, err := s.topic(r.URL.Path[1:])
+	t, err := s.topicFromID(r.URL.Path[1:])
 	if err != nil {
 		return err
 	}
@@ -228,7 +267,7 @@ func (s *Server) handleSubscribeJSON(w http.ResponseWriter, r *http.Request, v *
 		}
 		return buf.String(), nil
 	}
-	return s.handleSubscribe(w, r, v, "json", "application/stream+json", encoder)
+	return s.handleSubscribe(w, r, v, "json", "application/x-ndjson", encoder)
 }
 func (s *Server) handleSubscribeSSE(w http.ResponseWriter, r *http.Request, v *visitor) error {
@@ -260,7 +299,9 @@ func (s *Server) handleSubscribe(w http.ResponseWriter, r *http.Request, v *visi
 		return errHTTPTooManyRequests
 	}
 	defer v.RemoveSubscription()
-	t, err := s.topic(strings.TrimSuffix(r.URL.Path[1:], "/"+format)) // Hack
+	topicsStr := strings.TrimSuffix(r.URL.Path[1:], "/"+format) // Hack
 	topicIDs := strings.Split(topicsStr, ",")
 	topics, err := s.topicsFromIDs(topicIDs...)
 	if err != nil {
 		return err
 	}
@@ -282,17 +323,24 @@ func (s *Server) handleSubscribe(w http.ResponseWriter, r *http.Request, v *visi
 		}
 		return nil
 	}
-	w.Header().Set("Access-Control-Allow-Origin", "*") // CORS, allow cross-origin requests
+	w.Header().Set("Access-Control-Allow-Origin", "*")            // CORS, allow cross-origin requests
-	w.Header().Set("Content-Type", contentType)
+	w.Header().Set("Content-Type", contentType+"; charset=utf-8") // Android/Volley client needs charset!
 	if poll {
-		return s.sendOldMessages(t, since, sub)
+		return s.sendOldMessages(topics, since, sub)
 	}
-	subscriberID := t.Subscribe(sub)
+	subscriberIDs := make([]int, 0)
-	defer t.Unsubscribe(subscriberID)
+	for _, t := range topics {
-	if err := sub(newOpenMessage(t.id)); err != nil { // Send out open message
+		subscriberIDs = append(subscriberIDs, t.Subscribe(sub))
 	}
 	defer func() {
 		for i, subscriberID := range subscriberIDs {
 			topics[i].Unsubscribe(subscriberID) // Order!
 		}
 	}()
 	if err := sub(newOpenMessage(topicsStr)); err != nil { // Send out open message
 		return err
 	}
-	if err := s.sendOldMessages(t, since, sub); err != nil {
+	if err := s.sendOldMessages(topics, since, sub); err != nil {
 		return err
 	}
 	for {
@@ -301,40 +349,52 @@ func (s *Server) handleSubscribe(w http.ResponseWriter, r *http.Request, v *visi
 			return nil
 		case <-time.After(s.config.KeepaliveInterval):
 			v.Keepalive()
-			if err := sub(newKeepaliveMessage(t.id)); err != nil { // Send keepalive message
+			if err := sub(newKeepaliveMessage(topicsStr)); err != nil { // Send keepalive message
 				return err
 			}
 		}
 	}
 }
-func (s *Server) sendOldMessages(t *topic, since time.Time, sub subscriber) error {
+func (s *Server) sendOldMessages(topics []*topic, since sinceTime, sub subscriber) error {
-	if since.IsZero() {
+	if since.IsNone() {
 		return nil
 	}
-	messages, err := s.cache.Messages(t.id, since)
+	for _, t := range topics {
-	if err != nil {
+		messages, err := s.cache.Messages(t.id, since)
-		return err
+		if err != nil {
 	}
 	for _, m := range messages {
 		if err := sub(m); err != nil {
 			return err
 		}
 		for _, m := range messages {
 			if err := sub(m); err != nil {
 				return err
 			}
 		}
 	}
 	return nil
 }
-func parseSince(r *http.Request) (time.Time, error) {
+// parseSince returns a timestamp identifying the time span from which cached messages should be received.
 //
 // Values in the "since=..." parameter can be either a unix timestamp or a duration (e.g. 12h), or
 // "all" for all messages.
 func parseSince(r *http.Request) (sinceTime, error) {
 	if !r.URL.Query().Has("since") {
-		return time.Time{}, nil
+		if r.URL.Query().Has("poll") {
 			return sinceAllMessages, nil
 		}
 		return sinceNoMessages, nil
 	}
-	if since, err := strconv.ParseInt(r.URL.Query().Get("since"), 10, 64); err == nil {
+	if r.URL.Query().Get("since") == "all" {
-		return time.Unix(since, 0), nil
+		return sinceAllMessages, nil
 	}
 	if s, err := strconv.ParseInt(r.URL.Query().Get("since"), 10, 64); err == nil {
 		return sinceTime(time.Unix(s, 0)), nil
 	}
 	if d, err := time.ParseDuration(r.URL.Query().Get("since")); err == nil {
-		return time.Now().Add(-1 * d), nil
+		return sinceTime(time.Now().Add(-1 * d)), nil
 	}
-	return time.Time{}, errHTTPBadRequest
+	return sinceNoMessages, errHTTPBadRequest
 }
 func (s *Server) handleOptions(w http.ResponseWriter, r *http.Request) error {
@@ -343,19 +403,31 @@ func (s *Server) handleOptions(w http.ResponseWriter, r *http.Request) error {
 	return nil
 }
-func (s *Server) topic(id string) (*topic, error) {
+func (s *Server) topicFromID(id string) (*topic, error) {
 	topics, err := s.topicsFromIDs(id)
 	if err != nil {
 		return nil, err
 	}
 	return topics[0], nil
 }
 func (s *Server) topicsFromIDs(ids... string) ([]*topic, error) {
 	s.mu.Lock()
 	defer s.mu.Unlock()
-	if _, ok := s.topics[id]; !ok {
+	topics := make([]*topic, 0)
-		if len(s.topics) >= s.config.GlobalTopicLimit {
+	for  _, id := range ids {
-			return nil, errHTTPTooManyRequests
+		if _, ok := s.topics[id]; !ok {
-		}
+			if len(s.topics) >= s.config.GlobalTopicLimit {
-		s.topics[id] = newTopic(id, time.Now())
+				return nil, errHTTPTooManyRequests
-		if s.firebase != nil {
+			}
-			s.topics[id].Subscribe(s.firebase)
+			s.topics[id] = newTopic(id, time.Now())
 			if s.firebase != nil {
 				s.topics[id].Subscribe(s.firebase)
 			}
 		}
 		topics = append(topics, s.topics[id])
 	}
-	return s.topics[id], nil
+	return topics, nil
 }
 func (s *Server) updateStatsAndExpire() {
--- a/server/static/css/app.css
+++ b/server/static/css/app.css
@@ -6,6 +6,12 @@ html, body {
    font-size: 1.1em;
 }
 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;
 }
@@ -22,13 +28,13 @@ h1 {
 }
 h2 {
-    margin-top: 20px;
+    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 1.8em;
 }
 h3 {
-    margin-top: 20px;
+    margin-top: 25px;
    margin-bottom: 5px;
    font-size: 1.3em;
 }
@@ -89,6 +95,101 @@ code {
    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;
 }
 /* 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;
 }
 /* Subscribe box */
 button {
@@ -107,7 +208,7 @@ button:hover {
 ul {
    padding-left: 1em;
-    list-style-type: none;
+    list-style-type: circle;
    padding-bottom: 0;
    margin: 0;
 }
@@ -146,7 +247,6 @@ li {
    #subscribeBox ul {
        margin: 0;
        padding: 0;
    }
    #subscribeBox li {
@@ -160,6 +260,10 @@ li {
        vertical-align: bottom;
    }
    #subscribeBox li a {
        padding: 0 5px 0 0;
    }
    #subscribeBox button {
        font-size: 0.8em;
        background: #3a9784;
@@ -202,7 +306,6 @@ li {
    #subscribeBox ul {
        margin: 0;
        padding: 0;
    }
    #subscribeBox input {
@@ -228,6 +331,10 @@ li {
        vertical-align: bottom;
    }
    #subscribeBox li a {
        padding: 0 5px 0 0;
    }
    #subscribeBox button {
        font-size: 0.7em;
        background: #3a9784;
@@ -240,7 +347,63 @@ li {
    #subscribeBox button:hover {
        background: #317f6f;
    }
 }
 /** Detail view */
 #detail {
    display: none;
    position: absolute;
    z-index: 1;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: 0;
    background: white;
 }
 #detail .detailDate {
    color: #888;
    font-size: 0.9em;
 }
 #detail .detailMessage {
    margin-bottom: 20px;
    font-size: 1.1em;
 }
 #detail #detailMain {
    max-width: 900px;
    margin: 0 auto;
    position: relative; /* required for close button's "position: absolute" */
    padding-bottom: 50px; /* Chrome and Firefox behave differently regarding bottom margin */
 }
 #detail #detailCloseButton {
    background: #eee;
    border-radius: 5px;
    border: none;
    padding: 5px;
    position: absolute;
    right: 0;
    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;
 }
--- a/server/static/img/badge-appstore.png
+++ b/server/static/img/badge-appstore.png
--- a/server/static/img/badge-googleplay.png
+++ b/server/static/img/badge-googleplay.png
--- a/server/static/img/close_black_24dp.svg
+++ b/server/static/img/close_black_24dp.svg
@@ -0,0 +1 @@
 <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>
--- a/server/static/img/screenshot-curl.png
+++ b/server/static/img/screenshot-curl.png
--- a/server/static/img/screenshot-phone-add.jpg
+++ b/server/static/img/screenshot-phone-add.jpg
--- a/server/static/img/screenshot-phone-detail.jpg
+++ b/server/static/img/screenshot-phone-detail.jpg
--- a/server/static/img/screenshot-phone-main.jpg
+++ b/server/static/img/screenshot-phone-main.jpg
--- a/server/static/img/screenshot-phone-notification.jpg
+++ b/server/static/img/screenshot-phone-notification.jpg
--- a/server/static/img/screenshot-web-detail.png
+++ b/server/static/img/screenshot-web-detail.png
--- a/server/static/js/app.js
+++ b/server/static/js/app.js
@@ -10,36 +10,53 @@
 /* All the things */
 let topics = {};
 let currentTopic = "";
 let currentTopicUnsubscribeOnClose = false;
 /* 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, 0);
+                subscribeInternal(topic, true, 0);
            } else {
                showNotificationDeniedError();
            }
        });
    } else {
-        subscribeInternal(topic, 0);
+        subscribeInternal(topic, true,0);
    }
 };
-const subscribeInternal = (topic, delaySec) => {
+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 = `${topic} <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
+            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
            topicsList.appendChild(topicEntry);
        }
        topicsHeader.style.display = '';
@@ -47,30 +64,47 @@ const subscribeInternal = (topic, delaySec) => {
        // Open event source
        let eventSource = new EventSource(`${topic}/sse`);
        eventSource.onopen = () => {
-            topicEntry.innerHTML = `${topic} <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
+            topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send_black_24dp.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/clear_black_24dp.svg"> Unsubscribe</button>`;
            delaySec = 0; // Reset on successful connection
        };
        eventSource.onerror = (e) => {
-            topicEntry.innerHTML = `${topic} <i>(Reconnecting)</i> <button disabled="disabled">Test</button> <button onclick="unsubscribe('${topic}'); return false;">Unsubscribe</button>`;
+            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, newDelaySec);
+            subscribeInternal(topic, persist, newDelaySec);
        };
        eventSource.onmessage = (e) => {
            const event = JSON.parse(e.data);
-            notifySound.play();
+            topics[topic]['messages'].push(event);
-            new Notification(`${location.host}/${topic}`, {
+            topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
-                body: event.message,
+            if (currentTopic === topic) {
-                icon: '/static/img/favicon.png'
+                rerenderDetailView();
-            });
+            }
            if (Notification.permission === "granted") {
                notifySound.play();
                new Notification(`${location.host}/${topic}`, {
                    body: event.message,
                    icon: '/static/img/favicon.png'
                });
            }
        };
-        topics[topic] = eventSource;
+        topics[topic] = {
-        localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
+            '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].close();
+    topics[topic]['eventSource'].close();
    delete topics[topic];
    localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
    document.getElementById(`topic-${topic}`).remove();
@@ -83,7 +117,79 @@ 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, `ntfy.sh/${topic}`, `/${topic}`);
    window.scrollTo(0, 0);
    rerenderDetailView();
    return false;
 };
 const rerenderDetailView = () => {
    detailTitle.innerHTML = `ntfy.sh/${currentTopic}`; // document.location.replaceAll(..)
    detailTopicUrl.innerHTML = `ntfy.sh/${currentTopic}`;
    while (detailEventsList.firstChild) {
        detailEventsList.removeChild(detailEventsList.firstChild);
    }
    topics[currentTopic]['messages'].forEach(m => {
        let dateDiv = document.createElement('div');
        let messageDiv = document.createElement('div');
        let eventDiv = document.createElement('div');
        dateDiv.classList.add('detailDate');
        dateDiv.innerHTML = new Date(m.time * 1000).toLocaleString();
        messageDiv.classList.add('detailMessage');
        messageDiv.innerText = m.message;
        eventDiv.appendChild(dateDiv);
        eventDiv.appendChild(messageDiv);
        detailEventsList.appendChild(eventDiv);
    })
    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 = '';
    return false;
 };
 const requestPermission = () => {
    if (Notification.permission !== "granted") {
        Notification.requestPermission().then((permission) => {
            if (permission === "granted") {
                detailNotificationsDisallowed.style.display = 'none';
            }
        });
    }
    return false;
 };
 const showError = (msg) => {
@@ -100,7 +206,87 @@ const showNotificationDeniedError = () => {
    showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications.");
 };
-subscribeButton.onclick = function () {
+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;
    }
 };
 // 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;
    }
@@ -109,6 +295,18 @@ subscribeButton.onclick = function () {
    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();
@@ -120,13 +318,32 @@ if (!window["Notification"] || !window["EventSource"]) {
 topicField.value = "";
 // Restore topics
-const storedTopics = localStorage.getItem('topics');
+const storedTopics = JSON.parse(localStorage.getItem('topics') || "[]");
-if (storedTopics && Notification.permission === "granted") {
+if (storedTopics) {
-    const storedTopicsArray = JSON.parse(storedTopics)
+    storedTopics.forEach((topic) => { subscribeInternal(topic, true, 0); });
-    storedTopicsArray.forEach((topic) => { subscribeInternal(topic, 0); });
+    if (storedTopics.length === 0) {
    if (storedTopicsArray.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);
    }
 });
--- a/server/topic.go
+++ b/server/topic.go
@@ -28,6 +28,7 @@ func newTopic(id string, last time.Time) *topic {
 	}
 }
 // Subscribe subscribes to this topic
 func (t *topic) Subscribe(s subscriber) int {
 	t.mu.Lock()
 	defer t.mu.Unlock()
@@ -37,24 +38,29 @@ func (t *topic) Subscribe(s subscriber) int {
 	return subscriberID
 }
 // Unsubscribe removes the subscription from the list of subscribers
 func (t *topic) Unsubscribe(id int) {
 	t.mu.Lock()
 	defer t.mu.Unlock()
 	delete(t.subscribers, id)
 }
 // Publish asynchronously publishes to all subscribers
 func (t *topic) Publish(m *message) error {
-	t.mu.Lock()
+	go func() {
-	defer t.mu.Unlock()
+		t.mu.Lock()
-	t.last = time.Now()
+		defer t.mu.Unlock()
-	for _, s := range t.subscribers {
+		t.last = time.Now()
-		if err := s(m); err != nil {
+		for _, s := range t.subscribers {
-			log.Printf("error publishing message to subscriber")
+			if err := s(m); err != nil {
 				log.Printf("error publishing message to subscriber")
 			}
 		}
-	}
+	}()
 	return nil
 }
 // Subscribers returns the number of subscribers to this topic
 func (t *topic) Subscribers() int {
 	t.mu.Lock()
 	defer t.mu.Unlock()
--- a/util/util.go
+++ b/util/util.go
@@ -1,6 +1,7 @@
 package util
 import (
 	"fmt"
 	"math/rand"
 	"os"
 	"time"
@@ -27,3 +28,35 @@ func RandomString(length int) string {
 	}
 	return string(b)
 }
 // DurationToHuman converts a duration to a human readable format
 func DurationToHuman(d time.Duration) (str string) {
 	if d == 0 {
 		return "0"
 	}
 	d = d.Round(time.Second)
 	days := d / time.Hour / 24
 	if days > 0 {
 		str += fmt.Sprintf("%dd", days)
 	}
 	d -= days * time.Hour * 24
 	hours := d / time.Hour
 	if hours > 0 {
 		str += fmt.Sprintf("%dh", hours)
 	}
 	d -= hours * time.Hour
 	minutes := d / time.Minute
 	if minutes > 0 {
 		str += fmt.Sprintf("%dm", minutes)
 	}
 	d -= minutes * time.Minute
 	seconds := d / time.Second
 	if seconds > 0 {
 		str += fmt.Sprintf("%ds", seconds)
 	}
 	return
 }
Author	SHA1	Message	Date
Philipp Heckel	ae97fbe025	Fix typo	2021-11-18 13:14:55 -05:00
Philipp Heckel	6d7fec5337	Examples and anchors on website	2021-11-18 09:22:33 -05:00
Philipp Heckel	ba2f6e08cd	Anchors in web UI	2021-11-17 20:50:47 -05:00
Philipp Heckel	ffe0c72a5a	Bump version	2021-11-16 13:11:31 -05:00
Philipp Heckel	52136030be	Subscribe to more than one topic	2021-11-15 07:56:58 -05:00
Philipp Heckel	a481f4c448	Theme color in Chrome Android	2021-11-12 14:43:32 -05:00
Philipp Heckel	9b171dee8b	Merge branch 'main' of github.com:binwiederhier/ntfy into main	2021-11-09 14:48:48 -05:00
Philipp Heckel	c0ee174b13	Make publishing asynchronous	2021-11-09 14:48:25 -05:00
Philipp C. Heckel	fff535ca1a	Update README.md	2021-11-09 10:52:11 -05:00
Philipp C. Heckel	26390b9ad1	Update README.md	2021-11-09 10:51:21 -05:00
Philipp Heckel	cc752cf797	Screenshots	2021-11-09 10:46:47 -05:00
Philipp Heckel	4d48c5dc34	Examples	2021-11-08 20:15:13 -05:00
Philipp Heckel	b9b53bcdf0	Fix Chrome/Firefox inconsistencies with sorting	2021-11-08 10:35:46 -05:00
Philipp Heckel	a1385f6785	Update readme	2021-11-08 09:48:55 -05:00
Philipp Heckel	d453db89a7	Add since=all; make poll=1 default to since=all	2021-11-08 09:46:31 -05:00
Philipp Heckel	43c9a92748	Detail page in web UI	2021-11-08 09:24:34 -05:00
Philipp Heckel	c01c94c64c	Fix content type to add charset	2021-11-07 13:08:03 -05:00
		`@@ -0,0 +1 @@`
							`<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>`