Make things prettier, better sound, FAQ, icon in desktop notification

This commit is contained in:
Philipp Heckel 2021-10-24 22:08:06 -04:00
parent accd36991e
commit 1321bf19dc
8 changed files with 82 additions and 29 deletions

View file

@ -101,24 +101,6 @@ make build-simple
To build releases, I use [GoReleaser](https://goreleaser.com/). If you have that installed, you can run `make build` or To build releases, I use [GoReleaser](https://goreleaser.com/). If you have that installed, you can run `make build` or
`make build-snapshot`. `make build-snapshot`.
## FAQ
### Isn't this like ...?
Probably. I didn't do a whole lot of research before making this.
### Can I use this in my app?
Yes. As long as you don't abuse it, it'll be available and free of charge.
### What are the uptime guarantees?
Best effort.
### Why is the web UI so ugly?
I don't particularly like JS or dealing with CSS. I'll make it pretty after it's functional.
### Will you know what topics exist, can you spy on me?
If you don't trust me or your messages are sensitive, run your ntfy on your own server. That said, the logs do not
contain any topic names or other details about you.
## TODO ## TODO
- add HTTPS - add HTTPS

View file

@ -0,0 +1,7 @@
#!/bin/bash
# This is an example shell script showing how to consume a ntfy.sh topic using
# a simple script. The notify-send command sends any arriving message as a desktop notification.
while read msg; do
notify-send "$msg"
done < <(stdbuf -i0 -o0 curl -s ntfy.sh/mytopic/raw)

View file

@ -25,14 +25,14 @@
<meta property="og:site_name" content="ntfy.sh" /> <meta property="og:site_name" content="ntfy.sh" />
<meta property="og:title" content="ntfy.sh | simple HTTP-based pub-sub" /> <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: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:image" content="/static/img/favicon.png" />
<meta property="og:url" content="https://ntfy.sh" /> <meta property="og:url" content="https://ntfy.sh" />
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<h1>ntfy.sh - simple HTTP-based pub-sub</h1> <h1>ntfy.sh - simple HTTP-based pub-sub</h1>
<p> <p>
<b>ntfy</b> (pronounce: <i>notify</i>) is a simple HTTP-based pub-sub notification service and tool. <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 <b>desktop notifications via scripts from any computer</b>, entirely <b>without signup or cost</b>. It allows you to send <b>desktop notifications via scripts from any computer</b>, 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. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
</p> </p>
@ -55,20 +55,38 @@
</p> </p>
<form id="subscribeForm"> <form id="subscribeForm">
<p> <p>
<label for="topicField">Topic ID:</label> <label for="topicField">Subscribe to topic:</label>
<input type="text" id="topicField" placeholder="Letters, numbers, _ and -" pattern="[-_A-Za-z]{1,64}" autofocus /> <input type="text" id="topicField" placeholder="Letters, numbers, _ and -" pattern="[-_A-Za-z]{1,64}" autofocus />
<input type="submit" id="subscribeButton" value="Subscribe" /> <input type="submit" id="subscribeButton" value="Subscribe" />
</p> </p>
</form> </form>
<p id="topicsHeader">Subscribed topics:</p> <p id="topicsHeader">Topics:</p>
<ul id="topicsList"></ul> <ul id="topicsList"></ul>
<audio id="notifySound" src="static/sound/mixkit-long-pop-2358.wav"></audio> <audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
<h3>Subscribe via your app, or via the CLI</h3> <h3>Subscribe via your app, or via the CLI</h3>
<p>
Here are some examples using <tt>curl</tt>:
</p>
<code> <code>
curl -s ntfy.sh/mytopic/raw # one message per line (\n are replaced with a space)<br/> # one message per line (\n are replaced with a space)<br/>
curl -s ntfy.sh/mytopic/json # one JSON message per line<br/> curl -s ntfy.sh/mytopic/raw<br/><br/>
curl -s ntfy.sh/mytopic/sse # server-sent events (SSE) stream
# one JSON message per line<br/>
curl -s ntfy.sh/mytopic/json<br/><br/>
# server-sent events (SSE) stream, use with EventSource<br/>
curl -s ntfy.sh/mytopic/sse
</code>
<p>
Using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>, 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> </code>
<h2>Publishing messages</h2> <h2>Publishing messages</h2>
@ -78,10 +96,44 @@
<code> <code>
curl -d "long process is done" ntfy.sh/mytopic curl -d "long process is done" ntfy.sh/mytopic
</code> </code>
<p>
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>
<p> <p>
Messages published to a non-existing topic or a topic without subscribers will not be delivered later. Messages published to a non-existing topic or a topic without subscribers will not be delivered later.
There is (currently) no buffering of any kind. If you're not listening, the message won't be delivered. There is (currently) no buffering of any kind. If you're not listening, the message won't be delivered.
</p> </p>
<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>
<center id="ironicCenterTagDontFreakOut"><i>Made with ❤️ by <a href="https://heckel.io">Philipp C. Heckel</a></i></center>
</div> </div>
<script src="static/js/app.js"></script> <script src="static/js/app.js"></script>
</body> </body>

View file

@ -20,6 +20,7 @@ h1 {
font-size: 2.5em; font-size: 2.5em;
} }
h2 { h2 {
margin-top: 20px; margin-top: 20px;
margin-bottom: 5px; margin-bottom: 5px;
@ -33,8 +34,10 @@ h3 {
} }
p { p {
margin-top: 0; margin-top: 10px;
margin-bottom: 20px;
font-size: 1.1em; font-size: 1.1em;
line-height: 140%;
} }
tt { tt {
@ -49,6 +52,8 @@ code {
font-family: monospace; font-family: monospace;
padding: 20px; padding: 20px;
border-radius: 3px; border-radius: 3px;
margin-top: 10px;
margin-bottom: 10px;
} }
/* Lato font (OFL), https://fonts.google.com/specimen/Lato#about, /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about,
@ -74,3 +79,7 @@ code {
color: darkred; color: darkred;
font-style: italic; font-style: italic;
} }
#ironicCenterTagDontFreakOut {
color: #666;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -59,8 +59,11 @@ const subscribeInternal = (topic, delaySec) => {
}; };
eventSource.onmessage = (e) => { eventSource.onmessage = (e) => {
const event = JSON.parse(e.data); const event = JSON.parse(e.data);
new Notification(event.message);
notifySound.play(); notifySound.play();
new Notification(topic, {
body: event.message,
icon: '/static/img/favicon.png'
});
}; };
topics[topic] = eventSource; topics[topic] = eventSource;
localStorage.setItem('topics', JSON.stringify(Object.keys(topics))); localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
@ -80,7 +83,7 @@ const unsubscribe = (topic) => {
const test = (topic) => { const test = (topic) => {
fetch(`/${topic}`, { fetch(`/${topic}`, {
method: 'PUT', method: 'PUT',
body: `This is a test notification for topic ${topic}!` body: `This is a test notification`
}) })
}; };

Binary file not shown.