Відкриття PWA для IOS

Реалізація відкриття PWA на iOS за deep-link з WhatsApp

1. Загальний опис

Проєкт створений на платформі Lovable.

Додаток працює як PWA (Progressive Web App) та встановлюється користувачами на iPhone через Safari ("Додати на екран додому").

Необхідно реалізувати механізм, при якому:

Користувач отримує повідомлення у WhatsApp

У повідомленні міститься URL з конкретним маршрутом (наприклад:

https://domain.com/order/123)

При натисканні на посилання:

якщо PWA встановлений — відкривається саме PWA,

і одразу відкривається сторінка, що відповідає URL

якщо PWA не встановлений — відкривається веб-версія у Safari

2. Функціональні вимоги

2.1 Deep Linking

Реалізувати коректну обробку deep-link у PWA на iOS:

Підтримка відкриття маршруту типу:

/order/:id

/client/:id

інші внутрішні маршрути (SPA-навігація)

При відкритті через Safari або WhatsApp:

якщо додаток встановлений через Home Screen → відкривається PWA

маршрут не втрачається

сторінка не редіректиться на головну

2.2 Поведінка при встановленому PWA

Якщо користувач вже встановив PWA:

Посилання з WhatsApp повинно:

відкривати саме встановлений додаток

зберігати маршрут

коректно ініціалізувати стан (auth, дані, токени)

2.3 Поведінка при неавторизованому користувачі

Якщо користувач не залогінений:

Після відкриття deep-link:

відкривається сторінка логіну

після успішної авторизації — редірект на первинний маршрут

3. Технічні вимоги

3.1 PWA конфігурація

Перевірити та при необхідності реалізувати:

Коректний manifest.json

start_url

scope

display: standalone

HTTPS обов'язково

Коректна робота Service Worker

Відсутність повних перезавантажень сторінок (SPA)

3.2 iOS специфіка

Врахувати особливості iOS:

PWA відкривається в окремому standalone-контексті

Потрібно забезпечити:

правильну обробку window.location

коректну ініціалізацію роутера

збереження параметрів URL

3.3 Маршрутизація

Якщо використовується:

Next.js / React Router / інший SPA роутер —

необхідно гарантувати:

роботу прямого відкриття маршруту

роботу при оновленні сторінки

роботу через deep-link

4. Приклад сценарію

Статус замовлення змінюється

Система відправляє WhatsApp повідомлення з URL:

Копировать код

https://domain.com/order/4582

Користувач натискає посилання

Якщо PWA встановлений:

відкривається PWA

відкривається сторінка замовлення №4582

Якщо PWA не встановлений:

відкривається веб-версія

5. Очікуваний результат

PWA коректно відкривається з deep-link на iOS

Маршрут не губиться

Не відбувається редірект на головну

Авторизація зберігається

Поведінка стабільна при повторному відкритті

6. Бажано

Тестування на реальному iPhone

Перевірка відкриття з:

WhatsApp

Safari

Telegram

Врахування edge-cases:

додаток у фоні

додаток повністю закритий

закінчився токен