Progresif Web Uygulamanıza Apple dokunma simgesi ekleme

Kayce Basques

iOS için Safari kullanıcıları, ana ekranlarına manuel olarak Progresif Web Uygulamaları (PWA) eklemeleri yapabilir. PWA eklendiğinde iOS ana ekranında görünen simgeye Apple dokunma simgesi denir. Bu codelab'de, PWA'ya Apple dokunma simgesinin nasıl ekleneceği gösterilmektedir. Bir iOS cihazına erişiminizin olduğu varsayılır.

Ölçüm

Örnek uygulamayı yeni bir sekmede açın:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

  2. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.

  3. Örnek uygulamanızın URL'sini not edin. URL, https://example.glitch.me gibi bir değer olacaktır.

Chrome Geliştirici Araçları'ndaki örnek uygulamanızda bir Lighthouse PWA denetimi çalıştırın:

  1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Kategoriler listesinde Progresif Web Uygulaması onay kutusunun seçili olduğundan emin olun.
  4. Rapor oluştur düğmesini tıklayın.

PWA için Optimize Edilmiş bölümünde Lighthouse, örnek uygulamanın geçerli bir Apple dokunma simgesi sağlamadığını bildirir.

Geçerli bir apple-touch-icon sağlamıyor
Geçerli bir apple-touch-icon denetimi sağlamıyor

Örnek uygulamayı bir iOS ana ekranına ekleyin

Apple dokunma simgesinin nasıl daha gösterişli bir kullanıcı deneyimi sunduğunu göstermek için önce Apple dokunma simgesi belirtilmediğinde örnek uygulamayı iOS cihazınızın ana ekranına eklemeyi deneyin.

  1. iOS için Safari'yi açın.
  2. Örnek uygulamanızın URL'sini açın. Bu, daha önce not ettiğiniz https://example.glitch.me URL'sidir.
  3. Paylaş Apple Paylaş Düğmesi > Ana Ekrana Ekle'ye dokunun. Bu seçeneği görmek için muhtemelen sola kaydırmanız gerekir.
  4. Ekle'ye dokunun.

Sitede bir Apple dokunma simgesi belirtilmedikçe iOS, sayfanın içeriğinden site için bir simge oluşturur.

Otomatik olarak oluşturulmuş ana ekran simgesi.
Otomatik olarak oluşturulmuş ana ekran simgesi.

Örnek uygulamaya bir Apple dokunma simgesi ekle

  • index.html etiketindeki <head> etiketinin alt kısmındaki <link rel="apple-touch-icon"> etiketinin yorumunu kaldırın.
    …
    <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>
  …

Örnek uygulamayı iOS ana ekranına ekleme (tekrar)

  • Örnek uygulamayı bir iOS ana ekranına tekrar eklemeyi deneyin. Bu kez, site için uygun bir simge oluşturulur. Sayfayı Lighthouse ile tekrar denetlerseniz Geçerli bir apple-touch-icon sağlamıyor denetiminin geçtiğini de görürsünüz.
Apple dokunma simgesi.
Apple dokunma simgesi.