diff --git a/CHANGELOG.rst b/CHANGELOG.rst index c2a9e2cfa662e0705c27ac709003883aae431b54..18c5ea9a0a1b3b6727cb9c57db4ed64930aa1048 100644 --- a/CHANGELOG.rst +++ b/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 diff --git a/docs/_static/pwa-mobile-safari.png b/docs/_static/pwa-mobile-safari.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc4f21e04cecb69d70f56903275c18891aaca63 Binary files /dev/null and b/docs/_static/pwa-mobile-safari.png differ diff --git a/docs/_static/pwa_desktop_chromium.png b/docs/_static/pwa_desktop_chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..b2f2bb10a380a6147f1a1f516dc6aaf07cb7b545 Binary files /dev/null and b/docs/_static/pwa_desktop_chromium.png differ diff --git a/docs/_static/pwa_mobile_chromium.png b/docs/_static/pwa_mobile_chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..3ea9f86d0f13f1e88f030453a16141bb2aba7f60 Binary files /dev/null and b/docs/_static/pwa_mobile_chromium.png differ diff --git a/docs/_static/pwa_mobile_firefox.png b/docs/_static/pwa_mobile_firefox.png new file mode 100644 index 0000000000000000000000000000000000000000..482614a3698797115693bf0d9736113bbad9929b Binary files /dev/null and b/docs/_static/pwa_mobile_firefox.png differ diff --git a/docs/user/20_pwa.rst b/docs/user/20_pwa.rst index 461bd113c14747843ac22f66a77bb22bde96d6d3..85d8ef9c95a9034cad88b4ee09f0e1d939da015d 100644 --- a/docs/user/20_pwa.rst +++ b/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.