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

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

تطبيقات الويب التقدّمية (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):

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

    زر "تثبيت"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الأدلة ذات الصلة:

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

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

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

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

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

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

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

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

عمليات تسجيل مشغّلي الخدمات في Serviceworker-internals

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

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

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

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

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

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

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

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

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

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

الأدلة ذات الصلة:

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

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

الأدلة ذات الصلة:

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

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

الأدلة ذات الصلة: