Otwarcie PWA dla IOS

Realizacja otwarcia PWA na iOS za deep-link z WhatsApp

1. Ogólny opis

Projekt stworzony na platformie Lovable.

Aplikacja działa jako PWA (Progressive Web App) i jest instalowana przez użytkowników na iPhone przez Safari ("Dodaj na ekranie głównym").

Konieczne jest wdrożenie mechanizmu, w którym:

Użytkownik otrzymuje wiadomość w WhatsApp

W wiadomości znajduje się URL z konkretną trasą (na przykład:

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

Po kliknięciu w link:

jeśli PWA jest zainstalowane — otwiera się PWA,

i od razu otwiera się strona odpowiadająca URL

jeśli PWA nie jest zainstalowane — otwiera się wersja webowa w Safari

2. Wymagania funkcjonalne

2.1 Deep Linking

Wdrożyć poprawne przetwarzanie deep-link w PWA na iOS:

Wsparcie dla otwierania tras typu:

/order/:id

/client/:id

inne wewnętrzne trasy (nawigacja SPA)

Po otwarciu przez Safari lub WhatsApp:

jeśli aplikacja jest zainstalowana przez Ekran Główny → otwiera się PWA

trasa nie jest tracona

strona nie jest przekierowywana na główną

2.2 Zachowanie przy zainstalowanym PWA

Jeśli użytkownik już zainstalował PWA:

Link z WhatsApp powinien:

otwierać zainstalowaną aplikację

zachować trasę

poprawnie inicjalizować stan (auth, dane, tokeny)

2.3 Zachowanie przy nieautoryzowanym użytkowniku

Jeśli użytkownik nie jest zalogowany:

Po otwarciu deep-link:

otwiera się strona logowania

po udanej autoryzacji — przekierowanie na pierwotną trasę

3. Wymagania techniczne

3.1 Konfiguracja PWA

Sprawdzić i w razie potrzeby wdrożyć:

Poprawny manifest.json

start_url

scope

display: standalone

HTTPS obowiązkowo

Poprawna praca Service Worker

Brak pełnych przeładowań stron (SPA)

3.2 Specyfika iOS

Uwzględnić cechy iOS:

PWA otwiera się w osobnym kontekście standalone

Należy zapewnić:

poprawne przetwarzanie window.location

poprawną inicjalizację routera

zachowanie parametrów URL

3.3 Routing

Jeśli używane jest:

Next.js / React Router / inny router SPA —

należy zagwarantować:

działanie bezpośredniego otwierania trasy

działanie przy odświeżaniu strony

działanie przez deep-link

4. Przykład scenariusza

Status zamówienia zmienia się

System wysyła wiadomość WhatsApp z URL:

Kopiować kod

https://domain.com/order/4582

Użytkownik klika w link

Jeśli PWA jest zainstalowane:

otwiera się PWA

otwiera się strona zamówienia nr 4582

Jeśli PWA nie jest zainstalowane:

otwiera się wersja webowa

5. Oczekiwany wynik

PWA poprawnie otwiera się z deep-link na iOS

Trasa nie ginie

Nie następuje przekierowanie na główną

Autoryzacja jest zachowywana

Zachowanie stabilne przy ponownym otwarciu

6. Pożądane

Testowanie na rzeczywistym iPhone

Sprawdzenie otwierania z:

WhatsApp

Safari

Telegram

Uwzględnienie edge-cases:

aplikacja w tle

aplikacja całkowicie zamknięta

token wygasł