تصحيح أخطاء تطبيقات الويب التقدمية (PWAs): دليل عملي شامل

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

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

تطبيق اللوحة: مركز العمليات لتطبيقات الويب التقدمية

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

أهم أقسامها لتطبيقات الويب التقدمية (PWAs) هي: البيان (لمراجعة البيان وإمكانية تثبيته)، وعمال الخدمة (لإدارة دورة الحياة، والمحاكاة، والحالة)، وتخزين ذاكرة التخزين المؤقت (لعرض الموارد المخزنة مؤقتًا)، والتخزين/مسح التخزين (لحذف السجلات والبيانات دفعة واحدة). في متصفحات كروميوم، يمكنك أيضًا محاكاة وضع عدم الاتصال والأحداث الرئيسية من هنا.

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

بيان الويب: التثبيت والعرض والضبط الدقيق

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

في قسم "التطبيق" > "البيان" ، ستجد حالة البيان، وحقوله مُنظمة في قسمي "الهوية" و"العرض"، وقائمة الأيقونات مع أقنعتها للتحقق من المناطق الآمنة في الأيقونات القابلة للإخفاء. كما تُعرض أقسام "معالجات البروتوكول" لاختبار تسجيل معالج عنوان URL، و" الاختصار رقم N" مع الاختصارات المُعرّفة، و "لقطة الشاشة رقم N" لمراجعة لقطات الشاشة المُستخدمة في مربع حوار التثبيت المُفصّل.

إمكانية التثبيت والأخطاء : في حال وجود مشاكل (مثلاً، عدم تحميل أيقونة)، سيظهر قسم " إمكانية التثبيت" مع التفاصيل. أبقِ نافذة "وحدة التحكم" مفتوحة عند بدء التثبيت؛ حيث ستُعلمك في الوقت الفعلي إذا كان هناك أي شيء يعيق العملية.

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

عمال الخدمة: دورة الحياة والمحاكاة والأخطاء الصعبة

• عمال الخدمة إنها تشكل قلب تطبيق الويب التقدمي: فهي تعمل في الخلفية، وتعترض الطلبات، وتمكن التخزين المؤقت، وتدفع الإشعارات، وتتزامن الخلفية، وضع غير متصل بالشبكةإن تصحيح أخطائها بشكل جيد هو الفرق بين تطبيق ويب تقدمي مستجيب وآخر يصبح قديمًا أو ينكسر عند اللمسة الأولى.
• تطبيق > عمال الخدمة هذا هو الأمر المركزي: سوف ترى السجل النشط في المصدر الحالي، ونطاقه، والمصدر (مع رابط إلى الكود)، والحالة، ومعرف العامل الجاري تشغيله. أوقفها أو ابدأها يدويًا لمحاكاة عمليات إعادة التشغيل والبحث عن الأخطاء افتراضات الحالة العالمية السيئة.
• مفاتيح التشغيل: غير متصل (يُخرج علامة التبويب من وضع عدم الاتصال، تمامًا مثل الشبكة)، التحديث عند إعادة التحميل (يُفرض التحديث عند كل إعادة تحميل)، تجاوز الشبكة (يتجاهل البرنامج وينتقل إلى الشبكة)، وإجراءات مثل التحديث، والدفع (يُفعّل الدفع بدون حمولة)، والمزامنة (يحاكي أحداث المزامنة)، أو إلغاء التسجيل (يمسح التسجيل الحالي). في حال وجود أخطاء، ستظهر رسالة شارة الأخطاء مع إمكانية الوصول المباشر إلى وحدة التحكم.
• عرض جميع السجلاتفي كروميوم، ينقلك رابط "عرض الكل" إلى chrome://serviceworker-internals/?devtools، حيث يمكنك إجراء فحص متعمق. أما في إيدج، فتتوفر خيارات مماثلة، بما في ذلك تفاصيل العميل والتركيز للانتقال إلى علامة التبويب المرتبطة.

ذاكرة التخزين المؤقت والحصص والتخزين: تجنب المفاجآت المتعلقة بالحدود

