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

Kayce Basques

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

القياس

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

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

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

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

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

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

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

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

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

لتوضيح كيف يوفر رمز اللمس من Apple تجربة أكثر سلاسة للمستخدم، حاول أولاً إضافة مثال التطبيق على الشاشة الرئيسية لجهاز 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