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:
Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
Ö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:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Progresif Web Uygulaması onay kutusunun seçili olduğundan emin olun.
- 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.
Ö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.
- iOS için Safari'yi açın.
- Örnek uygulamanızın URL'sini açın. Bu, daha önce not ettiğiniz
https://example.glitch.me
URL'sidir. - Paylaş > Ana Ekrana Ekle'ye dokunun. Bu seçeneği görmek için muhtemelen sola kaydırmanız gerekir.
- Ekle'ye dokunun.
Sitede bir Apple dokunma simgesi belirtilmedikçe iOS, sayfanın içeriğinden site için bir simge oluşturur.
Ö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.