ابزارها و اشکال زدایی

تمام ابزارهای موجود برای توسعه وب نیز برای توسعه برنامه های وب پیشرو مفید هستند، از جمله کتابخانه ها، چارچوب ها، ویرایشگرهای کد، سازندگان، ابزارهای توسعه دهنده، اشکال زداها و موارد دیگر. اما هنگام کار با توانایی‌های خاص PWA، مانند قابلیت نصب، کارگران خدمات، پشتیبانی آفلاین و موارد دیگر، ابزارهای خاصی برای PWA بسیار مفید هستند. بیایید آنها را در عمل ببینیم.

شبیه سازها و دستگاه ها

همانطور که در فصل مبانی ذکر شد، باید از الگوهای طراحی آگنوستیک برای ارائه بهترین تجربه به هر کاربر در هر زمینه ای استفاده کنید. با این حال، تمرین خوبی است که تجربیات خود را در دستگاه های مختلف آزمایش کنید.

احتمالاً صاحب ده‌ها دستگاه فیزیکی نخواهید بود، از جمله آیفون، تلفن‌های اندروید، تبلت‌ها و دسکتاپ یا لپ‌تاپ با سیستم‌عامل‌های مختلف. به همین دلیل است که شبیه سازها و شبیه سازها وجود دارند.

شبیه سازهای ساده

اکثر ابزارهای توسعه‌دهنده در مرورگرها به شما امکان می‌دهند PWA خود را در اندازه‌های مختلف صفحه یا شرایط شبکه در حالی که از یک موتور مرورگر دسکتاپ استفاده می‌کنید، آزمایش کنید. برخی از این ابزارها همچنین می توانند یک عامل کاربر متفاوت را تحت این شبیه سازی ها مجبور کنند.

برخی از شبیه سازهای موجود عبارتند از:

  • Chromium DevTools: Device Mode ، throttling شبکه و چندین شبیه‌سازی حسگر موجود است
  • ابزارهای توسعه دهنده فایرفاکس: حالت طراحی پاسخگو
  • Safari Web Inspector: حالت طراحی پاسخگو Chromium DevTools شبیه سازی دستگاه های تلفن همراه.فایرفاکس DevTools شبیه سازی دستگاه های تلفن همراه.حالت طراحی پاسخگو Safari Web Inspector. برخی از راه حل های تجاری و رایگان برای توسعه دهندگان و طراحان بهینه شده اند، مانند برنامه منبع باز Responsively .

شبیه سازهای اپل

اپل برنامه Simulator (که قبلا به عنوان شبیه ساز iOS شناخته می شد) ارائه می دهد که به شما امکان می دهد برنامه وب خود را بر روی آیفون ها و آیپدهای مختلف در نسخه های مختلف سیستم عامل آزمایش کنید.

