تصحيح أخطاء تطبيقات الويب التقدّمية

يمكنك استخدام لوحة Application لفحص بيانات بيان تطبيقات الويب ومشغّلي الخدمات وذاكرات التخزين المؤقت لمشغّلي الخدمات وتعديلها وتصحيح الأخطاء فيها.

تطبيقات الويب التقدّمية (PWA) هي تطبيقات حديثة وعالية الجودة تم إنشاؤها باستخدام تكنولوجيا الويب. توفّر تطبيقات الويب التقدّمية (PWA) إمكانات مماثلة لتطبيقات iOS وAndroid وأجهزة الكمبيوتر المكتبي. وهي:

  • يمكن الاعتماد عليها حتى في ظروف الشبكة غير المستقرة.
  • قابلة للتثبيت لتشغيل أسطح أنظمة التشغيل، مثل مجلد التطبيقات على نظام التشغيل Mac OS X وقائمة ابدأ على نظام التشغيل Windows والشاشة الرئيسية على نظامَي التشغيل Android وiOS.
  • ستظهر في أدوات تبديل الأنشطة ومحركات البحث على الأجهزة مثل Spotlight وفي أوراق مشاركة المحتوى.

يناقش هذا الدليل ميزات تطبيق الويب التقدّمي في لوحة التطبيق فقط. وإذا كنت تبحث عن مساعدة بشأن الأجزاء الأخرى، يمكنك الاطّلاع على القسم الأخير من هذا الدليل، أدلة لوحات التطبيقات الأخرى.

ملخّص

  • استخدِم علامة التبويب البيان لفحص بيان تطبيق الويب.
  • يمكنك استخدام علامة التبويب مشغِّلو الخدمات لمجموعة كاملة من المهام المتعلّقة بمشغّلي الخدمات، مثل إلغاء تسجيل خدمة أو تحديثها أو محاكاة أحداث الدفع أو إنهاء الاتصال بالإنترنت أو إيقاف مشغّل الخدمات.
  • يمكنك عرض ذاكرة التخزين المؤقت لمشغِّل الخدمات من علامة التبويب مساحة تخزين ذاكرة التخزين المؤقت.
  • يمكنك إلغاء تسجيل مشغّل الخدمات ومحو كل مساحة التخزين وذاكرات التخزين المؤقت بنقرة زر واحدة من علامة التبويب محو مساحة التخزين.

بيان تطبيق الويب

إذا أردت أن يتمكن المستخدمون من إضافة تطبيقك إلى مجلد التطبيقات على نظام التشغيل Mac OS X، وقائمة ابدأ في نظام التشغيل Windows، والشاشة الرئيسية على نظامي التشغيل Android وiOS، ستحتاج إلى بيان تطبيق الويب. ويحدد البيان كيفية ظهور التطبيق على الشاشة الرئيسية، وأين يتم توجيه المستخدم عند التشغيل من الشاشة الرئيسية، وكيف يبدو التطبيق عند تشغيله.

بعد إعداد ملف البيان، يمكنك استخدام علامة التبويب البيان في لوحة التطبيق لفحصه.

علامة التبويب "البيان".

  • للاطّلاع على مصدر البيان، انقر على الرابط أسفل تصنيف بيان التطبيق (manifest.webmanifest في لقطة الشاشة أعلاه).
  • لا يعرض قسما الهوية والعرض التقديمي سوى الحقول من مصدر البيان بطريقة أكثر سهولة في الاستخدام.
  • يتيح لك قسم معالِجات البروتوكولات اختبار تسجيل معالج بروتوكول عنوان URL لتطبيق الويب التقدّمي (PWA) بنقرة زر واحدة. لمزيد من المعلومات، يُرجى الاطّلاع على اختبار تسجيل معالج بروتوكول عنوان URL.
  • يعرض قسم الأيقونات كل رمز حددته ويتيح لك التحقق من أقنعةهم.
  • تعرض مجموعة الاختصار #N من الأقسام معلومات عن جميع كائنات الاختصار.
  • تعرض مجموعة قسم لقطة الشاشة رقم N لقطات الشاشة لواجهة مستخدم أكثر تفصيلاً لتطبيقك.

بالإضافة إلى ذلك، إذا واجهت "أدوات مطوري البرامج" خطأً، مثل رمز يتعذّر تحميله، ستعرض علامة التبويب البيان قسم قابلية التثبيت الذي يصف الخطأ.

قسم "قابلية التثبيت" في علامة التبويب "البيان"

عرض الرموز القابلة للإخفاء والتحقّق منها

يعرض قسم الأيقونات ضمن علامة التبويب البيان جميع رموز تطبيقك. في هذا القسم، يمكنك أيضًا الاطّلاع على المناطق الآمنة بحثًا عن الرموز القابلة للإخفاء، وهي تنسيق الرموز التي تتكيّف مع الأنظمة الأساسية.

