iPhone Safari Web Uygulamaları Nasıl Tam Ekran Gösterilir?

iPhone Safari tarayıcısı üzerinden çalıştırdığınız web app’leri ana ekrana eklediğinizde cihaza yüklü bir uygulama gibi davranmasını istiyorsanız yapmanız gerekenleri derledim.

Yakın zamanda yayımladığım pötikare oyunu tarayıcı üzerinden oynanmaya devam ederken oyunun müdavimi arkadaşlar için tarayıcıların sunduğu ana ekrana ekleme özelliği sayesinde yüklü diğer uygulamalar gibi tam ekran kullanılabilsin diye yaptığım araştırma sonuçları ve bu konuda bir Türkçe kaynağın olmaması bu yazıyı yazmama vesile oldu.

iPhone Safari Web Uygulamaları Nasıl Tam Ekran Gösterilir?

İos’ta yapılan son güncelleme neticesinde desteklenen meta etiketlerini öncelikle sayfamızın head tagları arasına ekleyerek işe başlayalım.

meta name="apple-mobile-web-app-capable" content="yes">
meta name="apple-mobile-web-app-status-bar-style" content="white">
meta name="apple-mobile-web-app-title" content="Potikare">

apple-mobile-web-app-status-bar-style etiketi aynı zamanda black ve black-translucent seçeneklerini desteklemekte. Black seçeneği koyu ve saat vb. diğer ikonların üstte görünür halde olmasını, black-translucent seçeneği ise bu ikonların uygulamanızın içine dahilmiş gibi görüntülenmesini sağlıyor. Ayrıca attaki meta etiketini de kullanarak uygulamanıza uygun genel bir renk belirleyip, bu alanı o renge boyayabilirsiniz.

meta name="theme-color" content="#f9f9f9">

İkinci aşamada oluşturmanız gereken bir manifest.json dosyası. Bu dosyanın içeriği de hemen alttaki gibi.

{
 "name": "potikare.app",

 "short_name": "pötikare",

 "start_url": "https://potikare.app",

 "display": "standalone",

 "icons": [{

  "src": "apple-icon-180x180.png",

  "sizes": "512x512",

  "type": "image/png"

 }]

}

Buradaki display seçeneği uygulamanızın nasıl davranacağını belirliyor. Fullscreen, Minimal-UI ve standalone seçeneklerinin olduğu bu kısımda eğer siteniz tarayıcı düğmelerine ihtiyaç duyuyorsa ileri geri vb. Minimal-UI seçmelisiniz. Siteniz bu düğmelere ihtiyaç duymadan kullanılabiliyorsa diğer seçenekleri kullanabilirsiniz. Aradaki fark yukarıda bahsettiğim black ile black-translucent seçenekleri ile aynı.

Son Olarak Toparlayalım…

Sonuç olarak toparlamak gerekirse meta etiketlerinizi kendinize göre düzenleyip ekleyiniz. Bir manifest.json dosyası oluşturup içeriğini kendinize göre düzenleyip sunucunuza atın. Ayrıca bu manifest dosyası içerisinde icon adresi de verilmektedir. Uygulamanızın ikonunu da sunucunuza attıktan sonra adresi ve dosya formatını güncellemeyi unutmayın.

Bonus olarak eğer uygulamanız ilk açılışında diğer yerel uygulama ekranları gibi bir açılış ekranına sahip olsun istiyorsanız aşağıdaki etiketi kullanabilirsiniz.

link rel="apple-touch-startup-image" href="img/potikare-game.jpg">