Testen op mobiel
Gebruik de responsieve viewport-switcher in de builder voor een snelle controle, en publiceer daarna om te testen op een echt apparaat voor alles wat mobielspecifiek gedrag betreft.
Mobiel testen in Proyecta kent twee lagen: de responsieve preview in de builder, en het testen op een echt apparaat via een gepubliceerde URL.
Responsieve preview in de builder
Section titled “Responsieve preview in de builder”Het previewpaneel bevat een viewport-switcher in de adresbalk:
| Modus | Afmetingen |
|---|---|
| Desktop | Volledige vensterbreedte |
| Tablet | 768 × 1024 |
| Mobile | 375 × 667 |
Wissel hiertussen tijdens het bewerken om lay-outproblemen vroeg op te sporen. Dit is de snelste manier om voor de hand liggende responsieve bugs te ontdekken (overflow, kapotte grids, knoppen die niet aan te tikken zijn).
Testen op een echt apparaat
Section titled “Testen op een echt apparaat”De viewport-switcher simuleert alleen afmetingen — hij simuleert geen touch-invoer, latentie in de praktijk, eigenaardigheden van mobiele browsers of platformspecifiek gedrag. Voor alles wat er echt toe doet (touch-interacties, installatieprompts, pushmeldingen, camera, GPS) test je op een echt apparaat:
- Publiceer je app naar het bijbehorende
*.proyecta.live-subdomein - Open de URL in de browser van je telefoon
- Als je PWA-ondersteuning hebt toegevoegd, kies dan Add to Home Screen en test de geïnstalleerde ervaring
- Loop de flows door die voor jou belangrijk zijn
Dingen die je alleen op een echt apparaat kunt ontdekken
Section titled “Dingen die je alleen op een echt apparaat kunt ontdekken”- Grootte van tikdoelen — vingers zijn groter dan muisaanwijzers
- Sticky-elementen — viewport-eenheden gedragen zich anders door de chrome van de mobiele browser
- Formulierinvoer — automatisch invullen, toetsenbordtypen, autocomplete
- iOS Safari-eigenaardigheden —
100vh-problemen, scroll-bouncing, vaste positionering - Toestemmingsflow voor pushmeldingen — werkt alleen op een gepubliceerde origin via HTTPS in een browsertabblad op het hoogste niveau; het wordt niet geactiveerd in het previewpaneel van de builder (ook niet als de preview al via HTTPS wordt aangeboden).
- Prestaties op echte (langzamere) hardware
Testtips
Section titled “Testtips”- Gebruik de ontwikkelaarstools van je telefoon. Safari op macOS kan verbinding maken met mobiele Safari voor live debugging; Chrome kan verbinding maken met Android Chrome.
- Test ook in liggende weergave. De meeste ontwikkelaars testen alleen in staande weergave en missen bugs in liggende weergave.
- Test met de energiebesparingsmodus ingeschakeld. Animaties en timers gedragen zich dan anders.
- Test op een echte iPhone voor PWA-pushmeldingen. Pushmeldingen op iOS werken alleen vanuit een PWA die via Safari is geïnstalleerd.