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

Kayce Basques

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

قياس

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

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

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

  3. يرجى ملاحظة عنوان URL لمثال التطبيق. سيكون شيئًا مثل https://example.glitch.me.

إجراء تدقيق Lighthouse PWA على نموذج تطبيقك في "أدوات مطوري البرامج في Chrome":

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

في القسم PWA المحسَّنة، تشير أداة Lighthouse إلى أنّ نموذج التطبيق لا يوفّر رمز Apple Touch صالحًا.

لا يتم تقديم رمز apple- touch-icon صالح
التدقيق لا يوفر عملية تدقيق صالحة لتطبيق apple-Touch-icon

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

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

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

ولأن الموقع لم يحدد رمز Apple touch، ينشئ نظام iOS رمزًا للموقع من محتوى الصفحة فحسب.

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

إضافة رمز Apple touch إلى نموذج التطبيق

  • يجب إلغاء تعليق العلامة <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 touch