اشکال زدایی برنامه های وب پیشرفته

Kayce Basques

Sofia Emelianova

از پنل Application برای بررسی، اصلاح و اشکال‌زدایی مانیفست‌های برنامه وب، سرویس ورکرها و حافظه‌های پنهان سرویس ورکرها استفاده کنید.

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

• حتی در شرایط ناپایدار شبکه نیز قابل اعتماد است.
• قابل نصب برای اجرای سطوح مختلف سیستم عامل‌ها، مانند پوشه برنامه‌ها در Mac OS X، منوی استارت در ویندوز و صفحه اصلی در اندروید و iOS.
• در تغییر دهنده‌های فعالیت، موتورهای جستجوی دستگاه مانند Spotlight و در برگه‌های اشتراک‌گذاری محتوا نمایش داده می‌شوند.

این راهنما فقط ویژگی‌های پنل Application برای برنامه‌های وب پیش‌رونده را مورد بحث قرار می‌دهد. اگر در مورد سایر پنل‌ها به دنبال کمک هستید، به بخش آخر این راهنما، یعنی سایر راهنماهای پنل Application ، مراجعه کنید.

خلاصه

• برای بررسی مانیفست برنامه وب خود از تب Manifest استفاده کنید.
• از تب Service Workers برای طیف وسیعی از وظایف مرتبط با Service Worker، مانند لغو ثبت یا به‌روزرسانی یک سرویس، شبیه‌سازی رویدادهای push، آفلاین شدن یا متوقف کردن یک Service Worker، استفاده کنید.
• حافظه پنهان سرویس ورکر خود را از تب Cache Storage مشاهده کنید.
• یک سرویس ورکر را لغو ثبت کنید و تمام فضای ذخیره‌سازی و حافظه‌های پنهان را با یک کلیک از تب Clear storage پاک کنید.

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

اگر می‌خواهید کاربرانتان بتوانند برنامه شما را به پوشه برنامه‌ها در Mac OS X، منوی Start در Windows و صفحه اصلی در Android و iOS اضافه کنند، به یک مانیفست برنامه وب نیاز دارید. مانیفست نحوه نمایش برنامه در صفحه اصلی، هدایت کاربر هنگام راه‌اندازی از صفحه اصلی و ظاهر برنامه در هنگام راه‌اندازی را تعریف می‌کند.

پس از تنظیم مانیفست، می‌توانید از تب Manifest در پنل Application برای بررسی آن استفاده کنید.

• برای مشاهده‌ی منبع مانیفست، روی لینک زیر برچسب App Manifest ( manifest.webmanifest در تصویر بالا) کلیک کنید.
• بخش‌های هویت و ارائه، فقط فیلدهایی را از منبع مانیفست به روشی کاربرپسندتر نمایش می‌دهند.
• بخش «کنترل‌کننده‌های پروتکل» به شما امکان می‌دهد تا ثبت کنترل‌کننده پروتکل URL مربوط به PWA خود را با کلیک یک دکمه آزمایش کنید. برای کسب اطلاعات بیشتر، به «تست ثبت کنترل‌کننده پروتکل URL» مراجعه کنید.
• بخش آیکن‌ها هر آیکنی را که مشخص کرده‌اید نمایش می‌دهد و به شما امکان می‌دهد ماسک‌های آنها را بررسی کنید.
• مجموعه بخش‌های Shortcut #N اطلاعات مربوط به تمام اشیاء میانبر شما را نمایش می‌دهد.
• مجموعه‌ی اسکرین‌شات #N، اسکرین‌شات‌ها را برای رابط کاربری نصب غنی‌تر برنامه‌ی شما نمایش می‌دهد.

علاوه بر این، اگر DevTools با خطایی مانند عدم امکان بارگذاری آیکون مواجه شود، تب Manifest بخشی با عنوان Installability نمایش می‌دهد که خطا را شرح می‌دهد.

مشاهده و بررسی آیکون‌های قابل ماسک شدن

بخش آیکون‌ها در تب Manifest تمام آیکون‌های برنامه شما را نمایش می‌دهد. در این بخش، می‌توانید مناطق امن برای آیکون‌های maskable ، فرمت آیکون‌هایی که با پلتفرم‌ها سازگار می‌شوند، را نیز بررسی کنید.

برای برش آیکون‌ها به طوری که فقط حداقل ناحیه امن قابل مشاهده باشد، بررسی کنید فقط حداقل ناحیه امن برای آیکون‌های قابل پوشش را نشان بده .

اگر کل لوگوی شما در ناحیه امن قابل مشاهده است، می‌توانید ادامه دهید.

نصب ماشه

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

برای شروع نصب PWA خود:

1. صفحه فرود PWA را در کروم باز کنید.

2. در سمت راست نوار آدرس در بالا، کلیک کنید نصب کنید .

   

