Add web push tests

docs/subscribe/desktop.md

@@ -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>

docs/subscribe/web.md

@@ -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>
-  ![pinned](../static/img/web-pin.png){ 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>