کاربران سافاری برای iOS میتوانند به صورت دستی برنامههای وب پیشرو (PWA) را به صفحه اصلی خود اضافه کنند. نمادی که هنگام افزودن PWA در صفحه اصلی iOS ظاهر می شود، نماد لمسی اپل نامیده می شود. این کد لبه به شما نشان می دهد که چگونه یک نماد لمسی اپل را به PWA اضافه کنید. فرض بر این است که شما به یک دستگاه iOS دسترسی دارید.
اندازه گیری کنید
برنامه نمونه را در یک تب جدید باز کنید:
روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
به URL برنامه نمونه خود توجه کنید. چیزی شبیه
https://example.glitch.me
خواهد بود.
یک حسابرسی Lighthouse PWA را در برنامه نمونه خود در Chrome DevTools اجرا کنید:
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Progressive Web App در لیست Categories انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
در بخش PWA Optimized ، Lighthouse گزارش می دهد که برنامه نمونه نماد لمسی معتبر اپل را ارائه نمی دهد .
برنامه مثال را به صفحه اصلی iOS اضافه کنید
برای نشان دادن اینکه چگونه یک نماد لمسی اپل تجربه کاربری شیک تری را ارائه می دهد، ابتدا سعی کنید برنامه نمونه را به صفحه اصلی دستگاه iOS خود اضافه کنید، زمانی که نماد لمسی اپل مشخص نشده است.
- Safari را برای iOS باز کنید.
- URL برنامه نمونه خود را باز کنید. این URL مانند
https://example.glitch.me
است که قبلاً به آن اشاره کردید. - روی Share ضربه بزنید > افزودن به صفحه اصلی . احتمالاً برای دیدن این گزینه باید انگشت خود را به چپ بکشید.
- روی افزودن ضربه بزنید.
از آنجایی که سایت نماد لمسی اپل را مشخص نکرده است، iOS فقط یک نماد برای سایت از محتوای صفحه ایجاد می کند.
یک نماد لمسی اپل را به برنامه مثال اضافه کنید
- برچسب
<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
معتبر ارائه نمی کند اکنون می گذرد.