Progresif Web Uygulamanıza Apple dokunma simgesi ekleme

Kayce Basques

iOS için Safari, Progresif Web Uygulamalarını (PWA) kullanıyor olabilir. PWA eklendiğinde iOS ana ekranında görünen simgenin adı nedir? Apple dokunmatik simgesi. Bu codelab'de, PWA'ya Apple dokunmatik simgesi nasıl ekleneceği gösterilmektedir. Varsayımda iOS cihaza erişiminiz olduğundan emin olun.

Ölçüm

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

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

  2. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.

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

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+Üst Karakter+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 dokunmatik simgesi.

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 ekleme

Apple Touch simgesinin nasıl daha iyi bir kullanıcı deneyimi sunduğunu göstermek için önce bir Apple dokunmatik simgesi belirtilmediğinde örnek uygulamayı iOS cihazınızın ana ekranına kopyalar.

  1. iOS için Safari'yi açın.
  2. Örnek uygulamanızın URL'sini açın. Bu, https://example.glitch.me gibi bir URL'dir. dikkat edin.
  3. Paylaş'a Apple Share Düğmesi dokunun > Add to Home Screen (Ana Ekrana Ekle) seçeneğini tıklayın. Bu seçeneği görmek için muhtemelen sola kaydırmanız gerekecektir.
  4. Ekle'ye dokunun.

Sitede bir Apple Touch simgesi belirtilmediğinden iOS, site için yalnızca bir simge oluşturur fark edebilirsiniz.

Otomatik olarak oluşturulan bir ana ekran simgesi.
Otomatik olarak oluşturulan bir ana ekran simgesi.

Örnek uygulamaya bir Apple Touch simgesi ekleyin

  • index.html öğesinin <head> alt kısmındaki <link rel="apple-touch-icon"> etiketinin açıklamasını 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ı bir iOS ana ekranına ekleme (tekrar)

  • Örnek uygulamayı bir iOS ana ekranına tekrar eklemeyi deneyin. Bu kez, resim için uygun bir simge oluşturulur gösterir. Sayfayı Lighthouse ile tekrar denetlerseniz Geçerli bir apple-touch-icon sağlanmıyorsa denetimi şu anda başarılı.
ziyaret edin.
Apple dokunmatik simgesi.
Apple dokunmatik simgesi.