Update user handbook with images and instructions for the Safari Browser

CHANGELOG.rst

@@ -67,6 +67,7 @@ Changed
 Fixed
 ~~~~~
 
+* The user handbook was lacking images and instructions on PWA usage with the Safari browser.
 * The ``reset password`` button on the login site used to overflow the card on smaller devices.
 
 Deprecated

docs/user/20_pwa.rst

@@ -6,7 +6,7 @@ What is a progressive web application?
 
 A PWA is an application developed with common web technologies and
 delivered in form of a website, but which offers some features a
-traditional website does not and ,overall, creates an impression that
+traditional website does not and overall creates an impression that
 resembles that of a native application.
 
 AlekSIS PWA features
@@ -30,19 +30,39 @@ platform to platform. On some, you are prompted to add AlekSIS to your
 home screen of desktop using a popup; on others, you have to take action
 yourself and find the corresponding menu entry. As of the time of
 writing, “installable” PWAs are supported by all major platforms except
-Firefox Desktop which nevertheless supports the other features.
-
--  Chromium-based browsers (e.g. Chromium, Google Chrome, Microsoft
-   Edge) will usually prompt you to install the PWA by a popup on both
-   mobile and desktop devices; for the former using a banner and for the
-   latter using an appearing button in the adress bar. In both cases, a
-   click on the notification is enough to start the installation
-   process.
--  Firefox Mobile will also probably prompt you using a dot near the
-   menu button; then “install” has to been clicked.
--  On Safari you need to open the share popup and click on the “Add to
-   Home Screen” button.
-
-Independent of the used platform, AlekSIS can be accessed as an
+Firefox Desktop and Safari Desktop which nevertheless support the other features.
+
+Chromium-based browsers (e.g. Chromium, Google Chrome, Microsoft
+Edge) will usually prompt you to install the PWA by a popup on both
+mobile and desktop devices; for the former using a banner
+
+.. image:: ../_static/pwa_mobile_chromium.png
+  :width: 100%
+  :alt: PWA installation prompt on the mobile version of the Chromium browser
+
+and for the latter using an appearing button in the address bar.
+
+.. image:: ../_static/pwa_desktop_chromium.png
+  :width: 100%
+  :alt: PWA installation prompt on the desktop version of the Chromium browser
+
+In both cases, a click on the notification is enough to start
+the installation process.
+
+Firefox Mobile will also prompt you using a dot near the
+menu button; then ``Install`` has to be clicked.
+
+.. image:: ../_static/pwa_mobile_firefox.png
+  :width: 100%
+  :alt: PWA installation prompt on the mobile version of the Firefox browser
+
+On Safari Mobile, you need to open the share popup and click on the
+``Add to Home Screen`` button.
+
+.. image:: ../_static/pwa_mobile_safari.png
+  :width: 100%
+  :alt: PWA installation prompt on the mobile version of the Safari browser
+
+No matter what platform is used, AlekSIS can be accessed as an
 independent application entry, just like any other installed native
 application, after installation.