إضافة رمز Apple touch إلى "تطبيق الويب التقدّمي"

Kayce Basques

يمكن لمستخدمي متصفّح Safari على نظام التشغيل iOS إضافة تطبيقات الويب التقدّمية (PWAs) يدويًا إلى شاشتهم الرئيسية. يُعرف الرمز الذي يظهر على شاشة iOS الرئيسية عند إضافة تطبيق ويب تقدّمي باسم رمز Apple المخصّص للأجهزة الجوّالة. يوضّح لك هذا الدليل التعليمي كيفية إضافة رمز Apple touch icon إلى تطبيق متوافق مع الأجهزة الجوّالة. يفترض الإجراء أنّ لديك إذن الوصول إلى جهاز iOS.

القياس

افتح مثال التطبيق في علامة تبويب جديدة:

  1. انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.

  2. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.

  3. دوِّن عنوان URL لمثال التطبيق. سيكون على النحو التالي: https://example.glitch.me.

يمكنك إجراء تدقيق في تطبيق متوافق مع مبادرة التطبيقات المصمّمة للأجهزة الجوّالة (PWA) باستخدام Lighthouse على مثال تطبيقك في "أدوات مطوّري البرامج في Chrome":

  1. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  2. انقر على علامة التبويب مصباح الهداية.
  3. تأكَّد من وضع علامة في مربّع الاختيار تطبيق ويب تقدّمي في قائمة الفئات.
  4. انقر على الزر إنشاء التقرير.

في قسم تطبيقات الويب التقدّمية المحسّنة، يُبلغ Lighthouse أنّ مثال التطبيق لا يوفّر رمز Apple Touch Icon صالحًا.

لا يتم تقديم رمز apple-touch-icon صالح
تقرير التدقيق عدم توفّر رمز apple-touch-icon صالح

إضافة مثال التطبيق إلى شاشة رئيسية في نظام التشغيل iOS

لتوضيح مدى تحسين تجربة المستخدم من خلال رمز Apple touch icon، جرِّب أولاً إضافة تطبيق المثال إلى الشاشة الرئيسية لجهاز iOS عندما لا يكون قد تم تحديد رمز Apple touch icon.

  1. افتح متصفّح Safari على جهاز iOS.
  2. افتح عنوان URL لمثال التطبيق. وهو عنوان URL مثل https://example.glitch.me الذي سجّلته سابقًا.
  3. انقر على مشاركة زر المشاركة من Apple > إضافة إلى الشاشة الرئيسية. قد تحتاج إلى التمرير سريعًا جهة اليمين للاطّلاع على هذا الخيار.
  4. انقر على إضافة.

بما أنّ الموقع الإلكتروني لم يحدّد رمز Apple Touch Icon، ينشئ نظام التشغيل iOS رمزًا للموقع الإلكتروني من محتوى الصفحة.

رمز الشاشة الرئيسية الذي تم إنشاؤه تلقائيًا
رمز الشاشة الرئيسية الذي تم إنشاؤه تلقائيًا

إضافة رمز Apple touch icon إلى مثال التطبيق

  • أزِل التعليق التوضيحي عن علامة <link rel="apple-touch-icon"> في أسفل <head> من index.html.
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

إضافة مثال التطبيق إلى شاشة رئيسية في جهاز iOS (مرة أخرى)

  • حاوِل إضافة نموذج التطبيق إلى شاشة رئيسية في جهاز iOS مرة أخرى. هذه المرة، تم إنشاء رمز مناسب للموقع الإلكتروني. إذا راجعت الصفحة مرة أخرى باستخدام Lighthouse، ستلاحظ أيضًا أنّ عملية التدقيق في عدم تقديم قيمة صالحة لسمة apple-touch-icon ستتم الآن بنجاح.
رمز Apple touch icon
رمز Apple touch icon