Progresif Web Uygulamanıza Apple dokunma simgesi ekleme

Kayce Basques

iOS için Safari kullanıcıları, ana ekranlarına Progresif Web Uygulamaları (PWA) manuel olarak ekleyebilir. Bir PWA eklendiğinde iOS ana ekranında görünen simge Apple dokunma simgesi olarak adlandırılır. Bu kod laboratuvarında, PWA'ya Apple dokunma simgesi ekleme işlemi gösterilmektedir. Bu işlem için iOS cihaza erişiminiz olması gerekir.

Ölçüm

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

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

  2. Siteyi önizlemek için Uygulamayı Görüntüle'ye, 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 şey olacaktır.

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

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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 Optimize 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ğlanmıyor
Geçerli bir apple-touch-icon sağlamıyor denetimi

Örnek uygulamayı iOS ana ekranına ekleme

Apple dokunma simgesinin nasıl daha iyi bir kullanıcı deneyimi sunduğunu göstermek için önce, Apple dokunma simgesi belirtilmemişken ö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 gibi bir URL'dir.
  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.

Site için Apple dokunmatik simgesi belirtilmediğinden iOS, sitenin simgesini sayfanın içeriğinden oluşturur.

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

Örnek uygulamaya Apple dokunma simgesi ekleme

  • index.html dosyasının <head> bölümünün en altı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 tekrar ekleme

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