Add web push tests
This commit is contained in:
nimbleghost
parent
ff5c854192
commit
a9fef387fa
20 changed files with 372 additions and 41 deletions
|
|
@ -1286,8 +1286,8 @@ variable before running the `ntfy` command (e.g. `export NTFY_LISTEN_HTTP=:80`).
|
|||
| `stripe-webhook-key` | `NTFY_STRIPE_WEBHOOK_KEY` | *string* | - | Payments: Key required to validate the authenticity of incoming webhooks from Stripe |
|
||||
| `billing-contact` | `NTFY_BILLING_CONTACT` | *email address* or *website* | - | Payments: Email or website displayed in Upgrade dialog as a billing contact |
|
||||
| `web-push-enabled` | `NTFY_WEB_PUSH_ENABLED` | *boolean* (`true` or `false`) | - | Web Push: Enable/disable (requires private and public key below). |
|
||||
| `web-push-public-key` | `NTFY_WEB_PUSH_PUBLIC_KEY` | *string* | - | Web Push: Public Key. Run `ntfy web-push-keys` to generate |
|
||||
| `web-push-private-key` | `NTFY_WEB_PUSH_PRIVATE_KEY` | *string* | - | Web Push: Private Key. Run `ntfy web-push-keys` to generate |
|
||||
| `web-push-public-key` | `NTFY_WEB_PUSH_PUBLIC_KEY` | *string* | - | Web Push: Public Key. Run `ntfy web-push generate-keys` to generate |
|
||||
| `web-push-private-key` | `NTFY_WEB_PUSH_PRIVATE_KEY` | *string* | - | Web Push: Private Key. Run `ntfy web-push generate-keys` to generate |
|
||||
| `web-push-subscriptions-file` | `NTFY_WEB_PUSH_SUBSCRIPTIONS_FILE` | *string* | - | Web Push: Subscriptions file |
|
||||
| `web-push-email-address` | `NTFY_WEB_PUSH_EMAIL_ADDRESS` | *string* | - | Web Push: Sender email address |
|
||||
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ Reference: <https://stackoverflow.com/questions/34160509/options-for-testing-ser
|
|||
|
||||
#### With the dev servers
|
||||
|
||||
1. Get web push keys `go run main.go web-push-keys`
|
||||
1. Get web push keys `go run main.go web-push generate-keys`
|
||||
|
||||
2. Run the server with web push enabled
|
||||
|
||||
|
|
|
|||
BIN
docs/static/img/pwa-badge.png
vendored
Normal file
BIN
docs/static/img/pwa-badge.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 786 KiB |
BIN
docs/static/img/pwa-install.png
vendored
Normal file
BIN
docs/static/img/pwa-install.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
docs/static/img/pwa.png
vendored
Normal file
BIN
docs/static/img/pwa.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
docs/static/img/web-pin.png
vendored
BIN
docs/static/img/web-pin.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
BIN
docs/static/img/web-push-settings.png
vendored
Normal file
BIN
docs/static/img/web-push-settings.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
docs/static/img/web-subscribe.png
vendored
BIN
docs/static/img/web-subscribe.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 294 KiB |
12
docs/subscribe/desktop.md
Normal file
12
docs/subscribe/desktop.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# Using the web app as an installed PWA
|
||||
|
||||
While ntfy doesn't have a built desktop app, it is built as a progressive web app and can be installed.
|
||||
|
||||
This is supported on Chrome and Edge on desktop, as well as Chrome on Android and Safari on iOS.
|
||||
[caniuse reference](https://caniuse.com/web-app-manifest)
|
||||
|
||||
<div id="pwa-screenshots" class="screenshots">
|
||||
<a href="../../static/img/pwa.png"><img src="../../static/img/pwa.png"/></a>
|
||||
<a href="../../static/img/pwa-install.png"><img src="../../static/img/pwa-install.png"/></a>
|
||||
<a href="../../static/img/pwa-badge.png"><img src="../../static/img/pwa-badge.png"/></a>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,41 @@
|
|||
# Subscribe from the Web UI
|
||||
You can use the Web UI to subscribe to topics as well. If you do, and you keep the website open, **notifications will
|
||||
pop up as desktop notifications**. Simply type in the topic name and click the *Subscribe* button. The browser will
|
||||
keep a connection open and listen for incoming notifications.
|
||||
|
||||
You can use the Web UI to subscribe to topics as well. Simply type in the topic name and click the *Subscribe* button.
|
||||
|
||||
While subscribing, you have the option to enable desktop notifications, as well as background notifications. When you
|
||||
enable them for the first time, you will be prompted to allow notifications on your browser.
|
||||
|
||||
- **Sound only**
|
||||
|
||||
If you don't enable browser notifications, a sound will play when a new notification comes in, and the tab title
|
||||
will show the number of new notifications.
|
||||
|
||||
- **Browser Notifications**
|
||||
|
||||
This requires an active ntfy tab to be open to receive notifications. These are typically instantaneous, and will
|
||||
appear as a system notification. If you don't see these, check that your browser is allowed to show notifications
|
||||
(for example in System Settings on macOS).
|
||||
|
||||
If you don't want to enable background notifications, pinning the ntfy tab on your browser is a good solution to leave
|
||||
it running.
|
||||
|
||||
- **Background Notifications**
|
||||
|
||||
This uses the [Web Push API](https://caniuse.com/push-api). You don't need an active ntfy tab open, but in some
|
||||
cases you may need to keep your browser open.
|
||||
|
||||
|
||||
| Browser | Platform | Browser Running | Browser Not Running | Notes |
|
||||
| ------- | -------- | --------------- | ------------------- | ------------------------------------------------------- |
|
||||
| Chrome | Desktop | ✅ | ❌ | |
|
||||
| Firefox | Desktop | ✅ | ❌ | |
|
||||
| Edge | Desktop | ✅ | ❌ | |
|
||||
| Opera | Desktop | ✅ | ❌ | |
|
||||
| Safari | Desktop | ✅ | ✅ | requires Safari 16.1, macOS 13 Ventura |
|
||||
| Chrome | Android | ✅ | ✅ | |
|
||||
| Safari | iOS | ⚠️ | ⚠️ | requires iOS 16.4, only when app is added to homescreen |
|
||||
|
||||
(Browsers below 1% usage not shown, look at the Push API link for more info)
|
||||
|
||||
To learn how to send messages, check out the [publishing page](../publish.md).
|
||||
|
||||
|
|
@ -11,17 +45,16 @@ To learn how to send messages, check out the [publishing page](../publish.md).
|
|||
<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,
|
||||
is to pin the tab so that it's always open, but sort of out of the way:
|
||||
|
||||
<figure markdown>
|
||||
{ width=500 }
|
||||
<figcaption>Pin web app to move it out of the way</figcaption>
|
||||
</figure>
|
||||
|
||||
If topic reservations are enabled, you can claim ownership over topics and define access to it:
|
||||
|
||||
<div id="reserve-screenshots" class="screenshots">
|
||||
<a href="../../static/img/web-reserve-topic.png"><img src="../../static/img/web-reserve-topic.png"/></a>
|
||||
<a href="../../static/img/web-reserve-topic-dialog.png"><img src="../../static/img/web-reserve-topic-dialog.png"/></a>
|
||||
</div>
|
||||
|
||||
You can set your default choice for new subscriptions (for example synced account subscriptions and the default toggle state)
|
||||
in the settings page:
|
||||
|
||||
<div id="push-settings-screenshots" class="screenshots">
|
||||
<a href="../../static/img/web-push-settings.png"><img src="../../static/img/web-push-settings.png"/></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue