Cont'd docs

pull/779/head
binwiederhier 2023-06-24 22:08:57 -04:00
parent be4c80e201
commit c0ac2c95ca
8 changed files with 58 additions and 36 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

View File

@ -1,32 +0,0 @@
# 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) (PWA)
and thus can be installed on both desktop and mobile devices.
This gives it its own launcher (e.g. shortcut on Windows, app on macOS, launcher shortcut on Linux, home screen icon on iOS, and
launcher icon on Android), a standalone window, push notifications, and an app badge with the unread notification count.
To install and register the web app in your operating system, click the "install app" icon in your browser (usually next to the
address bar). On iOS Safari, tap on the Share menu > "Add to Home Screen".
## Background Notifications
Background notifications via web push are enabled by default and cannot be turned off when the app is installed, as notifications would
not be delivered reliably otherwise. You can mute topics you don't want to receive notifications for.
On desktop, you generally need either your browser or the web app open to receive notifications, though the ntfy tab doesn't need to be
open. On mobile, you don't need to have the web app open to receive notifications. Look at the [web docs](./web.md#background-notifications)
for a detailed breakdown.
## Compatibility
<!-- TODO: (Q4 2023) Safari 17 / macOS 14 Sonoma supports installable PWAs too -->
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.
<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>

View File

@ -0,0 +1,55 @@
# Using the progressive web app (PWA)
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) (PWA)
and thus can be installed on both desktop and mobile devices.
This gives it its own launcher (e.g. shortcut on Windows, app on macOS, launcher shortcut on Linux, home screen icon on iOS, and
launcher icon on Android), a standalone window, push notifications, and an app badge with the unread notification count.
Web app installation is supported on (see [compatibility table](https://caniuse.com/web-app-manifest) for details):
- Chrome on all platforms (Windows/Linux/macOS/Android/iOS)
- Firefox on Android natively, and on Windows/Linux ([via an extension](https://addons.mozilla.org/en-US/firefox/addon/pwas-for-firefox/))
- Edge on Windows
- Safari on macOS/iOS
<!-- TODO: (Q4 2023) Safari 17 / macOS 14 Sonoma supports installable PWAs too -->
## Installation
### Chrome/Safari on Desktop
To install and register the web app via Chrome, click the "install app" icon. After installation, you can find the app in your
app drawer:
<div id="pwa-screenshots-chrome-safari-desktop" class="screenshots">
<a href="../../static/img/pwa-install.png"><img src="../../static/img/pwa-install.png"/></a>
<a href="../../static/img/pwa.png"><img src="../../static/img/pwa.png"/></a>
<a href="../../static/img/pwa-badge.png"><img src="../../static/img/pwa-badge.png"/></a>
</div>
### Chrome on Android
For Chrome on Android, either click the "Add to Home Screen" banner at the bottom of the screen, or select "install app"
in the menu. After installation, you can find the app in your app drawer, and on your home screen.
<div id="pwa-screenshots-chrome-android" class="screenshots">
<a href="../../static/img/pwa-install-chrome-android.jpg"><img src="../../static/img/pwa-install-chrome-android.jpg"/></a>
<a href="../../static/img/pwa-install-chrome-android-menu.jpg"><img src="../../static/img/pwa-install-chrome-android-menu.jpg"/></a>
<a href="../../static/img/pwa-install-chrome-android-popup.jpg"><img src="../../static/img/pwa-install-chrome-android-popup.jpg"/></a>
</div>
### Firefox on Android
XXXXXXXXXXX
### Safari on iOS
On iOS Safari, tap on the Share menu > "Add to Home Screen".
XXXXXXx
## Background notifications
Background notifications via web push are enabled by default and cannot be turned off when the app is installed, as notifications would
not be delivered reliably otherwise. You can mute topics you don't want to receive notifications for.
On desktop, you generally need either your browser or the web app open to receive notifications, though the ntfy tab doesn't need to be
open. On mobile, you don't need to have the web app open to receive notifications. Look at the [web docs](./web.md#background-notifications)
for a detailed breakdown.

View File

@ -23,11 +23,10 @@ If topic reservations are enabled, you can claim ownership over topics and defin
<a href="../../static/img/web-reserve-topic-dialog.png"><img src="../../static/img/web-reserve-topic-dialog.png"/></a> <a href="../../static/img/web-reserve-topic-dialog.png"><img src="../../static/img/web-reserve-topic-dialog.png"/></a>
</div> </div>
## Background Notifications ## Background notifications
While subscribing, you have the option to enable background notifications on supported browsers (see "Settings" tab). While subscribing, you have the option to enable background notifications on supported browsers (see "Settings" tab).
Note: If you add the web app to your homescreen (as a progressive web app, more info in the [installed web app](./installed-web-app.md) Note: If you add the web app to your homescreen (as a progressive web app, more info in the [installed web app](pwa.md)
docs), you cannot turn these off, as notifications would not be delivered reliably otherwise. You can mute topics you don't want to receive docs), you cannot turn these off, as notifications would not be delivered reliably otherwise. You can mute topics you don't want to receive
notifications for. notifications for.

View File

@ -82,7 +82,7 @@ nav:
- "Subscribing": - "Subscribing":
- "From your phone": subscribe/phone.md - "From your phone": subscribe/phone.md
- "From the Web app": subscribe/web.md - "From the Web app": subscribe/web.md
- "From the Desktop": subscribe/desktop.md - "From the Desktop": subscribe/pwa.md
- "From the CLI": subscribe/cli.md - "From the CLI": subscribe/cli.md
- "Using the API": subscribe/api.md - "Using the API": subscribe/api.md
- "Self-hosting": - "Self-hosting":