تست روی موبایل
برای بررسی سریع از سوئیچر viewport واکنشگرا در builder استفاده کنید، سپس برنامه را publish کرده و روی دستگاه واقعی برای هر چیزی که به رفتارهای مخصوص موبایل مربوط میشود تست بگیرید.
تست موبایل در Proyecta دو لایه دارد: پیشنمایش واکنشگرا درون builder، و تست روی دستگاه واقعی از طریق یک URL منتشرشده.
پیشنمایش واکنشگرا در builder
Section titled “پیشنمایش واکنشگرا در builder”پنل پیشنمایش شامل یک سوئیچر viewport در نوار آدرس است:
| حالت | ابعاد |
|---|---|
| Desktop | عرض کامل پنجره |
| Tablet | 768 × 1024 |
| Mobile | 390 × 844 |
هنگام ویرایش بین این حالتها جابهجا شوید تا مشکلات layout را زودتر شناسایی کنید. این سریعترین روش برای یافتن باگهای آشکار واکنشگرا (overflow، gridهای شکسته، دکمههایی که قابل لمس نیستند) است.
باز کردن برنامه روی گوشی با QR code
Section titled “باز کردن برنامه روی گوشی با QR code”سریعترین راه برای تست روی دستگاه واقعی، تب Mobile → Test در داشبورد است. پس از publish شدن برنامهتان، یک QR code نمایش داده میشود — آن را با دوربین گوشی اسکن کنید تا برنامه زنده بلافاصله باز شود. همچنین یک دکمه Copy link وجود دارد اگر ترجیح میدهید URL را برای خودتان ارسال کنید. (اگر هنوز publish نکردهاید، تب از شما میخواهد ابتدا publish کنید — تست روی دستگاه به یک URL زنده نیاز دارد.)
تست روی دستگاه واقعی
Section titled “تست روی دستگاه واقعی”سوئیچر viewport فقط ابعاد را شبیهسازی میکند — ورودی لمسی، تأخیر دنیای واقعی، رفتارهای خاص مرورگر موبایل، یا رفتارهای مخصوص پلتفرم را شبیهسازی نمیکند. برای هر چیزی که واقعاً برایتان مهم است (تعاملات لمسی، install prompt، push notification، دوربین، GPS)، روی دستگاه واقعی تست بگیرید:
- برنامهتان را روی سابدامین
*.proyecta.livepublish کنید - URL را در مرورگر گوشیتان باز کنید
- اگر پشتیبانی PWA اضافه کردهاید، گزینه Add to Home Screen را انتخاب کنید و تجربه نصبشده را تست کنید
- جریانهایی که برایتان مهم هستند را مرحله به مرحله طی کنید
مواردی که فقط روی دستگاه واقعی قابل شناسایی هستند
Section titled “مواردی که فقط روی دستگاه واقعی قابل شناسایی هستند”- اندازههای هدف لمس — انگشتان بزرگتر از مکاننما موس هستند
- عناصر sticky — واحدهای viewport با chrome مرورگر موبایل متفاوت رفتار میکنند
- ورودی فرم — autofill، نوع کیبورد، autocomplete
- رفتارهای خاص iOS Safari — مشکلات
100vh، scroll-bouncing، fixed positioning - جریان دسترسی push notification — فقط روی یک origin منتشرشده از طریق HTTPS در یک تب مرورگر سطح بالا کار میکند؛ درون پنل پیشنمایش builder فعال نمیشود (حتی وقتی پیشنمایش از قبل از طریق HTTPS ارائه میشود).
- عملکرد روی سختافزار واقعی (کندتر)
نکات تست
Section titled “نکات تست”- از ابزارهای توسعهدهنده گوشیتان استفاده کنید. Safari در macOS میتواند برای live debugging به mobile Safari متصل شود؛ Chrome میتواند به Android Chrome متصل شود.
- در حالت landscape هم تست بگیرید. اکثر توسعهدهندگان فقط در حالت portrait تست میکنند و باگهای landscape را از دست میدهند.
- با روشن بودن حالت low-power تست کنید. انیمیشنها و تایمرها رفتار متفاوتی دارند.
- برای PWA push روی آیفون واقعی تست کنید. Push notification در iOS فقط از یک PWA نصبشده از طریق Safari کار میکند.