Improve web push docs

This commit is contained in:
nimbleghost 2023-05-29 22:09:40 +02:00
parent a9fef387fa
commit f94bb1aa30
4 changed files with 84 additions and 24 deletions

View file

@ -1,9 +1,17 @@
# Using the web app as an installed PWA
# Using the web app as an installed web app
While ntfy doesn't have a native desktop app, it is built as a [progressive web app](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
and thus can be installed on both desktop and mobile.
This gives it its own launcher (e.g. shortcut on Windows, app on macOS, launcher shortcut on Linux) own window,
push notifications, and an app badge with the unread notification count.
To receive background notifications, either the browser or the installed web app must be open.
Web app installation is supported on Chrome and Edge on desktop, as well as Chrome on Android and Safari on iOS.
Look at the [compatibility table](https://caniuse.com/web-app-manifest) for more info.
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>

View file

@ -7,35 +7,37 @@ enable them for the first time, you will be prompted to allow notifications on y
- **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.
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).
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.
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.
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.
Background notifications are only supported on the same server hosting the web app. You cannot use another server,
but can instead subscribe on the other server itself.
| 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)
| Browser | Platform | Browser Running | Browser Not Running | Restrictions |
| ------- | -------- | --------------- | ------------------- | ------------------------------------------------------- |
| 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](https://caniuse.com/push-api) for more info)
To learn how to send messages, check out the [publishing page](../publish.md).