3. دستورالعمل‌های روی صفحه را دنبال کنید.

ویژگی نصب برنامه (یا افزودن به صفحه اصلی در برخی دستگاه‌ها) نمی‌تواند گردش کار را برای دستگاه‌های تلفن همراه شبیه‌سازی کند. توجه کنید که چگونه مرورگر کروم دسکتاپ، دکمه نصب را در نوار آدرس نمایش می‌دهد، حتی اگر DevTools در حالت دستگاه باشد. با این حال، اگر بتوانید برنامه خود را با موفقیت به دسکتاپ خود اضافه کنید، برای موبایل نیز کار خواهد کرد.

اگر می‌خواهید تجربه واقعی موبایل را امتحان کنید، می‌توانید یک دستگاه موبایل واقعی را از طریق اشکال‌زدایی از راه دور به DevTools متصل کنید. برای شروع نصب روی دستگاه موبایل متصل، منوی سه نقطه و کلیک برنامه را نصب کنید (یا به صفحه اصلی اضافه کنید ).

بررسی میانبرها

میانبرهای برنامه به شما امکان دسترسی سریع به تعداد انگشت‌شماری از اقدامات رایج را که کاربران مرتباً به آنها نیاز دارند، فراهم می‌کنند.

برای بررسی میانبرهایی که در فایل مانیفست خود تعریف کرده‌اید، به بخش‌های Shortcut #N در تب Manifest بروید.

برای رابط کاربری نصب غنی‌تر، اسکرین‌شات‌ها را بررسی کنید

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

برای بررسی اسکرین‌شات‌ها، به بخش‌های Screenshot #N از تب Manifest بروید.

ثبت نام کنترل کننده پروتکل URL را آزمایش کنید

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

برای آزمایش هندلر خود:

1. DevTools را در صفحه فرود PWA خود باز کنید . برای مثال، این نسخه آزمایشی PWA را بررسی کنید.
2. از صفحه دمو، PWA را نصب کنید و پس از نصب، برنامه را مجدداً بارگذاری کنید. اکنون مرورگر، PWA را به عنوان یک هندلر برای پروتکل web+coffee ثبت کرده است.
3. در بخش Application > Manifest > Protocol Handler ، آدرس اینترنتی (URL) مورد نظر برای آزمایش توسط handler را وارد کرده و روی Test protocol کلیک کنید. در این مثال، هندلر می‌تواند americano ، chai و latte-macchiato را پردازش کند.
4. وقتی کروم از شما می‌پرسد که آیا می‌تواند برنامه را باز کند، با کلیک روی «باز کردن کنترل‌کننده پروتکل» تأیید کنید.
5. در کادر محاوره‌ای بعدی، به برنامه اجازه دهید پیوندهای web+coffee را مدیریت کند.

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

کارگران خدماتی

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

راهنماهای مرتبط:

• مقدمه‌ای بر سرویس ورکرها
• اعلان‌های فوری: به‌موقع، مرتبط و دقیق

تب Service Workers در پنل Application ، محل اصلی در DevTools برای بررسی و اشکال‌زدایی Service Workerها است.