برنامه Simulator فقط برای کامپیوترهای macOS در دسترس است و با [Xcode، موجود در AppStore ; iOS و iPadOS را با پیکربندی های مختلف دستگاه شبیه سازی می کند. این شامل برنامه واقعی Mobile Safari و موتور Web.app است که هنگام نصب PWA شما در صفحه اصلی استفاده می‌شود، بنابراین تجربه نهایی که می‌بینید نسبتاً نماینده یک دستگاه واقعی است.

شبیه ساز با سافاری رندر وب سایت در آیفون و آی پد.

برای راه‌اندازی برنامه، پس از نصب Xcode، می‌توانید با انتخاب Open Developer Tools و سپس Simulator Simulator را در منوی Xcode باز کنید. پس از ورود به شبیه ساز، می توانید سافاری را باز کنید، گویی در یک آیفون یا آی پد واقعی هستید. با انتخاب گزینه File و سپس Open Simulator می توانید دستگاه های دیگر را باز کنید.

برخی از میانبرهای مفید برای توسعه دهندگان وب هنگام استفاده از Simulator برای آزمایش PWA ها عبارتند از:

  • Command-Shift-H : به صفحه اصلی بروید.
  • Control-Command-Shift-H : به App Switcher دسترسی پیدا کنید.
  • Command-Right و Command-Left : دستگاه را بچرخانید.

Simulator یک ماشین مجازی نیست، بلکه برنامه‌ای است که روی macOS شما اجرا می‌شود و شبیه آیفون یا آی‌پد است، بنابراین پشته TCP خود را ندارد. بنابراین، اگر از localhost در شبیه ساز استفاده می کنید، سافاری به دستگاه localhost macOS شما اشاره می کند.

به طور پیش‌فرض، Xcode فقط آخرین نسخه iOS را نصب می‌کند، اما می‌توانید به Xcode بروید، از منوی Preferences استفاده کنید و شبیه‌سازهای قدیمی‌تر را از تب Components دانلود کنید.

تمرین خوبی است که PWA خود را روی آخرین نسخه iOS، نسخه مینور قبلی و حداقل یک نسخه اصلی قبلی آزمایش کنید.

شبیه سازهای اندروید

اکوسیستم اندروید شبیه سازهای مختلفی را ارائه می دهد، اما شبیه سازهای موجود در Android SDK بیشترین استفاده را دارند.

به عنوان یک توسعه دهنده PWA، شما همچنین به مرورگرهایی در شبیه ساز اندروید خود نیاز دارید که لایه ای از پیچیدگی را به آزمایش اضافه می کند، زیرا AOSP (پروژه متن باز اندروید) Google Chrome یا Play Store را برای دانلود مرورگرها شامل نمی شود. بنابراین، هر شبیه‌ساز اندرویدی برای آزمایش PWA مفید نیست.

Android SDK دارای دو ابزار مفید برای شبیه سازی است:

  • SDK Manager: نسخه ها و پلاگین های مختلف سیستم عامل را دانلود و به روز می کند.
  • AVD Manager: دستگاه‌های مجازی Android (AVD) را اضافه، ویرایش و حذف می‌کند، که هر یک از آنها یک دستگاه را با یک سیستم‌عامل اندروید نصب کرده است، شبیه به یک نمونه ماشین مجازی.

شما فقط می توانید Android SDK یا Android Studio را نصب کنید، یک IDE رایگان شامل Android SDK با شبیه سازها. با SDK، باید از خط فرمان برای باز کردن و راه اندازی شبیه سازهای خود استفاده کنید. با Android Studio، می‌توانید ابزارهای مورد نیاز را از منوی صفحه خوش‌آمدگویی باز کنید. پس از ورود به AVD Manager، می‌توانید هر تعداد دستگاه را که می‌خواهید، با ترکیب‌های مختلف اندازه صفحه، توانایی‌ها و نسخه سیستم‌عامل اندروید ایجاد کنید.

مدیر AVD با یک دستگاه مجازی Android در حال مرور یک وب سایت

با شبیه‌ساز اندروید، می‌توانید پشتیبانی از نصب PWA، کل تجربه کاربر و اینکه آیا توانایی‌هایی که استفاده می‌کنید مطابق انتظار کار می‌کنند را بررسی کنید.

با استفاده از گوگل کروم

برای استفاده از Google Chrome در شبیه ساز اندروید، باید یک AVD با Play Services در داخل آن ایجاد کنید. برای انجام این کار، مطمئن شوید SDK مورد استفاده برای AVD خود دارای نماد Play باشد، همانطور که در تصویر زیر می بینید:

ایجاد AVD با یک سیستم عامل از جمله خدمات Play.

دستگاه‌های AVD با سرویس‌های Play شامل Play Store نیز می‌شوند، بنابراین می‌توانید پس از راه‌اندازی حساب خود با حساب Google خود، Chrome خود را با آخرین نسخه به‌روزرسانی کنید.

استفاده از مرورگرهای دیگر

اگر از AVD با خدمات Play استفاده می‌کنید، می‌توانید مرورگرها را از فروشگاه Play نیز دانلود کنید.

اکثر مرورگرهای موجود برای اندروید، از جمله اینترنت سامسونگ، مایکروسافت اج، اپرا، فایرفاکس و بریو، به صورت APK (بسته‌های اندروید) در دسترس هستند. اگر APK مرورگری را که می‌خواهید آزمایش کنید دارید، فقط می‌توانید فایل را به شبیه‌ساز بکشید یا آن را از طریق خط فرمان با استفاده از ADB نصب کنید.

شبیه ساز اندروید در حال نصب Microsoft Edge از فروشگاه Play.

شبیه سازهای دسکتاپ

شبیه سازی یک کامپیوتر رومیزی متفاوت معمولاً از طریق یک سیستم ماشین مجازی مانند VirtualBox یا VMWare انجام می شود. حتی با این ابزارها، شبیه سازی برخی از محیط ها غیرممکن است، مانند شبیه سازی macOS در ویندوز یا لینوکس، و برخی گزینه های دیگر ممکن است نیاز به مجوز داشته باشند، مانند شبیه سازی ویندوز در macOS یا Windows.

استفاده از وسایل فیزیکی

استفاده از دستگاه های واقعی برای آزمایش PWA نیز ایده خوبی است. ما نیازی به داشتن چندین دستگاه نداریم زیرا راه حل های مبتنی بر ابر وجود دارد که می توانید از راه دور از دستگاه های فیزیکی استفاده کنید. برخی از راه حل های رایگان و برخی راه حل های تجاری با یک لایه رایگان در دسترس هستند.

آزمایشگاه تست از راه دور سامسونگ با تلفن تاشو.

یکی از راه حل های موجود، Samsung Remote Test Lab است، راه حلی رایگان برای آزمایش PWA شما در دستگاه های سامسونگ، از جمله تلفن، تبلت، و دستگاه های تاشو.

بازرسی از راه دور

هنگامی که می خواهید برنامه وب پیشرو خود را در یک دستگاه واقعی، شبیه ساز یا شبیه ساز اشکال زدایی کنید، ممکن است بخواهید یک جلسه بازرسی از راه دور را با ابزارهای مرورگر دسکتاپ خود وصل کنید.

ابزارهای تجاری در دسترس هستند، اما همه مرورگرها نیز راه هایی برای انجام آن ارائه می دهند، از جمله:

  • WebKit Remote Inspector برای اتصال به Safari و PWA های نصب شده در دستگاه ها و شبیه سازهای متصل به iOS و iPadOS.
  • Chromium DevTools Remote Debugging برای اتصال به Chrome، Edge، اینترنت سامسونگ و سایر مرورگرهای مبتنی بر Chromium در Android و PWA های نصب شده از آن مرورگرها، از جمله دستگاه های فیزیکی متصل و شبیه سازها.
  • اشکال زدایی از راه دور فایرفاکس برای اتصال به فایرفاکس برای اندروید در دستگاه ها و شبیه سازهای واقعی متصل.

حمل و نقل پورت برای اندروید

هنگام آزمایش PWA های موجود در localhost در دستگاه های فیزیکی یا شبیه سازهای Android، با مشکل مواجه خواهید شد، زیرا localhost به پشته TCP Android اشاره می کند و نه دستگاه توسعه شما.

ممکن است بخواهید از آدرس IP محلی خود به عنوان جایگزینی برای localhost استفاده کنید، اما این ایده خوبی نیست، زیرا کارکنان سرویس و بسیاری از توانایی ها فقط با اتصالات HTTPS کار می کنند، به استثنای localhost ، بنابراین PWA شما به صورت آفلاین کار نمی کند یا پاس نمی شود. معیارهای PWA

می‌توانید با فعال کردن انتقال پورت در مرورگر Chromium در رایانه رومیزی خود، مشکل را حل کنید. در این صورت، می‌توانید یک پورت در localhost در دستگاه Android را به هر منبع و پورتی از رایانه میزبان خود، از جمله localhost رایانه توسعه‌دهنده خود، پل کنید. برای اطلاعات بیشتر این راهنما را بررسی کنید.

مرورگرهای کرومیوم

مرورگرهای Chromium ابزارهای زیادی را برای اشکال زدایی و آزمایش برنامه های وب پیشرو ارائه می دهند که از DevTools شروع می شود.

اکثر مرورگرهای مبتنی بر کروم، از جمله اینترنت سامسونگ، مایکروسافت اج و گوگل کروم، کانال های مختلفی مانند Stable، بتا و Canary را ارائه می دهند. می‌توانید نسخه‌های جداگانه‌ای را روی دسکتاپ و اندروید نصب کنید تا PWA خود را در نسخه‌های بعدی مرورگر آزمایش کنید. این به شما امکان می‌دهد ویژگی‌هایی را بسازید و آزمایش کنید که هنوز به طور گسترده در دسترس نیستند، یا منسوخ شدن‌ها و تغییرات را آزمایش کنید و نحوه عملکرد برنامه خود را در نسخه‌های جدیدتر بررسی کنید.

با استفاده از بازرسی از راه دور، می توانید از همه این ابزارها برای اشکال زدایی و آزمایش PWA خود در دستگاه های دسکتاپ و اندروید استفاده کنید.

ابزارهای کارگر خدماتی

Chromium DevTools مجموعه کاملی از ابزارها برای اشکال زدایی کارکنان سرویس و برگه «برنامه» APIهای آنها دارد. از بخش "کارگران خدمات" می توانید:

  • وضعیت نصب و چرخه عمر کارگران خدمات را ببینید.
  • به روز رسانی و لغو ثبت نام کارگر خدمات.
  • چرخه به روز رسانی را دنبال کنید.
  • مشتریان خدمات فعلی را ببینید.
  • یک پیام فشار به یک کارمند خدمات ارسال کنید.
  • ثبت عملیات همگام سازی پس زمینه و همگام سازی پس زمینه دوره ای.

ابزارهای رفع اشکال Service Worker با ابزارهای توسعه دهنده Chromium.

در مورد این ابزارها بیشتر بخوانید .

ابزارهای ذخیره سازی

در Application و سپس Storage ، می‌توانید داده‌ها را از مبدا خود ببینید، پیش‌نمایش، به‌روزرسانی و حذف کنید، مانند ورودی‌های ذخیره‌سازی وب یا فروشگاه‌های IndexedDB. در داخل Application ، Cache سپس Cache Storage ، می‌توانید تمام حافظه‌های پنهان ذخیره‌شده در مبدا فعلی، پیش‌نمایش محتوا، و حذف ورودی‌ها را ببینید. درباره ابزار cache بیشتر بخوانید .

بازرس کش در Chromium DevTools

همچنین، با انتخاب از Application سپس Storage ، می‌توانید سهمیه فعلی استفاده شده را مشاهده کنید، فضای ذخیره‌سازی سهمیه سفارشی را شبیه‌سازی کنید و با استفاده از Clear site data ، تمام داده‌های خود، از جمله ثبت نام کارگر سرویس را پاک کنید.

خدمات پس زمینه

Chromium DevTools همچنین دارای مجموعه‌ای از ابزارهای ضبط رویداد سرویس‌های پس‌زمینه است که با کلیک کردن روی Application و سپس Background Services پیدا می‌شوند. این به شما امکان می‌دهد ببینید با برخی رویدادها در پس‌زمینه در بالای API کارگران سرویس چه اتفاقی می‌افتد. در مورد این ابزارها بیشتر بخوانید .

ابزارهای مانیفست برنامه وب

Chromium DevTools بخشی برای مانیفست برنامه وب و معیارهای نصب در زیر Application ، Manifest دارد. در این بخش، می‌توانید بررسی کنید که آیا مانیفست به‌درستی بارگیری شده است، مقادیر مانیفست، نحوه ظاهر نمادها، شناسه برنامه و یک بررسی سریع برای نمادهای ماسک‌پذیر .

هشدارها و خطاهای مربوط به مسائل مربوط به معیارهای نصب نیز در این بخش نشان داده شده است.

اشکال زدایی مانیفست برنامه وب در Chromium DevTools.

در مورد این ابزارها بیشتر بخوانید .

اشکال زدایی نصب

در دستگاه‌های Android که از حالت نصب WebAPK استفاده می‌کنند، می‌توانید با مرور به about:webapk در مرورگرهای Chromium به فهرستی از برنامه‌های نصب‌شده دسترسی داشته باشید.

وضعیت فعلی به‌روزرسانی را مشاهده می‌کنید و از اینجا درخواست به‌روزرسانی WebAPK می‌کنید.

در رایانه‌های رومیزی، می‌توانید فهرست کاربرپسند PWA‌های نصب‌شده را با مرور در about:apps و نسخه اشکال‌زدایی را با مرور در about:app-service-internals ببینید.

صفحه اشکال زدایی Google Chrome WebAPK در اندروید.

سافاری

در زمان نگارش، سافاری مجموعه محدودتری از ابزارهای موجود برای تست PWA و اشکال زدایی دارد. هیچ ابزاری برای مشاهده و اشکال‌زدایی وضعیت و چرخه عمر کارکنان خدمات، هیچ بازرسی برای محتوای حافظه پنهان، و هیچ ابزاری برای پشتیبانی و قابلیت نصب برنامه‌های وب در iOS و iPadOS وجود ندارد.

Safari فقط در حالت پایدار در دسترس است، در حالی که Safari Technology Preview در دسترس برای macOS فقط به شما امکان می‌دهد از قبل توانایی‌های نسخه‌های بعدی سافاری را امتحان کنید. برنامه‌های بتای iOS و iPadOS گاهی اوقات شامل نسخه‌های جدید سافاری می‌شوند که می‌توانید برای آزمایش از آنها استفاده کنید.

ابزارهای کارگر خدماتی

کاری که می توانید در Safari انجام دهید (هم در macOS و هم از راه دور برای iOS و iPadOS) باز کردن یک پنجره بازرس برای یک سرویس دهنده است که در حال حاضر در حال اجرا است.

از Safari در macOS، منوی Develop , Service Workers همه جلسات سرویس کارگر در حال اجرا را فهرست می‌کند. برای بازرسی از راه دور باید در منوی Develop دستگاهی را برای بازرسی انتخاب کنید. زمینه‌های کارگران سرویس در همان زیرمنوی پنجره‌ها تحت نام اصلی یا PWA نصب شده ظاهر می‌شوند.

اگر یکی از آنها را انتخاب کنید، Safari یک پنجره جدید با یک بازرس محدود باز می‌کند که فقط شامل Consoles ، Sources و Network Tabs .

یک سرویس دهنده وب بازرس از یک PWA در سافاری.

فایرفاکس

فایرفاکس از سرویس کارگران در همه پلتفرم ها و App Manifest فقط برای نصب در اندروید پشتیبانی می کند. می توانید با یک جلسه بازرسی از راه دور USB به ابزارهای PWA در دسکتاپ و اندروید دسترسی داشته باشید.

می توانید از نسخه دسکتاپ معروف به نسخه توسعه دهنده فایرفاکس استفاده کنید. مانند مرورگر Chromium، فایرفاکس در کانال‌های مختلف روی دسک‌تاپ و اندروید نسخه‌هایی دارد، از جمله نسخه‌های پایدار، بتا و توسعه‌دهنده.

ابزارهایی برای PWA ها

بازرس Service Worker در فایرفاکس یک ابزار اساسی است که در Developer Tools تحت Application , Service Workers موجود است. به شما امکان می‌دهد سرویس‌کار ثبت‌شده فعلی را ببینید، وضعیت در حال اجرا آن را بررسی کنید و آن را لغو ثبت کنید. اشکال زدایی کد سرویسکار ممکن است فقط در برخی از نسخه های توسعه دهنده فایرفاکس در دسترس باشد.

ابزارهای توسعه دهنده فایرفاکس برای Service Worker و Manifest.

ابزار مانیفست در Application ، Manifest موجود است و فقط مقادیر مانیفست را با پیش‌نمایش نمادها ارائه می‌کند.

در زیر Storage ، می‌توانید فضای ذخیره‌سازی مبدا را مدیریت کنید، از جمله IndexedDB و Cache Storage.

می‌توانید درباره ابزار توسعه‌دهنده فایرفاکس برای برنامه‌های وب بیشتر بخوانید.

منابع