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

Kayce Basques

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

القياس

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

  1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

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

  3. دوِّن عنوان URL لمثال التطبيق الخاص بك. سيظهر على شكل https://example.glitch.me.

أجرِ تدقيقًا في تطبيق الويب التقدّمي Lighthouse في نموذج تطبيقك في "أدوات مطوري البرامج في Chrome":

  1. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  2. انقر على علامة التبويب Lighthouse.
  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
رمز اللمس من Apple.