عندما يضيف مستخدمو iOS Safari تطبيقات الويب التقدّمية (PWA) إلى
شاشاتهم الرئيسية، فإن الأيقونة التي تظهر تسمى أيقونة Apple touch.
يمكنك تحديد الرمز الذي يجب أن يستخدمه تطبيقك من خلال تضمين
علامة <link rel="apple-touch-icon" href="/example.png">
في <head>
من
. إذا لم تكن صفحتك تحتوي على علامة الرابط هذه، يُنشئ iOS رمزًا من خلال أخذ لقطة شاشة
محتوى الصفحة. بمعنى آخر، يؤدي توجيه تعليمات إلى iOS بتنزيل رمز إلى الحصول على
تجربة المستخدم.
أسباب تعذُّر تدقيق رمز اللمس في Lighthouse من Apple
Lighthouse
وضع علامة على الصفحات التي لا تحتوي على <link rel="apple-touch-icon" href="/example.png">
في <head>
:
لا تتحقّق أداة Lighthouse مما إذا كان الرمز موجودًا فعلاً أم لا بالحجم الصحيح.
كيفية إضافة رمز Apple Touch
إضافة
<link rel="apple-touch-icon" href="/example.png">
إلى<head>
في صفحتك:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
استبدِل
/example.png
بالمسار الفعلي للرمز.
لتقديم تجربة جيدة للمستخدم، تأكَّد مما يلي:
- يبلغ حجم الرمز 180x180 بكسل أو 192x192 بكسل.
- المسار المحدد إلى الرمز صالح
- خلفية الرمز غير شفافة