أيقونة PWA لا تتحدث: البيان ومسارات الصور والتخزين المؤقت

إذا لم تتحدث أيقونة PWA، فافحص أولًا ملف البيان وعناوين الصور التي يتلقاها المتصفح فعلًا. تغيير favicon للتبويب لا يستبدل بالضرورة صورة التطبيق المثبّت. قد تأتي هذه الموارد من تصريحات وذاكرات مؤقتة مختلفة.

يجهّز مولّد favicon وPWA الصور وبيانًا ابتدائيًا. عند نشر الملفات في موقعك، طابق مسارات البيان مع المواقع التي وضعت فيها الصور.

افصل أيقونة التبويب عن الأيقونة المثبّتة

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

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

افتح البيان الذي تربطه الصفحة

افحص رابط البيان وافتح عنوانه مباشرة. يجب أن يعيد JSON المطلوب، لا صفحة دخول أو حلقة تحويل أو HTML عامًا. راجع الاستجابة المنشورة، وليس الملف في محررك فقط.

يصدر المولّد الحالي Web/site.webmanifest والصورتين android-chrome-192x192.png وandroid-chrome-512x512.png. يستخدم البيان الابتدائي مسارات تبدأ من الجذر. إذا وضعت الصور في مجلد آخر، فحدّث الإدخالات بدل تركها تشير إلى ملفات غير موجودة.

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

اتبع كل عنوان صورة

تشرح مرجعية MDN لأيقونات البيان خصائص src وsizes وtype وpurpose. تُحل المسارات النسبية من عنوان البيان، بينما تبدأ المسارات ذات / من جذر الأصل.

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

قارن الأبعاد المعلنة بالبكسلات الفعلية. إذا غيرت حجم الصورة بعد التوليد، فحدّث إدخال البيان أيضًا. وجود 192 أو 512 في الاسم لا يثبت قياس الصورة.

يمكنك كتابة العنوان الذي اختبرته في سجل النشر. هذا أوضح من الاعتماد على صورة في المحرر عندما توجد نسخ متعددة في مجلدات مختلفة.

أعلن الاستخدام الذي يدعمه الرسم فقط

ينشئ الإخراج الحالي أيقونات عادية. لا يوفر صورة maskable منفصلة جرى اختبارها. إضافة purpose: "maskable" إلى صورة موجودة لا تعيد تصميم منطقتها الآمنة.

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

مثال manifest وأيقونات جرى فحصه في المتصفح

في 1 أكتوبر 2026، فتح Chrome 154 موقع اختبار محليًا أصليًا يتضمن manifest والأيقونات المصدّرة. استجاب manifest برمز 200 ونوع application/manifest+json؛ وتوجّه start_url وscope النسبيان إلى جذر موقع الاختبار. استجابت الأيقونتان برمز 200 وأكد فك ترميز الصور أبعاد 192 × 192 و512 × 512 بكسل. فُحصت تصريحات favicon وApple touch icon بصورة منفصلة.

تنزيل موقع اختبار أيقونات PWA الأصلي

شغّل هذا الأمر من المجلد المستخرج وافتح http://localhost:8892/. إذا نقلت الملفات إلى مجلد فرعي، حدّث عناوين الأيقونات التي تبدأ من الجذر.

python3 -m http.server 8892 --bind localhost

افحص المتصفح قبل حذف كل البيانات

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

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

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

اختبر التثبيت كمسار مستقل

يشرح دليل MDN لقابلية تثبيت PWA الشروط الأوسع. الصور الصحيحة جزء من العملية، لكن تصديرها وحده لا يجعل الموقع قابلًا للتثبيت في كل متصفح أو نظام.

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

تثبيت فعلي عبر Safari

في 2 أكتوبر 2026 أُضيف موقع الاختبار نفسه إلى الشاشة الرئيسية في محاكي iPhone 17 مستقل يعمل بنظام iOS 26.5 وSafari. كان خيار الفتح كتطبيق ويب مفعّلاً. عرضت أيقونة My App رسم XY الأصلي، وعند لمسها فُتح الموقع في تطبيق Web مستقل دون شريط عنوان Safari. يتحقق ذلك من هذا المسار المحلي، ولا يثبت التثبيت في Chromium أو العمل دون اتصال أو سلوك جهاز فعلي.

وفق تعليمات Apple لـSafari، افتح الموقع ثم اختر المزيد → مشاركة → إضافة إلى الشاشة الرئيسية. أبقِ الفتح كتطبيق ويب مفعّلاً واضغط إضافة. افتح الأيقونة الجديدة وتحقق من الرسم والوجهة. ما زال موقع الاختبار لا يوفر service worker أو رسماً مخصصاً لـmaskable.

أسئلة عن أيقونات PWA

لماذا تغيرت أيقونة التبويب ولم تتغير المثبّتة؟

راجع تصريحات favicon والبيان كلًا على حدة، ثم ذاكرة التثبيت القديم. قد يكون favicon صحيحًا بينما يشير البيان إلى ملف مختلف.

هل يكفي تغيير اسم الملف؟

يمكن مطابقة الأسماء، لكن افحص الصيغة والأبعاد أيضًا. إعادة التسمية لا تحول الصورة ولا تغيّر قياسها.

هل يجب أن تعرض جميع المتصفحات النتيجة نفسها؟

لا. تختلف واجهات التثبيت والأغراض المدعومة. اختبر المتصفح والجهاز المستهدفين بدل تعميم معاينة واحدة.

اترك فحصًا يمكن إعادته

أكد عنوان البيان، واتبع صورَه، وتحقق من الملفات قبل تثبيت تجريبي جديد. إذا احتجت مواد بديلة، فارجع إلى مولّد PWA.