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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

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

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

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

ملخّص

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

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

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

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

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

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

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

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

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

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

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

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

إذا كان شعارك بالكامل مرئيًا في منطقة العرض الآمنة، يمكنك المتابعة.

تثبيت المشغّل

يتيح لك Chrome إمكانية تفعيل تثبيت تطبيق الويب التقدّمي والترويج له مباشرةً من خلال واجهة المستخدم. كيفية توفير تجربة تثبيت داخل التطبيق

لتفعيل عملية تثبيت تطبيق الويب التقدّمي، اتّبِع الخطوات التالية:

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

    زر "تثبيت"

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

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

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

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

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

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

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

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

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

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

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

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

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

لاختبار المعالج، اتّبِع الخطوات التالية:

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

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

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

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

أدلة ذات صلة:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

أدلة ذات صلة:

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

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

أدلة ذات صلة:

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

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

أدلة ذات صلة: