یک نماد لمسی اپل را به برنامه وب پیشرو خود اضافه کنید

کیسی باسکی

کاربران سافاری برای iOS می‌توانند به صورت دستی برنامه‌های وب پیشرو (PWA) را به صفحه اصلی خود اضافه کنند. نمادی که هنگام افزودن PWA در صفحه اصلی iOS ظاهر می شود ، نماد لمسی اپل نامیده می شود. این کد لبه به شما نشان می دهد که چگونه یک نماد لمسی اپل را به PWA اضافه کنید. فرض بر این است که شما به یک دستگاه iOS دسترسی دارید.

اندازه گیری کنید

برنامه نمونه را در یک تب جدید باز کنید:

  1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.

  2. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .

  3. به URL برنامه نمونه خود توجه کنید. چیزی شبیه https://example.glitch.me خواهد بود.

یک حسابرسی Lighthouse PWA را در برنامه نمونه خود در Chrome DevTools اجرا کنید:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Lighthouse کلیک کنید.
  3. مطمئن شوید که چک باکس Progressive Web App در لیست Categories انتخاب شده است.
  4. روی دکمه Generate report کلیک کنید.

در بخش PWA Optimized ، Lighthouse گزارش می دهد که برنامه نمونه نماد لمسی معتبر اپل را ارائه نمی دهد .

نماد Apple-touch-icon معتبر ارائه نمی دهد
ممیزی معتبر apple-touch-icon ممیزی ارائه نمی کند

برنامه مثال را به صفحه اصلی iOS اضافه کنید

برای نشان دادن اینکه چگونه یک نماد لمسی اپل تجربه کاربری شیک تری را ارائه می دهد، ابتدا سعی کنید برنامه نمونه را به صفحه اصلی دستگاه iOS خود اضافه کنید، زمانی که نماد لمسی اپل مشخص نشده است.

  1. Safari را برای iOS باز کنید.
  2. URL برنامه نمونه خود را باز کنید. این URL مانند https://example.glitch.me است که قبلاً به آن اشاره کردید.
  3. روی Share ضربه بزنید دکمه اشتراک اپل > افزودن به صفحه اصلی . احتمالاً برای دیدن این گزینه باید انگشت خود را به چپ بکشید.
  4. روی افزودن ضربه بزنید.

از آنجایی که سایت نماد لمسی اپل را مشخص نکرده است، 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 معتبر ارائه نمی کند اکنون می گذرد.
نماد لمس اپل.
نماد لمس اپل.