Testowanie na urządzeniach mobilnych

Użyj przełącznika widoku responsywnego w builderze do szybkiej weryfikacji, a następnie opublikuj aplikację i przetestuj ją na prawdziwym urządzeniu, gdy chodzi o zachowania dostępne wyłącznie na mobile.

Testowanie mobilne w Proyecta odbywa się na dwóch poziomach: responsywny podgląd wbudowany w builder oraz testowanie na prawdziwym urządzeniu pod opublikowanym adresem URL.

Responsywny podgląd w builderze

Panel podglądu zawiera przełącznik widoku w pasku adresu:

Tryb	Wymiary
Desktop	Pełna szerokość okna
Tablet	768 × 1024
Mobile	390 × 844

Przełączaj między nimi podczas edycji, aby wcześnie wykryć problemy z układem. To najszybszy sposób na wychwycenie oczywistych błędów responsywności (przepełnienie, uszkodzone siatki, przyciski niemożliwe do naciśnięcia).

Otwórz aplikację na telefonie za pomocą kodu QR

Najszybszym sposobem na uruchomienie aplikacji na prawdziwym urządzeniu jest zakładka Mobile → Test w dashboardzie. Po opublikowaniu aplikacji wyświetla się tam kod QR — zeskanuj go aparatem swojego telefonu, aby natychmiast otworzyć działającą aplikację. Dostępny jest też przycisk Copy link, jeśli wolisz przesłać sobie URL w inny sposób. (Jeśli aplikacja nie została jeszcze opublikowana, zakładka poprosi Cię o jej publikację — testowanie na urządzeniu wymaga aktywnego adresu URL.)

Testowanie na prawdziwym urządzeniu

Przełącznik widoku symuluje jedynie wymiary ekranu — nie symuluje dotyku, rzeczywistych opóźnień sieci, osobliwości mobilnych przeglądarek ani zachowań specyficznych dla danej platformy. W przypadku wszystkiego, co naprawdę ma znaczenie (interakcje dotykowe, monity o instalację, powiadomienia push, kamera, GPS), przetestuj na prawdziwym urządzeniu:

Opublikuj aplikację w jej subdomenie *.proyecta.live
Otwórz adres URL w przeglądarce na swoim telefonie
Jeśli dodałeś obsługę PWA, wybierz Add to Home Screen i przetestuj zainstalowaną wersję
Przejdź przez funkcje, które Cię interesują

Rzeczy, które można wychwycić tylko na prawdziwym urządzeniu

Rozmiary obszarów dotyku — palce są większe niż wskaźnik myszy
Przyklejone elementy (sticky) — jednostki viewport zachowują się inaczej przy chrome mobilnych przeglądarek
Wypełnianie formularzy — autouzupełnianie, typy klawiatury, autocomplete
Osobliwości iOS Safari — problemy z 100vh, odbijanie przy przewijaniu, pozycjonowanie fixed
Przepływ żądania uprawnień dla powiadomień push — działa tylko w opublikowanym źródle po HTTPS w karcie przeglądarki najwyższego poziomu; nie zadziała wewnątrz panelu podglądu buildera (nawet gdy podgląd jest już serwowany przez HTTPS).
Wydajność na rzeczywistym (wolniejszym) sprzęcie

Wskazówki dotyczące testowania

Korzystaj z narzędzi deweloperskich swojego telefonu. Safari na macOS może połączyć się z mobilnym Safari do debugowania na żywo; Chrome może połączyć się z Android Chrome.
Testuj też w orientacji poziomej. Większość deweloperów testuje tylko orientację pionową i przegapia błędy w poziomej.
Testuj przy włączonym trybie oszczędzania energii. Animacje i timery zachowują się inaczej.
Testuj powiadomienia push PWA na prawdziwym iPhonie. Powiadomienia push na iOS działają wyłącznie z PWA zainstalowanej przez Safari.