Cont'd docs
parent
be4c80e201
commit
c0ac2c95ca
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 |
|
@ -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>
|
|
|
@ -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.
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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":
|
||||||
|
|
Loading…
Reference in New Issue