• تخزين ذاكرة التخزين المؤقت يعرض، في وضع القراءة فقط، الموارد المُخزّنة في واجهة برمجة تطبيقات التخزين المؤقت بواسطة برنامجك. يُرجى ملاحظة أنه عند فتح ذاكرة تخزين مؤقت وإضافة مورد لأول مرة، قد لا تكتشفه أدوات التطوير فورًا: قم بتحديث الصفحة لرؤيته مدرجًا.
• استخدام الحصص والاستجابات الغامضةستظهر بعض الردود "غير شفافة" (لم يتم تفعيل CORS، أو مصدر مختلف، أو شبكة توصيل المحتوى). لمنع تسرب المعلومات، تطبق المتصفحات الحشو حسب الحجم تم الإبلاغ عنه؛ في Chrome/Edge، تُساهم أي استجابة مُخزّنة مؤقتًا بما لا يقل عن 7 ميجابايت في مساحة التخزين. قد يؤدي هذا إلى تم تجاوز الحصة أسرع مما هو متوقع إذا أساءت استخدام المعتم.
• تخزين واضح يتيح لك إلغاء تسجيل عامل الخدمة ومسح جميع ذاكرات التخزين المؤقت ومساحة التخزين بنقرة واحدة. إنه هبة من السماء عندما تريد حالة نظيفة وتأكد من أن الاختبارات اللاحقة لا تكشف عن أي بقايا.
• التخزين يُمركز التخزين المحلي/الجلسة، وقاعدة البيانات المُفهرسة، وملفات تعريف الارتباط، والحصة، وزر مسح البيانات. استخدمه لمراجعة جداول قاعدة البيانات المُفهرسة، وحالة تخزين الويب، و قياس إجمالي المساحة المشغولة لتطبيق PWA الخاص بك على الجهاز.

التثبيت والاختصارات ولقطات الشاشة والبروتوكولات

• اختصارات التطبيقات إظهار الإجراءات الشائعة من أيقونة التثبيت. في علامة تبويب "البيان"، سترى كل اختصار #N مع تفاصيله؛ أضف فقط الاختصارات التي يستخدمها المستخدم فعليًا لتجنب تحميل القائمة بشكل زائد.
• لقطات الشاشة إثراء حوار التثبيت. راجعها في لقطة الشاشة رقم N للتأكد من التنسيقات والنصوص، وأنها تُمثل سلسلة قيمتك بشكل جيد في الانطباع الأول.
• معالجات البروتوكول سجّل تطبيق الويب التقدمي (PWA) الخاص بك للتعامل مع الروابط بمخططه الخاص (مثل: web+something). في التطبيق > البيان، يمكنك اختبار البروتوكول عن طريق إدخال عنوان URL والسماح لـ PWA بمعالجته إذا كان مسجلاً.
• تشخيص التثبيت في Chromium: على Android، افتح about:wepapk لرؤية التطبيقات المثبتة عبر WebAPK وطلب التحديثات؛ على سطح المكتب، لديك about:apps (قائمة سهلة الاستخدام) وabout:app-service-internals (عرض تصحيح الأخطاء) للمراجعة. الحالة والتحديثات.

دورة التطوير: اختبار التغييرات وعدم القتال مع ذاكرة التخزين المؤقت

