iOS Web App Oluşturmak

Çalışmalarımızda çeşitlilik hız kesmeden devam ediyor. Şimdi de oluşturduğumuz HTML5 web sitesini, bir kaç ufak değişiklikle iOS Web App haline çeviriyoruz. Görüntüde native app’e çok yakın bir sonuç elde ediyoruz. Bunu sağlayabilmek için sitenin meta tagları arasına şu bilgileri girmemiz gerekiyor:

Öncelikle görüntü alanımızı ayarlayalım. Aşağıdaki viewport metasında ekran genişliği ve yakınlaştırma oranı sabitlenir. Bu şekilde siteniz iOS uygulaması gibi daha sabit bir görüntü elde edecektir. Diğer metalarda ise sitenin web app olduğunu yani site içerisinde dolaşmak için Safari’nin işlevlerine ihtiyaç kalmadığını gösterir. Son satırda ise tepedeki durum çubuğunun olabilecek en dar halde kalması sağlanır.

1
2
3
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Sitenin görüntüsünü tamamladıktan sonra şimdi de dışarıdaki ikon ve açılış ekranına gelelim. Siteniz ana ekrana eklendiğinde nasıl bir ikonla görüntülenecek ve açılırken sitenin parça parça yüklenmesi yerine hangi görsel gösterilecek. Bunların cevapları ise aşağıdaki metalarda yazılmıştır. Buradaki sıkıntı her cihaz için ayrı çözünürlükte görselin oluşturulmasıdır. Eğer cihazın beklediği boyutlarda görsel mevcut değilse işe yaramayacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- İkonlar -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

<!-- Açılış ekranı görseli -->
<!-- iPhone -->
<link rel="apple-touch-startup-image"
      media="(device-width: 320px)"
      href="apple-touch-startup-image-320x460.png">
<!-- iPhone (Retina) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 320px)
         and (-webkit-device-pixel-ratio: 2)"
      href="apple-touch-startup-image-640x920.png">

<!-- iPad (portrait) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: portrait)"
      href="apple-touch-startup-image-768x1004.png">
<!-- iPad (landscape) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: landscape)"
      href="apple-touch-startup-image-748x1024.png">
<!-- iPad (Retina, portrait) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      href="apple-touch-startup-image-1536x2008.png">
<!-- iPad (Retina, landscape) -->
<link rel="apple-touch-startup-image"
      media="(device-width: 768px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      href="apple-touch-startup-image-1496x2048.png">

Bunları tamamladıktan iOS sistemi olan (iPod Touch, iPhone, iPad) cihazınızda Safari ile siteyi açabilir ve yukarıdaki “kutudan çıkan ok” butonuna tıklayarak “Ana Ekrana Ekle” butonu ile ana ekranda uygulama kısayolu oluşturabilirsiniz. Doğru uyguladıysanız yeni ikonu ve açtığınızda açılış görselini görebilirsiniz. Uygulama tam ekran olarak açılacaktır.

Önceden mobil uygulama olarak planlanmamış sitelerde tıklanan linkler sonucu Safari’nin açılması gibi bir hata oluşuyor. Sistem uygulamada tıklanan linkleri Safari ile açması gereken web sayfaları olarak görüyor. Bunu engellemek için ya baştan sitenin mimarisini AJAX üzerine kurarak sadece değişmesi gereken bölgenin dinamik olduğu geri kalanının statik olduğu bir site yapabilirsiniz yada aşağıdaki javascript kodu ile sayfa üzerindeki bütün linkleri değiştirerek yapabilirsiniz. AJAX kullanımını tavsiye ederim.

1
2
3
4
5
6
7
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
	a[i].onclick = function () {
		window.location = this.getAttribute("href");
		return false
	}
}

Dipnot: 2009 yılında Apple Developer seminerinde bunları öğrenmiştim ama hiç uygulamadığım için hatırlayamadım. Artık unutmam.

Kaynak: https://developer.apple.com/…/ConfiguringWebApplications.html

Otomatik Mühendis