Web Uygulamalarınızı iPhone/iPad’de Standalone Mod’da Çalıştırmak

Web uygulamaları son zamanlarda, masaüstü uygulamalardan daha popüler hale geldi. Bununla beraber çoğu web uygulaması mobil versiyonlarını da kullanıma sunuyor. Gmail, Facebook, Twitter, Basecamp, Asana ilk olarak aklıma gelen mobil versiyona sahip web uygulamaları. Buradaki  tüm örneklerde ise m.kupongezgini.com web uygulaması kullanılacak.

Peki bu web uygulamalarını ipad ve iphone’da bir uygulama gibi çalıştırılabilir mi? Sorunun cevabı evet. Tabiki bundan kastımız uygulamayı “native” bir uygulama olarak kullanmak gibi birşey değil. Daha çok web uygulamasına bir kısayol niteliği taşıyacak ama daha kullanışlı bir yapı.

İlk olarak web sayfamıza eklememiz gereken bazı meta tag‘ler var.

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

Daha sonra uygulamamızın ikonunu belirtmemiz gerekiyor. Bunun için öncelikle 114×114, 72×72 ve 57×57 boyutlarında PNG formatında 3 tane ikon oluşturmamız gerekiyor. Örnek ikon aşağıdaki gibi olacaktır. Uygulama ikonlarını belirtmek için <head> içerisine aşağıdaki tag’leri ekliyoruz.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icons/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icons/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="images/icons/apple-touch-icon-57.png">
<link rel="shortcut icon" href="images/icons/apple-touch-icon-57.png">

Web uygulamasını bu şekilde kullanmanın bir diğer avantajı da sayfa yükleniyorken “Splash Screen” adı verilen bir açılış ekranı oluşturabilme şansı. Böylece sayfa yüklenirken kullanıcılar bu ekranı görecek ve yüklenme işlemi sonunda sayfayı eksiksiz  olarak karşılarında bulacaklardır. Bunun için de yine hem ipad hem iphone açılış ekranı için ayrı ayrı görsel hazırlamamız gerekiyor. iphone uygulamamız için 320×460 boyutunda hazırladığımız görseli aşağıda görebilirsiniz. iPad için gerekli olan boyut ise 768×1004′tür. Buraya kadar hazırladığımız tüm görsellerin örneklerini HTML5Boilerplate‘de de bulabilirsiniz. Hazırlanan açılış ekranlarını web sayfamıza aşağıdaki tag’lerle ekliyoruz.

<link rel="apple-touch-startup-image" href="images/icons/splash-big.png" media="no mobile, screen and (device-width: 768px)">
<link rel="apple-touch-startup-image" href="images/icons/splash-small.png" media="mobile">

Birinci tag içerisinde gördüğünüz media özelliğinin kullanmazsanız, ipad’de açılış ekranı göremezsiniz.

Artık sayfamız hazır. Sıra geldi uygulamayı iphone/ipad’e yüklemeye. İlk olarak web sayfasını (m.kupongezgini.com) Safari’de açıyoruz ve aşağıda gösterilen menülerden “Add To Home Screen” tıklıyoruz. Daha sonra açılan ekranda uygulamamıza bir isim veriyor ve “Add” butonuna tıklayarak masaüstüne ekliyoruz.

Aşağıda da görüleceği üzere uygulamamız kullanıma hazır.

Uygulamayı kullanırken farkedeceksiniz ki her linke tıklandığı zaman uygulama ekranı değişiyor ve sayfa Safari içerisinde açılıyor. Malesef bunu engelleyecek bir meta tag vs. yok. Ama tabiki bir yöntem var. Bunun için tüm linklerin javascript ile yönlendirilmesi gerekiyor. Bu sorunu da aşağıdaki javascript kodunu sayfamıza ekleyerek tamamladıktan sonra artık web uygulamamız tamamen hazır.

if(("standalone" in window.navigator) && window.navigator.standalone){
    var noddy, remotes = false;
    document.addEventListener('click', function(event) {
        noddy = event.target;
        while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
            noddy = noddy.parentNode;
        }
        if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
        {
            event.preventDefault();
            document.location.href = noddy.href;
        }
    },false);
}

Comments

  1. bunun farklı bir boyutu var ana ekrana ekle uyarı çıkıyor ve uygulama gibi çalışıyor ama tarayıcı üzerinden. research yapıyorum ama bulamıyorum. bu konuyla ilgili bilgiye sahipsen paylaşabilirsin.teşekkürler

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>