add iOS instructions

apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue

@@ -1,8 +1,41 @@
 <template>
   <CreateMessageDeliveryOption :isLoading :label :method v-model="model" />
 
+  <!-- Инструкции для iOS -->
+  <div
+    v-if="showRequireStandaloneInstructionsForIOS"
+    class="bg-yellow-100 text-yellow-800 p-4 rounded my-4"
+  >
+    <p class="mb-2">Чтобы включить уведомления, добавьте это приложение на главный экран:</p>
+    <ul class="list-disc pl-5">
+      <li class="mb-1">
+        Нажмите
+        <strong class="font-semibold">
+          "<img
+            src="@/assets/icons/apple-share.svg?url"
+            alt="Поделиться"
+            class="h-7 -mt-2 inline-block"
+          />"
+        </strong>
+        внизу экрана
+      </li>
+      <li class="mb-1">
+        Выберите
+        <strong class="inline-flex items-baseline font-semibold">
+          <span class="me-1">"На экран «Домой»</span>
+          <img
+            src="@/assets/icons/apple-system-plus.svg?url"
+            alt=""
+            class="h-4 inline-block self-center"
+          />"
+        </strong>
+      </li>
+      <li>Откройте приложение с главного экрана и повторите попытку.</li>
+    </ul>
+  </div>
+
   <!-- Ошибка разрешений -->
-  <p v-if="isError && model === method" class="text-red-500 mb-2">
+  <p v-else-if="isError && model === method" class="text-red-500 mb-2">
     {{ error }}.<br />
     <button @click="retry()" class="text-blue-500 underline">Повторить</button>
   </p>
@@ -13,12 +46,17 @@ import { type QRCodeDocument } from '@/types/DBDocumentTypes'
 import { type DeliveryOption, DELIVERY_METHOD_WEB_PUSH } from '@/constants/deliveryOptions'
 import { computed } from 'vue'
 import { useQuery } from '@tanstack/vue-query'
-
 import { getVapidPublicKey, saveWebPushSubscription } from '@/api/webPush'
 
-type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
+// Проверки iOS и запуска из главного экрана
+const isIOS = computed(
+  () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window && window.MSStream),
+)
+const isStandalone = computed(() => 'standalone' in window.navigator && window.navigator.standalone)
 
-defineProps<{
+// Пропсы
+type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
+const props = defineProps<{
   label: DeliveryOptionWebPush['label']
   method: DeliveryOptionWebPush['method']
 }>()
@@ -32,7 +70,11 @@ const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
 // Функция запроса разрешений и подписки
 async function requestNotificationPermission() {
   if (!('Notification' in window)) {
-    throw new Error('Уведомления не поддерживаются этим браузером.')
+    throw new Error(
+      isIOS.value && !isStandalone.value
+        ? 'Добавьте приложение на главный экран, чтобы использовать уведомления.'
+        : 'Уведомления не поддерживаются этим браузером.',
+    )
   }
 
   try {
@@ -59,6 +101,7 @@ async function requestNotificationPermission() {
   }
 }
 
+// Хуки для состояния запроса
 const {
   isLoading,
   isError,
@@ -70,4 +113,8 @@ const {
   queryFn: () => requestNotificationPermission(),
   retry: false,
 })
+
+const showRequireStandaloneInstructionsForIOS = computed(
+  () => isError.value && isIOS.value && !isStandalone.value && model.value === props.method,
+)
 </script>