• اگر یک سرویس ورکر در صفحه باز فعلی نصب شده باشد، آن را در این برگه مشاهده خواهید کرد. برای مثال، در تصویر بالا یک سرویس ورکر برای دامنه https://airhorner.com/ نصب شده است.
• کادر انتخاب آفلاین، DevTools را در حالت آفلاین قرار می‌دهد. این معادل حالت آفلاین موجود در پنل Network یا گزینه Go offline در منوی Command است.
• چک‌باکس به‌روزرسانی هنگام بارگذاری مجدد، سرویس ورکر را مجبور می‌کند که در هر بارگذاری صفحه به‌روزرسانی کند.
• گزینه‌ی «دور زدن برای شبکه » سرویس ورکر را دور می‌زند و مرورگر را مجبور می‌کند برای منابع درخواستی به شبکه مراجعه کند.
• لینک درخواست‌های شبکه شما را به پنل شبکه می‌برد که در آن لیستی از درخواست‌های رهگیری‌شده مربوط به سرویس ورکر (فیلتر is:service-worker-intercepted ) وجود دارد.
• لینک به‌روزرسانی، به‌روزرسانی یک‌باره سرویس ورکر مشخص‌شده را انجام می‌دهد.
• دکمه‌ی فشاری (Push button) یک اعلان فشاری بدون بار داده (payload) را شبیه‌سازی می‌کند (که به عنوان tickle نیز شناخته می‌شود).
• دکمه‌ی همگام‌سازی، یک رویداد همگام‌سازی در پس‌زمینه را شبیه‌سازی می‌کند.
• لینک لغو ثبت، سرویس ورکر مشخص شده را لغو ثبت می‌کند. برای روشی جهت لغو ثبت یک سرویس ورکر و پاک کردن فضای ذخیره‌سازی و حافظه‌های پنهان با یک کلیک، گزینه پاک کردن فضای ذخیره‌سازی را بررسی کنید.
• خط «منبع» به شما می‌گوید که سرویس ورکر فعلی چه زمانی نصب شده است. لینک، نام فایل منبع سرویس ورکر است. کلیک روی لینک شما را به منبع سرویس ورکر هدایت می‌کند.
• خط وضعیت، وضعیت سرویس ورکر را به شما نشان می‌دهد. عدد روی این خط ( #16 در تصویر) نشان می‌دهد که سرویس ورکر چند بار به‌روزرسانی شده است. اگر فعال کنید با انتخاب گزینه به‌روزرسانی در بارگذاری مجدد، متوجه خواهید شد که تعداد در هر بار بارگذاری صفحه افزایش می‌یابد. در کنار وضعیت، یک لینک شروع (اگر سرویس ورکر متوقف شده باشد) یا یک لینک توقف (اگر سرویس ورکر در حال اجرا باشد) خواهید دید. سرویس ورکرها طوری طراحی شده‌اند که در هر زمانی توسط مرورگر متوقف و شروع شوند. متوقف کردن صریح سرویس ورکر با استفاده از لینک توقف می‌تواند این را شبیه‌سازی کند. متوقف کردن سرویس ورکر، راهی عالی برای آزمایش نحوه رفتار کد شما هنگام شروع مجدد سرویس ورکر است. این کار اغلب به دلیل فرضیات نادرست در مورد وضعیت جهانی پایدار، اشکالاتی را آشکار می‌کند.
• خط «مشتریان» به شما می‌گوید که سرویس ورکر به کدام ناحیه محدود شده است. دکمه فوکوس بیشتر زمانی مفید است که چندین سرویس ورکر ثبت شده داشته باشید. اگر روی دکمه فوکوس کنار سرویس ورکر که در تب دیگری در حال اجرا است کلیک کنید، کروم روی آن تب فوکوس می‌کند.

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

  

  برای اطلاعات بیشتر، به چرخه حیات سرویس ورکر مراجعه کنید.

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

برای مشاهده اطلاعات مربوط به همه سرویس ورکرها، روی «مشاهده همه ثبت‌نام‌ها» در پایین برگه سرویس ورکرها کلیک کنید. این لینک شما را به chrome://serviceworker-internals/?devtools هدایت می‌کند که در آنجا می‌توانید سرویس ورکرهای خود را بیشتر اشکال‌زدایی کنید.

حافظه‌های پنهان سرویس ورکرها

تب Cache Storage فهرستی فقط خواندنی از منابعی که با استفاده از (service worker) Cache API ذخیره شده‌اند را ارائه می‌دهد.

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

اگر دو یا چند حافظه پنهان باز داشته باشید، آنها را در زیر منوی کشویی Cache Storage مشاهده خواهید کرد.

استفاده از سهمیه

برخی از پاسخ‌ها در برگه ذخیره‌سازی کش ممکن است به عنوان « مات » علامت‌گذاری شوند. این به پاسخی اشاره دارد که از منبع دیگری، مانند CDN یا API از راه دور، بازیابی شده است، زمانی که CORS فعال نیست.

برای جلوگیری از نشت اطلاعات بین دامنه‌ها، فاصله‌گذاری قابل توجهی به اندازه پاسخ مبهمی که برای محاسبه محدودیت‌های سهمیه ذخیره‌سازی (یعنی اینکه آیا یک استثنای QuotaExceeded رخ می‌دهد یا خیر) استفاده می‌شود و توسط navigator.storage API گزارش می‌شود، اضافه شده است.

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

راهنماهای مرتبط:

• سرریز پشته: چه محدودیت‌هایی برای پاسخ‌های مبهم اعمال می‌شود؟
• جعبه کار: درک سهمیه ذخیره‌سازی

پاک کردن فضای ذخیره‌سازی

تب Clear Storage یک ویژگی بسیار مفید هنگام توسعه برنامه‌های وب پیش‌رونده است. این تب به شما امکان می‌دهد تا ثبت نام سرویس ورکرها را لغو کرده و تمام حافظه‌های پنهان و فضای ذخیره‌سازی را با یک کلیک پاک کنید. برای کسب اطلاعات بیشتر، به بخش زیر مراجعه کنید.

راهنماهای مرتبط:

• پاک کردن فضای ذخیره‌سازی

سایر راهنماهای پنل برنامه

برای راهنمایی بیشتر در مورد سایر بخش‌های پنل برنامه‌ها ، راهنماهای زیر را بررسی کنید.

راهنماهای مرتبط:

• منابع صفحه را بررسی کنید
• بررسی و مدیریت حافظه‌های ذخیره‌سازی محلی و حافظه‌های پنهان