diff --git a/docs/static/img/pwa-install-chrome-android-menu.jpg b/docs/static/img/pwa-install-chrome-android-menu.jpg new file mode 100644 index 00000000..1c258d64 Binary files /dev/null and b/docs/static/img/pwa-install-chrome-android-menu.jpg differ diff --git a/docs/static/img/pwa-install-chrome-android-popup.jpg b/docs/static/img/pwa-install-chrome-android-popup.jpg new file mode 100644 index 00000000..90c77c77 Binary files /dev/null and b/docs/static/img/pwa-install-chrome-android-popup.jpg differ diff --git a/docs/static/img/pwa-install-chrome-android.jpg b/docs/static/img/pwa-install-chrome-android.jpg new file mode 100644 index 00000000..7f89503f Binary files /dev/null and b/docs/static/img/pwa-install-chrome-android.jpg differ diff --git a/docs/static/img/pwa-install-chrome.png b/docs/static/img/pwa-install-chrome.png new file mode 100644 index 00000000..baae5b29 Binary files /dev/null and b/docs/static/img/pwa-install-chrome.png differ diff --git a/docs/subscribe/installed-web-app.md b/docs/subscribe/installed-web-app.md deleted file mode 100644 index d7c54241..00000000 --- a/docs/subscribe/installed-web-app.md +++ /dev/null @@ -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 - - - -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. - -
- - - -
diff --git a/docs/subscribe/pwa.md b/docs/subscribe/pwa.md new file mode 100644 index 00000000..0c242f60 --- /dev/null +++ b/docs/subscribe/pwa.md @@ -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 + + + +## 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: + +
+ + + + +
+ +### 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. + +
+ + + +
+ +### 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. diff --git a/docs/subscribe/web.md b/docs/subscribe/web.md index 0faa8cb4..8f492266 100644 --- a/docs/subscribe/web.md +++ b/docs/subscribe/web.md @@ -23,11 +23,10 @@ If topic reservations are enabled, you can claim ownership over topics and defin -## Background Notifications - +## Background notifications 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 notifications for. diff --git a/mkdocs.yml b/mkdocs.yml index 76d39299..7b14ee0c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -82,7 +82,7 @@ nav: - "Subscribing": - "From your phone": subscribe/phone.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 - "Using the API": subscribe/api.md - "Self-hosting":