لقطع الرموز بحيث لا تظهر سوى الحد الأدنى من المنطقة الآمنة، ضَع علامة في المربّع مربّع اختيار عرض الحد الأدنى من المنطقة الآمنة للرموز القابلة للإخفاء فقط.

عرض الحدّ الأدنى من المناطق الآمنة للرموز القابلة للإخفاء

إذا كان شعارك بالكامل مرئيًا في المنطقة الآمنة، أنت جاهز للاستخدام.

بدء التثبيت

يتيح لك Chrome تفعيل تطبيق الويب التقدّمي (PWA) والترويج له مباشرةً من خلال واجهة المستخدم. تعرَّف على كيفية توفير تجربتك الخاصة للتثبيت داخل التطبيق.

لبدء مسار تثبيت تطبيق الويب التقدّمي (PWA):

  1. افتح الصفحة المقصودة لتطبيق الويب التقدّمي (PWA) في Chrome.
  2. على يسار شريط العناوين في أعلى الصفحة، انقر على تثبيت. تثبيت.

    الزر "تثبيت".

  3. اتّبِع التعليمات الظاهرة على الشاشة.

لا يمكن لميزة تثبيت التطبيق محاكاة سير العمل على الأجهزة الجوّالة. لاحِظ كيف يعرض متصفّح Chrome المتوافق مع أجهزة الكمبيوتر المكتبي زر التثبيت في شريط العناوين، مع أنّ "أدوات مطوّري البرامج" في وضع الجهاز. ولكن إذا كان بإمكانك إضافة تطبيقك بنجاح إلى جهاز سطح المكتب، فستعمل عندئذٍ مع الأجهزة الجوّالة أيضًا.

إذا أردت اختبار التجربة الحقيقية للأجهزة الجوّالة، يمكنك توصيل جهاز جوّال حقيقي بأدوات مطوّري البرامج من خلال تصحيح الأخطاء عن بُعد. لبدء عملية التثبيت على الجهاز الجوّال المرتبط، افتح قائمة الخيارات الإضافية قائمة الخيارات الإضافية وانقر على تثبيت التطبيق تثبيت التطبيق.

فحص الاختصارات

تتيح لك اختصارات التطبيقات توفير إمكانية الوصول السريع إلى عدد قليل من الإجراءات الشائعة التي يحتاجها المستخدمون بشكلٍ متكرر.

لفحص الاختصارات التي حدّدتها في ملف البيان، انتقِل إلى أقسام الاختصار #N في علامة التبويب البيان.

قسم "الاختصار" في علامة التبويب "البيان"

فحص لقطات الشاشة للحصول على واجهة مستخدم تثبيت أكثر إفادة

عند إضافة وصف ومجموعة من لقطات الشاشة إلى ملف البيان، سيحصل تطبيقك على مربّع حوار تثبيت أكثر تفصيلاً.

لفحص لقطات الشاشة، انتقِل إلى أقسام لقطة الشاشة رقم N في علامة التبويب البيان.

مربّع حوار التثبيت ولقطات الشاشة في علامة التبويب "ملف البيان"

تسجيل معالج بروتوكول عنوان URL التجريبي

يمكن لتطبيقات الويب التقدّمية (PWA) معالجة الروابط التي تستخدم بروتوكولاً معيّنًا للحصول على تجربة أكثر تكاملاً. للتعرّف على كيفية إنشاء معالج، يمكنك الاطّلاع على تسجيل معالج بروتوكول عنوان URL لتطبيقات الويب التقدّمية (PWA).

لاختبار المعالج:

  1. افتح "أدوات مطوري البرامج" على الصفحة المقصودة لتطبيق الويب التقدّمي (PWA). على سبيل المثال، يمكنك الاطّلاع على تطبيق الويب التقدّمي (PWA) هذا التجريبي.
  2. من صفحة العرض التوضيحي، ثبِّت تطبيق الويب التقدّمي (PWA) وأعِد تحميل التطبيق بعد التثبيت. سجّل المتصفِّح الآن تطبيق الويب التقدّمي (PWA) كمعالج لبروتوكول web+coffee.
  3. في قسم التطبيق > Manifest > معالج البروتوكول، أدخِل عنوان URL الذي تريد أن يختبره المعالج وانقر على اختبار البروتوكول. جارٍ اختبار المعالج. في هذا المثال، يمكن للمعالج معالجة americano وchai وlatte-macchiato.
  4. عندما يسألك Chrome عمّا إذا كان بإمكانه فتح التطبيق، أكِّد الإجراء بالنقر على فتح معالج البروتوكول. فتح التطبيق
  5. في مربّع الحوار التالي، اسمح للتطبيق بالتعامل مع روابط web+coffee. السماح بمعالجة الروابط

