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

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

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

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

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

ملخّص

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

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

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

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

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

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

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

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

عرض الرموز القابلة للإخفاء والاطّلاع عليها

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

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

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

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

تركيب عامل الظهور

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

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

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

    زر "تثبيت"

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

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

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

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

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

لفحص الاختصارات التي حدّدتها في ملف البيان، انتقِل إلى أقسام الاختصار رقم 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 في قائمة الأوامر.
  • يفرض مربّع الاختيار مربّع اختيار التحديث عند إعادة التحميل على عامل الخدمة تعديل نفسه عند كل تحميل للصفحة.
  • يتجاهل مربّع الاختيار مربّع اختيار التجاوز للشبكة مشغّل الخدمة ويجبر المتصفّح على الانتقال إلى الشبكة للحصول على الموارد المطلوبة.
  • ينقلك رابط طلبات الشبكة إلى لوحة الشبكة التي تتضمّن قائمة بالطلبات التي تم اعتراضها والمرتبطة بخدمة worker (فلتر is:service-worker-intercepted).
  • يؤدي رابط تعديل إلى إجراء تعديل لمرة واحدة على عامل الخدمة المحدّد.
  • يحاكي الزر Push إشعارًا فوريًا بدون حمولة (يُعرف أيضًا باسم tickle).
  • يحاكي الزر مزامنة حدث مزامنة في الخلفية.
  • يؤدي النقر على الرابط إلغاء التسجيل إلى إلغاء تسجيل مشغّل الخدمات المحدّد. اطّلِع على محو مساحة التخزين لمعرفة طريقة لإلغاء تسجيل عامل خدمة ومحو مساحة التخزين وذاكرات التخزين المؤقت بنقرة زر واحدة.
  • يُعلمك سطر المصدر بوقت تثبيت عامل الخدمة الذي يعمل حاليًا. الرابط هو اسم ملف مصدر الخدمة العاملة. يؤدي النقر على الرابط إلى توجيهك إلى مصدر عامل الخدمة.
  • يُعلمك سطر الحالة بحالة عامل الخدمة. يشير الرقم في هذا السطر (#16 في لقطة الشاشة) إلى عدد المرات التي تم فيها تعديل الخدمة العاملة. في حال تفعيل مربّع الاختيار مربّع اختيار التعديل عند إعادة التحميل، ستلاحظ أنّ الرقم يزداد عند كل تحميل للصفحة. بجانب الحالة، سيظهر لك رابط بدء (إذا كان عامل الخدمة متوقفًا) أو رابط إيقاف (إذا كان عامل الخدمة قيد التشغيل). تم تصميم مهام الخدمة بحيث يمكن للمتصفّح إيقافها وتشغيلها في أي وقت. يمكن أن يؤدي إيقاف عامل الخدمة صراحةً باستخدام رابط إيقاف إلى تمثيل ذلك. يُعدّ إيقاف worker الخدمة طريقة رائعة لاختبار سلوك الرمز البرمجي عند إعادة تشغيل worker الخدمة. ويكشف هذا الفحص غالبًا عن أخطاء بسبب افتراضات خاطئة بشأن الحالة الشاملة الثابتة.
  • يوضّح لك سطر العملاء المصدر الذي ينطبق عليه عامل الخدمة. يكون الزر التركيز مفيدًا في الغالب عندما يكون لديك عدة خدمات مسجّلة. إذا نقرت على الزر تركيز بجانب عامل خدمة يعمل في علامة تبويب مختلفة، سيركّز Chrome على علامة التبويب تلك.
  • يعرض لك جدول دورة التعديل أنشطة الخدمة العاملة والأوقات المنقضية، مثل التثبيت والانتظار والتنشيط. للاطّلاع على الطابع الزمني الدقيق لكل نشاط، انقر على الزرّين توسيع توسيع.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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