Przejdź do głównej zawartości

Testowanie na urządzeniach mobilnych

Użyj przełącznika rozmiaru widoku w builderze do szybkiego sprawdzenia, a następnie opublikuj aplikację i przetestuj ją na prawdziwym urządzeniu, aby zweryfikować zachowania dostępne tylko na urządzeniach mobilnych.

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

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

TrybWymiary
DesktopPełna szerokość okna
Tablet768 × 1024
Mobile375 × 667

Przełączaj między trybami podczas edycji, aby wcześnie wykryć problemy z układem. To najszybszy sposób na wyłapanie oczywistych błędów responsywności (overflow, rozjechane siatki, przyciski trudne do kliknięcia).

Przełącznik rozmiaru widoku jedynie symuluje wymiary ekranu — nie odwzorowuje obsługi dotyku, rzeczywistych opóźnień sieci, specyfiki mobilnych przeglądarek ani zachowań charakterystycznych dla konkretnych platform. W przypadku wszystkiego, co naprawdę ma znaczenie (interakcje dotykowe, monity instalacji, powiadomienia push, aparat, GPS), testuj na prawdziwym urządzeniu:

  1. Opublikuj swoją aplikację w subdomenie *.proyecta.live
  2. Otwórz adres URL w przeglądarce na swoim telefonie
  3. Jeśli dodałeś obsługę PWA, wybierz Add to Home Screen i przetestuj doświadczenie po zainstalowaniu
  4. Przejdź przez wszystkie przepływy, które chcesz zweryfikować
  • Rozmiary obszarów do kliknięcia — palce są większe niż wskaźnik myszy
  • Elementy przyklejone (sticky) — jednostki viewport zachowują się inaczej w obecności interfejsu mobilnej przeglądarki
  • Obsługa formularzy — autouzupełnianie, typy klawiatury, autocomplete
  • Specyfika iOS Safari — problemy z 100vh, efekt sprężystości przy przewijaniu, pozycjonowanie fixed
  • Przepływ uprawnień do powiadomień push — działa wyłącznie na opublikowanej domenie przez HTTPS w głównej karcie przeglądarki; nie zadziała wewnątrz panelu podglądu buildera (nawet jeśli podgląd jest już serwowany przez HTTPS).
  • Wydajność na rzeczywistym (wolniejszym) sprzęcie
  • Skorzystaj 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 Chrome na Androidzie.
  • Testuj też w orientacji poziomej. Większość deweloperów testuje tylko orientację pionową i przeocza błędy w orientacji poziomej.
  • Testuj z włączonym trybem oszczędzania energii. Animacje i timery zachowują się wtedy inaczej.
  • Testuj powiadomienia push PWA na prawdziwym iPhonie. Powiadomienia push na iOS działają tylko z poziomu PWA zainstalowanej przez Safari.