يمكن لمستخدمي Safari لنظام التشغيل iOS إضافة تطبيقات الويب التقدّمية (PWA) يدويًا إلى الشاشة الرئيسية. يُطلق على الرمز الذي يظهر على الشاشة الرئيسية لنظام iOS عند إضافة تطبيق ويب تقدّمي (PWA) اسم رمز Apple touch. يوضّح لك هذا الدرس التطبيقي حول الترميز كيفية إضافة رمز Apple touch إلى تطبيق ويب تقدّمي (PWA). من المفترض أن يكون لديك حق الوصول إلى جهاز iOS.
قياس
فتح نموذج التطبيق في علامة تبويب جديدة:
انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة
.
يرجى ملاحظة عنوان URL لمثال التطبيق. سيكون شيئًا مثل
https://example.glitch.me
.
إجراء تدقيق Lighthouse PWA على نموذج تطبيقك في "أدوات مطوري البرامج في Chrome":
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب Lighthouse.
- تأكَّد من وضع علامة في مربّع الاختيار تطبيق الويب التقدّمي في قائمة الفئات.
- انقر على زر إنشاء تقرير.
في القسم PWA المحسَّنة، تشير أداة Lighthouse إلى أنّ نموذج التطبيق لا يوفّر رمز Apple Touch صالحًا.
![لا يتم تقديم رمز apple- touch-icon صالح](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/does-provide-valid-appl-3f357b1a31581.png?authuser=5&hl=ar)
إضافة نموذج التطبيق إلى شاشة رئيسية لنظام التشغيل iOS
لتوضيح كيف يوفر رمز Apple touch تجربة مستخدم أكثر تحسُّنًا، حاول أولاً إضافة نموذج التطبيق إلى الشاشة الرئيسية لجهاز iOS عندما لا يتم تحديد رمز Apple touch.
- افتح Safari لنظام التشغيل iOS.
- افتح عنوان URL لمثال التطبيق الخاص بك. هذا هو عنوان URL مثل
https://example.glitch.me
الذي لاحظته سابقًا. - النقر على مشاركة
> إضافة إلى الشاشة الرئيسية ستحتاج على الأرجح إلى التمرير سريعًا إلى اليمين لرؤية هذا الخيار.
- انقر على إضافة.
ولأن الموقع لم يحدد رمز Apple touch، ينشئ نظام iOS رمزًا للموقع من محتوى الصفحة فحسب.
![رمز شاشة رئيسية تم إنشاؤه تلقائيًا](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/an-auto-generated-home-sc-3fae3a26906d9.png?authuser=5&hl=ar)
إضافة رمز 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](https://web.developers.google.cn/static/articles/codelab-apple-touch-icon/image/the-apple-touch-icon-fb4c851adc96.png?authuser=5&hl=ar)