• التكرار السريعأثناء التطوير، أسرع طريقة هي إدخال عنوان URL المحلي (مثلاً: http://localhost:8080) وإعادة التحميل باستخدام F5. بما أن البرنامج يخزن الملفات الثابتة مؤقتًا، فقد لا تظهر تغييراتك: استخدم إفراغ ذاكرة التخزين المؤقت وإعادة التحميل الصعبة (انقر بزر الماوس الأيمن على زر إعادة التحميل) أو حدد تجاوز الشبكة في Service Workers.
• البيان والإعادةإذا غيّرت البيان، ثبّت تطبيق الويب التقدمي (PWA) للتحقق من صحة معايير التثبيت. إذا عدّلت البيان مجددًا، فألغِ تثبيته وأعد تثبيته للتحقق. كل التغييرات بشكل موثوق.
• تصحيح أخطاء كود البرنامجفي المصادر، يمكنك الانتقال إلى سياق العامل لتعيين نقاط التوقف ومتابعة تنفيذ مؤشر ترابط عامل الخدمة بشكل مستقل عن الصفحة. هذا هو المفتاح لـ البحث عن أخطاء دورة الحياة.
• خدمات الخلفية:في Chromium، يسمح لك التطبيق > خدمات الخلفية بتسجيل أحداث الدفع والمزامنة والأحداث المشابهة عبر واجهة برمجة تطبيقات SW للاطلاع على ماذا يحدث في الخلفية لا يوجد نافذة نشطة.

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

• وضع الجهاز تتيح لك أدوات التطوير محاكاة أحجام الشاشات، وتجربة المستخدم، والشبكة. يُعد هذا مفيدًا للتصميم المتجاوب وظروف الشبكة، ولكنه لا يغطي جميع المتطلبات بشكل كامل. التثبيت ووضع العرض والاختصاراتولتحقيق هذه الغاية، من الأفضل اللجوء إلى الأجهزة أو المحاكيات.
• محاكي أبل يتيح لك (macOS مع Xcode) الاختبار على أجهزة iPhone وiPad حقيقية على مستوى المحرك، باستخدام Safari للجوال وتطبيق الويب لتطبيقات الويب التقدمية. اختصارات مفيدة: Command-Shift-H (الرئيسية)، Control-Command-Shift-H (مُبدّل التطبيقات)، والتدوير باستخدام Command-يمين/يسار. باستخدام localhost هناك يشير إلى localhost الخاص بـ ماك، وهو أمر مريح للغاية.
• محاكي الأندرويد (Android Studio) مع الصور التي تتضمن خدمات Play، يمكنك تثبيت Chrome والمتصفحات الأخرى من متجر Play أو عبر APK. لاحظ أن كل AVD يمكن أن يشغل مساحة 5 جيجا او اكثر، وجهاز localhost الخاص بك ليس هو جهاز الكمبيوتر الخاص بك: بالنسبة لعناوين URL المحلية، قم بتكوين إعادة توجيه المنفذ من Chromium DevTools.
• تصحيح الأخطاء عن بعدتدعم المتصفحات الرئيسية الفحص عن بُعد. في WebKit، يُقدّم Remote Inspector لمتصفح Safari وتطبيقات الويب التقدمية (PWAs) المثبتة على iOS/iPadOS؛ وفي Chromium، يُقدّم Remote Debugging لمتصفح Chrome أو Edge أو Samsung Internet؛ تصحيح أخطاء Firefox عن بُعد لأجهزة أندرويد. تواصل عبر ذراع USB‏قم بتشغيل التصحيح وسوف ترى الصفحات والتطبيقات التي يجب فحصها.
• تطبيقات الويب التقدمية المثبتة على نظام Android يمكن تصحيح أخطائه باستخدام أدوات Chromium عن بعد؛ سترى سياق التطبيق ويمكنك فتح DevTools كما لو كانت علامة تبويب، وهو أمر رائع لـ تشخيص مشاكل التثبيت أو SW في WebAPK.

Safari وFirefox: ما الذي يمكن توقعه من أدواتك

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

يدعم متصفح فايرفوكس تقنية Service Workers على جميع المنصات، ويتضمن ملفًا خاصًا لتثبيته على نظام أندرويد. يمكنك من خلال أدوات المطورين > التطبيق > Service Workers، عرض التسجيل والحالة وتعديلها، كما يمكنك مراجعة القيم من خلال التطبيق > Manifest. تتيح لك ميزة التخزين إدارة IndexedDB وCache Storage بسلاسة.

استراتيجيات التخزين المؤقت، وعدم الاتصال بالإنترنت، وتحديث المحتوى

المشكلة الشائعة : المحتوى القديم نتيجةً لاستراتيجية التخزين المؤقت المُطبقة بشكل سيئ. بالنسبة للموارد التي تتغير باستمرار، يُنصح بالبدء بالشبكة أو التخزين المؤقت ثم الشبكة، مع تخصيص التخزين المؤقت للبيانات الثابتة غير القابلة للتغيير.

مثال على الشبكة أولاً (مُكيَّف): self.addEventListener('fetch', (event) => {\n event.respondWith(\n caches.match(event.request).then((cached) => {\n return cached || fetch(event.request).then((networkResponse) => {\n return caches.open('dynamic-cache').then((cache) => {\n cache.put(event.request, networkResponse.clone());\n return networkResponse;\n });\n });\n })\n );\n});

غير متصل بصفحة الحجز:تخزين ملف offline.html مؤقتًا أثناء التثبيت واستخدامه كبديل عند فشل عملية الجلب. بهذه الطريقة، يرى المستخدم رسالة مفيدة بدلا من شاشة فارغة. self.addEventListener('install', (event) => {\n event.waitUntil(\n caches.open('static-cache').then((cache) => cache.addAll(['/offline.html']))\n );\n});\nself.addEventListener('fetch', (event) => {\n event.respondWith(\n fetch(event.request).catch(() => caches.match('/offline.html'))\n );\n});

تحديث البرنامج بدون احتكاك: يستخدم self.skipWaiting() في التثبيت، يقترح إعادة تحميل تجربة المستخدم عند توفر إصدار جديد. بهذه الطريقة، تتجنب ترك المستخدمين مع الإصدارات القديمة حتى يتم إغلاق كافة علامات التبويب. self.addEventListener('install', (event) => {\n self.skipWaiting();\n});

الدفع والمزامنة في الخلفية والمهام في الخلفية

دفع الإخطاراتمن التطبيق > عمال الخدمة، يمكنك محاكاة عملية دفع بدون حمولة للتحقق من صحة واجهة المستخدم. تأكد من تعريف الأيقونة والإجراءات والبيانات لإثراء الإشعار. self.addEventListener('push', (event) => {\n const options = {\n body: 'Tienes novedades',\n icon: '/images/icon.png',\n actions: [{ action: 'open', title: 'Abrir' }, { action: 'dismiss', title: 'Cerrar' }]\n };\n event.waitUntil(self.registration.showNotification('Actualización disponible', options));\n});

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

مزامنة الخلفية: يُفعّل عمليات قائمة الانتظار عند انقطاع الشبكة، ويُعيد المحاولة عند إعادة الاتصال. مفيد للنماذج غير المتصلة بالإنترنت أو قوائم انتظار التحميل. self.addEventListener('sync', (event) => {\n if (event.tag === 'sync-data') {\n event.waitUntil(syncData());\n }\n});\nfunction syncData() {\n return fetch('/api/sync', {\n method: 'POST',\n body: JSON.stringify(offlineQueue),\n headers: { 'Content-Type': 'application/json' }\n });\n}

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

البيانات الضخمة: IndexedDB والأداء والذاكرة

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

مثال بسيط لـ IndexedDB: let db;\nconst req = indexedDB.open('PWA-Data', 1);\nreq.onupgradeneeded = (e) => e.target.result.createObjectStore('dataStore');\nreq.onsuccess = (e) => { db = e.target.result; };\nfunction storeData(key, data) {\n const tx = db.transaction('dataStore', 'readwrite');\n tx.objectStore('dataStore').put(data, key);\n}

تحسين الأداء:يضغط الصور، ويصغر حجم CSS/JS، ويقسم الحزم (splitChunks)، ويؤجل الأحمال غير الحرجة، ويقص نصوص الطرف الثالثتجعل الأدوات مثل Webpack عملية التغليف الذكي سهلة. optimization: { splitChunks: { chunks: 'all' }, minimize: true }

ذاكرة- راقب التسريبات باستخدام علامة تبويب الذاكرة في أدوات التطوير؛ أزل المستمعين غير المستخدمين وتجنب تخزين كائنات ضخمة في الذاكرة. طريقة بسيطة removeEventListener في الوقت المناسب فإنه يوفر لك التدهورات والحوادث على الأجهزة المتواضعة.