vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
README.md
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

7
examples/example_desktop_notifications.sh Normal file
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)

68
server/index.html
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>

11
server/static/css/app.css
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;
}

BIN
server/static/img/ntfy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

7
server/static/js/app.js
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`
}) })
}; };

BIN
server/static/sound/mixkit-long-pop-2358.wav
View file

Binary file not shown.

BIN
server/static/sound/mixkit-message-pop-alert-2354.mp3 Normal file
View file

Binary file not shown.