feat(pwa): add FAQ to PWA docs and link on push subscription error (#1767)

Co-authored-by: Michel EDIGHOFFER <edimitchel@gmail.com>

components/notification/NotificationSubscribePushNotificationError.vue

@@ -36,6 +36,14 @@ const { modelValue } = defineModel<{
       </CommonTooltip>
     </head>
     <p>{{ message }}</p>
+    <p py-2>
+      <i18n-t keypath="settings.notifications.push_notifications.subscription_error.error_hint">
+        <NuxtLink font-bold href="https://docs.elk.zone/pwa#faq" target="_blank" inline-flex="~ row" items-center gap-x-2>
+          https://docs.elk.zone/pwa#faq
+          <span inline-block aria-hidden="true" i-ri:external-link-line class="rtl-flip" />
+        </NuxtLink>
+      </i18n-t>
+    </p>
     <p py-2>
       <NuxtLink font-bold text-primary href="https://github.com/elk-zone/elk" target="_blank" flex="~ row" items-center gap-x-2>
         {{ $t('settings.notifications.push_notifications.subscription_error.repo_link') }}

docs/content/80.pwa.md

@@ -51,6 +51,44 @@ To install a Progressive Web App (PWA) on Chromium based browsers, such as Googl
 - Customize the name of the app (if desired) and click "Install" or "Add".
 - The PWA should now appear on your device's home screen or in your app drawer.
 
+## FAQ
+
+This FAQ is related to the PWA application on Elk, if you can't find the answer to your problem here, you can [file an issue on Elk's repository in GitHub](https://github.com/elk-zone/elk).
+
+### Could not subscribe to push notifications
+
+In Elk application, you can only have one push subscription per backend server, so if you have already subscribed to push notifications in another account with different backend, you will not be able to subscribe to push notifications. If that's the case, you will need to switch to the account which is subscribed to push notifications and unsubscribe it.
+
+This is a limitation of any browser, and it's not related only to Elk application.
+
+If you deleted any account from your backend with push notification subscription enabled in Elk, you will need to remove the push notification subscriptions from your browser:
+- [Chrome - Web and Android](https://www.connecto.io/kb/knwbase/how-to-unsubscribe-from-chrome-notifications-on-web-and-android/).
+- Firefox:
+  - Open settings
+  - Click on "Privacy & Security" menu entry
+  - Scroll down in the page and locate "Permissions > Notifications"
+  - Click on "Configuration" button
+  - Locate "Elk" website in the list and select it, then click on "Remove website" button
+- Safari (WIP) 
+
+### Permission denied: enable notifications in your browser
+
+Before enabled push notifications in your browser, you need to enable notifications, Elk will instruct the browser to show a notification permission prompt.
+
+If you cannot see the notification permission prompt, you will need to remove push notification subscriptions, check previous entry.
+
+### Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.
+
+If you're receiving this error, it means that your browser doesn't support the VAPID protocol, and you will not be able to receive push notifications.
+
+There is nothing we can do to fix this, you will need to use a browser that supports the VAPID protocol: Chrome, Edge, Safari and Firefox.
+
+### Install Elk button not working
+
+There are browsers that allows applications to provide a custom PWA installation prompt, but there are also browsers with that behavior broken, for example Arc browser.
+
+There is nothing we can do to fix this problem, you will need to check browser documentation to install the PWA.
+
 ## PWA Configuration in Elk project
 
 By default, Elk will enable the PWA integration, but can be disabled by setting `VITE_DEV_PWA` to `false` in your `.env` file.

locales/en.json

@@ -374,6 +374,7 @@
         "save_settings": "Save settings",
         "subscription_error": {
           "clear_error": "Clear error",
+          "error_hint": "You can consult a list of frequently asked questions to try to solve the problem: {0}.",
           "invalid_vapid_key": "The VAPID public key seems to be invalid.",
           "permission_denied": "Permission denied: enable notifications in your browser.",
           "repo_link": "Elk's repository in GitHub",

locales/es.json

@@ -374,6 +374,7 @@
         "save_settings": "Guardar cambios",
         "subscription_error": {
           "clear_error": "Limpiar error",
+          "error_hint": "Puede consultar una lista de preguntas más frecuentes para tratar de solucionar el problema: {0}.",
           "invalid_vapid_key": "La clave pública VAPID parece no ser válida.",
           "permission_denied": "Permiso denegado: habilita las notificaciones en tu navegador.",
           "repo_link": "Repositorio de Elk en GitHub",