إذا عالج المعالج الرابط بنجاح، ستظهر لك صورة لكوب قهوة مفتوح في التطبيق.

مشغِّلو الخدمات

يعتبر مقدمو الخدمة تقنية أساسية في النظام الأساسي المستقبلي للويب. وهي عبارة عن نصوص برمجية يشغلها المتصفح في الخلفية، منفصلة عن صفحة الويب. تتيح لك هذه النصوص البرمجية إمكانية الوصول إلى ميزات لا تحتاج إلى صفحة ويب أو تفاعل مع المستخدم، مثل الإشعارات الفورية ومزامنة الخلفية والتجارب بلا إنترنت.

أدلة ذات صلة:

علامة التبويب مشغِّلو الخدمات في لوحة التطبيق هي المكان الرئيسي في "أدوات مطوّري البرامج" لفحص عمال الخدمة وتصحيح أخطائهم.

علامة التبويب "مشغِّلو الخدمات".

  • إذا كان أحد مشغّلي الخدمات مثبتًا في الصفحة المفتوحة حاليًا، ستراه مُدرجًا في علامة التبويب هذه. على سبيل المثال، في لقطة الشاشة أعلاه، تم تثبيت مشغّل خدمات لنطاق https://airhorner.com/.
  • يؤدي مربّع الاختيار مربّع اختيار بلا إنترنت إلى تفعيل وضع عدم الاتصال بالإنترنت في "أدوات مطوري البرامج". يعادل ذلك وضع عدم الاتصال بالإنترنت المتوفّر من لوحة الشبكة، أو خيار Go offline في قائمة الأوامر.
  • يفرض مربّع الاختيار مربّع اختيار التحديث عند إعادة التحميل على مشغّل الخدمات إجراء التحديث عند كل تحميل للصفحة.
  • يتجاوز مربع الاختيار مربّع اختيار تجاوز الشبكة عامل الخدمة ويفرض انتقال المتصفح إلى الشبكة للحصول على الموارد المطلوبة.
  • ينقلك رابط طلبات الشبكة إلى لوحة الشبكة التي تتضمّن قائمة بالطلبات التي تم الاعتراض عليها والمرتبطة بمشغّل الخدمة (فلتر is:service-worker-intercepted).
  • يُجري الرابط تحديث عملية تحديث لمرّة واحدة لمشغّل الخدمات المحدّد.
  • يحاكي زر الدفع إشعارًا فوريًا بدون حمولة (يُعرف أيضًا باسم الرسالة الفورية).
  • يحاكي الزر مزامنة حدث مزامنة في الخلفية.
  • يؤدي الرابط إلغاء التسجيل إلى إلغاء تسجيل مشغّل الخدمات المحدّد. اطلع على محو مساحة التخزين للاطّلاع على طريقة لإلغاء تسجيل مشغّل الخدمات ومسح مساحة التخزين وذاكرات التخزين المؤقت بنقرة زر واحدة.
  • يخبرك سطر Source بالوقت الذي تم فيه تثبيت مشغّل الخدمات قيد التشغيل حاليًا. الرابط هو اسم ملف المصدر الخاص بعامل الخدمة. يؤدّي النقر على الرابط إلى توجيهك إلى مصدر عامل الخدمة.
  • يطلعك سطر الحالة على حالة عامل الخدمة. يشير الرقم الموجود في هذا السطر (#16 في لقطة الشاشة) إلى عدد المرات التي تم فيها تحديث عامل الخدمة. في حال تفعيل مربّع الاختيار مربّع اختيار التحديث عند إعادة التحميل، ستلاحظ أنّ العدد يزداد مع كل تحميل للصفحة. بجانب الحالة، سترى رابط بدء (إذا كان مشغّل الخدمات متوقفًا) أو رابط إيقاف (إذا كان عامل الخدمة قيد التشغيل). تم تصميم تطبيقات تشغيل الخدمات بحيث يتم إيقافها وتشغيلها من خلال المتصفح في أي وقت. ويمكن أن يؤدي إيقاف مشغّل الخدمات بشكلٍ صريح باستخدام الرابط إيقاف إلى محاكاة ذلك. ويعتبر إيقاف مشغّل الخدمات طريقة رائعة لاختبار سلوك الرمز عند إعادة تشغيل مشغّل الخدمة مرة أخرى. وغالبًا ما يكشف عن أخطاء بسبب افتراضات خاطئة حول الحالة العالمية المستمرة.
  • يخبرك سطر العملاء بالمصدر الذي تم تحديد نطاق مشغّل الخدمات له. يكون الزرّ Focus مفيدًا في الغالب عندما يكون لديك عدة مشغّلي خدمة مسجَّلين. في حال النقر على الزر تركيز بجانب مشغّل خدمات يعمل في علامة تبويب مختلفة، سيركِّز Chrome على علامة التبويب هذه.
  • يعرض لك جدول دورة التحديث أنشطة عامل الخدمة والوقت الذي انقضى منه، مثل التثبيت والانتظار والتفعيل. للاطّلاع على الطابع الزمني الدقيق لكل نشاط، انقر على أزرار توسيع التوسيع.

    الأنشطة والطوابع الزمنية

    لمزيد من المعلومات، يُرجى الاطّلاع على دورة حياة عامل الخدمة.

إذا تسبب مشغّل الخدمات في حدوث أي أخطاء، ستعرض علامة التبويب مشغِّلو الخدمات رمز حدث خطأ. خطأ مع عدد الأخطاء بجانب سطر المصدر. ينقلك الرابط الذي يحتوي على الرقم إلى وحدة التحكم مع جميع الأخطاء المُسجَّلة.

أخطاء مشغّل الخدمات في وحدة التحكّم

للاطِّلاع على المعلومات حول جميع مشغّلي الخدمات، انقر على عرض جميع عمليات التسجيل في أسفل علامة التبويب مشغّلو الخدمات. ينقل هذا الرابط إلى chrome://serviceworker-internals/?devtools حيث يمكنك إجراء المزيد من تصحيح الأخطاء للعاملين في الخدمات.

عمليات تسجيل عاملي الخدمات في عامل الخدمة-داخلي.

ذاكرات التخزين المؤقت لمشغِّلي الخدمات

توفّر علامة التبويب مساحة تخزين ذاكرة التخزين المؤقت قائمة للقراءة فقط بالموارد التي تم تخزينها مؤقتًا باستخدام (عامل الخدمة) ذاكرة التخزين المؤقت API.

علامة تبويب ذاكرة التخزين المؤقت لمشغِّل الخدمات.

وتجدر الإشارة إلى أنّه في المرّة الأولى التي تفتح فيها ذاكرة تخزين مؤقّت وتضيف موردًا إليها، قد لا ترصد "أدوات مطوّري البرامج" هذا التغيير. أعِد تحميل الصفحة وسترى ذاكرة التخزين المؤقت.

إذا كانت لديك ذاكرات تخزين مؤقت مفتوحة أو أكثر، ستشاهدها مدرجة أسفل القائمة المنسدلة مساحة تخزين ذاكرة التخزين المؤقت.

ذاكرات تخزين مؤقتة متعددة لمشغّلي الخدمات.

استخدام الحصة

قد يتم وضع علامة على بعض الاستجابات ضمن علامة التبويب "مساحة تخزين ذاكرة التخزين المؤقت" على أنها "مبهمة". يشير ذلك إلى استجابة تم استردادها من مصدر مختلف، مثلاً من CDN أو واجهة برمجة تطبيقات بعيدة، عندما لا تكون CORS مفعّلة.

لتجنُّب تسرُّب المعلومات من مختلف النطاقات، تتم إضافة مساحة متروكة كبيرة إلى حجم الاستجابة المبهمة التي يتم استخدامها لحساب حدود حصة مساحة التخزين (أي ما إذا تم طرح استثناء QuotaExceeded) ويتم الإبلاغ عنها من خلال navigator.storage API.

وتختلف تفاصيل هذه المساحة المتروكة من متصفّح إلى آخر، ولكن بالنسبة إلى Google Chrome، يعني هذا أنّ الحدّ الأدنى للحجم الذي يساهم به أي استجابة واحدة تخزين مؤقت غير شفافة تساهم في إجمالي استخدام مساحة التخزين هو 7 ميغابايت تقريبًا. يجب أن تضع ذلك في اعتبارك عند تحديد عدد الردود المبهمة التي تريد تخزينها مؤقتًا، حيث يمكنك بسهولة تجاوز حدود حصة التخزين في وقت أقرب بكثير مما قد تتوقعه استنادًا إلى الحجم الفعلي للموارد غير الشفافة.

أدلة ذات صلة:

محو مساحة التخزين

علامة التبويب محو مساحة التخزين هي ميزة مفيدة للغاية عند تطوير تطبيقات ويب تقدّمية. تتيح لك علامة التبويب هذه إلغاء تسجيل مشغِّلي الخدمات ومحو جميع ذاكرات التخزين المؤقت والتخزين بنقرة زر واحدة. ندعوك للاطّلاع على القسم أدناه للحصول على مزيد من المعلومات.

أدلة ذات صلة:

أدلة لوحة التطبيقات الأخرى

راجع الأدلة أدناه للحصول على مزيد من المساعدة في الأجزاء الأخرى من لوحة التطبيق.

أدلة ذات صلة: