Mobil Uyumlu Web Uygulaması Nasıl Kurulur

Mobil uyumlu bir web uygulaması, bir telefonda uygulama gibi çalışan bir web sitesidir: dar ekrana uyar, büyük dokunma alanlarına sahiptir, mobil veride hızlı yüklenir ve bir progressive web app (PWA) olarak ana ekrana eklenebilir. Çoğu yeni uygulama için bu pratik ilk sürümdür: tek bir kod tabanı, tek bir bağlantı, mağaza incelemesi yok. Yine de gerçek sınırları vardır; özellikle iPhone'daki bildirimler ve derin cihaz erişimi konusunda. Bu rehber, yerel bir uygulamaya ne zaman ihtiyaç duyduğunuzu açıkça söyler.

Telefonda "mobil olmanın" üç yolu

PWA, birkaç ek özelliği olan duyarlı bir web uygulamasıdır; bu yüzden ilk ikisi arasında seçim yapmak zorunda değilsiniz. Önce duyarlı olanı kurun, sonra yüklenebilir hale getirin. Daha ayrıntılı bir karşılaştırma için yerel ve progressive web uygulamaları rehberine bakın.

Web uygulamaları telefonda neler yapabilir, neler yapamaz

Tarayıcılar, birçok kişinin sandığından fazlasını yapabilir:

• Kamera ve fotoğraf yükleme, standart dosya girişleri üzerinden.
• Konum, kullanıcının izniyle.
• Ana ekrana yükleme, bir simge ve tam ekran açılışla.
• Çevrimdışı kullanım, bir service worker (tarayıcının sitenizin yanında çalıştırdığı bir arka plan betiği) ile sayfa ve veri önbelleğe alarak.
• Anlık bildirimler — iPhone'da bir yakalamayla. Apple'ın WebKit ekibi, web push özelliğinin iOS ve iPadOS 16.4 ile ana ekrana eklenmiş web uygulamaları için geldiğini belirtiyor. Kullanıcılar önce uygulamayı yüklemeli, sonra bildirimlere izin vermelidir.

Yerel uygulamanın hâlâ öne çıktığı alanlar:

• Derin cihaz özellikleri, örneğin arka plan konumu, Bluetooth aksesuarları, sağlık verileri ve ana ekran widget'ları. Tarayıcıdaki destek sınırlıdır ya da platforma göre değişir.
• Uygulama mağazasında keşif. İnsanlar sizi mağazada arayacaksa, orada olmanız gerekir.
• Yoğun çevrimdışı çalışma, örneğin arka planda eşitlenen büyük veri kümeleri.
• Performans açısından kritik grafikler, örneğin yoğun oyunlar.

Bunların hiçbiri uygulamanızın merkezinde değilse, bir web uygulaması büyük olasılıkla size yeterli olacaktır.

Önce telefon için tasarlamak

Telefon yerleşimini önce tasarlayın ve büyük ekranlar için genişletin; tersi genellikle sıkışık telefon ekranlarına yol açar.

Yerleşim

• Küçük ekranlarda tek sütun. Kenar çubukları alt bir çubuğa ya da menüye dönüşür.
• Yatay kaydırma yok. Geniş tablolar kartlara dönüşür ya da kendi kapsayıcılarında kayar.
• Yakınlaştırmadan okunabilir metin — gövde metni yaklaşık 16 piksel.

Dokunma

• Büyük dokunma alanları. Yaklaşık 44 x 44 piksel yaygın bir minimumdur. Aralarında boşluk bırakın.
• Ana eylemler başparmak erişiminde, uzun telefonlarda ekranın alt kısmına yakın.
• Yalnızca üzerine gelindiğinde çalışan özellik yok. Üzerine gelince beliren ipuçları ve menüler dokunmatik ekranlarda yoktur.
• Doğru klavye. E-posta alanları e-posta klavyesini, telefon alanları sayı tuştakımını açmalıdır. Doğru giriş türlerini isteyin.

Hız

• Makul boyutlarda küçük görseller, ekrana girdikçe yüklenen.
• Daha az ağır kütüphane. Her biri mobil veride indirme süresi ekler.
• İskelet ekranlar ya da net yükleme durumları; uygulama asla donmuş görünmesin.

Güvenli alanlar ve adres çubuğu

Modern telefonlarda içerik, özellikle tam ekran yüklenmiş bir uygulamada, çentiğin ya da ana gösterge çubuğunun altına gidebilir. Güvenli alan dolgusu isteyin. Ayrıca tarayıcının adres çubuğu göründüğünde ve kaybolduğunda zıplayan tam yükseklikli yerleşimlere dikkat edin.

Yüklenebilir hale getirmek (PWA)

Bir web uygulamasının yüklenebilir olması için şunlar gerekir:

1. Bir web uygulaması manifesti — uygulamanın adını, kısa adını, simgelerini, tema rengini ve nasıl açılacağını (genellikle tam ekran "standalone") içeren küçük bir dosya.
2. Simgeler, platformların beklediği boyutlarda; Apple cihazlar için uygun bir tanesi dahil.
3. HTTPS, düzgün barındırılan her uygulamada zaten bulunur.
4. Çevrimdışı destek ya da anlık bildirim istiyorsanız bir service worker.

Sonra kullanıcılara nasıl yükleyeceklerini anlatın. Android tarayıcıları genellikle bir yükleme istemi ya da menü öğesi sunar; iPhone'da Paylaş düğmesine, ardından "Ana Ekrana Ekle" seçeneğine dokunulur. Bu adımlarla birlikte kısa bir "Bu uygulamayı yükleyin" notu büyük fark yaratır.

Çevrimdışı destek, PWA'ların karmaşıklaştığı yerdir. Uygulamanın sayfalarını bağlantı olmadan açılacak şekilde önbelleğe almak basittir. Kullanıcıların çevrimdışıyken veri değiştirmesine ve bunu sonra eşitlemesine izin vermek ise gerçek bir iştir; yalnızca kullanıcılarınızın gerçekten ihtiyacı varsa isteyin.

İşe yarayan ilk istem

Temizlik ekibimiz için bugünkü işleri görüp tamamlandı olarak işaretleyebilecekleri bir web uygulaması yap. Önce telefon için tasarla: tek sütun, büyük dokunma alanları, ana eylem düğmesi alt kısımda sabit, yalnızca üzerine gelinerek kullanılan kontrol yok, yatay kaydırma yok, telefon ve e-posta alanları için doğru klavyeler. Her iş adresi gösterir (haritalarda açmak için dokunun), müşterinin telefonu (aramak için dokunun), bir kontrol listesi ve bir fotoğraf çekebilen "Tamamlandı olarak işaretle" düğmesi. Yöneticiler işleri atamak için dizüstü bilgisayardan giriş yapar; geniş ekranda kartlar yerine bir tablo gösterilsin. Manifest, simgeler ve standalone görüntüleme ile yüklenebilir bir PWA yap; uygulama kabuğunu önbelleğe al ki sinyal olmadan da açılsın. Verileri bir veritabanında tut.

Yapım adımları

1. Önce telefon yerleşimini kurun, örnek verilerle, ve telefon boyutundaki bir önizlemede kontrol edin.
2. Gerçek telefonlarda test edin — kullanıcılarınızın hem iPhone hem Android kullanıyorsa en az birer tane. Emülatörler, ekran klavyesinin girişleri kapatması gibi şeyleri kaçırır.
3. Ana görevi tek başparmakla yapın. İki el ya da yakınlaştırma gerektiren bir şey varsa düzeltin.
4. Manifesti ve simgeleri ekleyin, sonra her iki platformda yükleyip simgeyi, adı ve açılış ekranını kontrol edin.
5. Çevrimdışı konusunda karar verin. "Bağlantı olmadan açılır ve net bir mesaj gösterir" ile başlayın; çevrimdışı düzenleme yalnızca gerekirse ekleyin.
6. Yavaş bağlantıda hızı kontrol edin. Tarayıcınızın geliştirici araçları yavaş bağlantıyı simüle edebilir.
7. Bildirimleri en sona bırakın, eğer hiç eklenecekse — ve yüklemeyen kullanıcılar için bir e-posta yedeği planlayın.

Sık yapılan hatalar

• Yalnızca büyük bir monitörde tasarlamak. Her ekranı ilerledikçe telefon genişliğinde kontrol edin.
• Taşan tablolar. Küçük ekranlarda satırları kartlara çevirin.
• Küçük dokunma alanları ve birbirine yakın bağlantılar.
• Klavyeyle çatışan formlar — yanlış giriş türleri, klavyenin arkasında kalan alanlar, "ileri" akışının olmaması.
• iPhone push'unun tarayıcı sekmesinde çalışacağını varsaymak. Ana Ekrana yüklenmiş bir uygulama gerekir.
• Yapamayacağınız bir App Store uygulamasını vaat etmek. Mağaza önemliyse onu ayrıca planlayın.
• Bir web sitesini sarıp uygulama diye sunmak. Apple'ın App Review Guidelines'ı, yeniden paketlenmiş bir web sitesinin ötesine geçen uygulamalar ister; ince bir sarmalayıcı reddedilme riski taşır.

Yerel bir uygulamaya ne zaman ihtiyacınız var

Şu durumlarda yerel bir uygulama yapın (ya da web uygulamasından sonra yerel bir sürüm planlayın):

• Müşterilerinizin sizi bulacağı yol mağaza varlığınızsa.
• Tarayıcıların güvenilir biçimde sunmadığı arka plan konumu, Bluetooth, sağlık verileri, widget'lar ya da başka cihaz özelliklerine dayanıyorsanız.
• Uygulamanız uzun süre tamamen çevrimdışı çalışmak zorundaysa.
• Kullanıcılarınız bunu bekliyorsa — bazı kitleler mağazada olmayan hiçbir şeyi kullanmaz.

Mağaza yayını kendi maliyetleri ve adımlarıyla gelir. Eylül 2026 itibarıyla, kendi sitelerine göre Apple'ın geliştirici programı yılda 99 ABD doları, bir Google Play geliştirici hesabı ise tek seferlik 25 ABD doları tutuyor; her sürüm incelemeden geçer. Birçok ekip, ürüne talep olup olmadığını anlamak için önce mobil uyumlu bir web uygulamasıyla başlar, sonra yerel bir sürüme yatırım yapar. Yapay zekâ ile uygulama nasıl kurulur rehberi bu ilk aşamayı baştan sona anlatır.

Mythex ile kurmak

Mythex web uygulamaları kurar: uygulamayı sohbette anlatırsınız ve masaüstünde canlı önizlemede, yeniden boyutlandırabileceğiniz telefon boyutunda bir çerçevede kontrol edersiniz. Dokümanlarda küçük ekran yerleşimlerini düzeltmek için bir mobil duyarlı istem bulunur. Diğer her özellik gibi bir PWA manifesti ve simgeler de isteyebilirsiniz; ardından her telefonda çalışan herkese açık bir bağlantıyla yayınlarsınız. Pro planında Mythex, uygulamayı Android ve iPhone uygulaması olarak da sarabilir ve Google Play dahili test ile TestFlight'a gönderebilir. Başlamak için yapay zekâ web uygulaması oluşturucuya bakın ya da uygulama şablonlarına göz atın. Çalışan bir örnek için alışkanlık takip uygulaması nasıl kurulur rehberini okuyun.

Sorular