HTML Academy · Ders

Web Uygulaması Bildirimi

manifest.json dosyasıyla PWA meta verilerini tanımlayın

Web Uygulaması Bildirimi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Manifest Ne İşe Yarar

Web uygulaması manifesti, tarayıcıya sayfanın uygulama olarak nasıl yükleneceğini bildiren bir JSON dosyasıdır: hangi adın kullanılacağı, hangi simgenin gösterileceği, hangi URL'nin açılacağı, hangi renk düzeninin uygulanacağı ve hangi görüntüleme modunda oluşturulacağı (standalone, fullscreen, browser).

Manifesti Bağlama

Yüklenebilir olması gereken her sayfada manifesti belirtin: head bölümünde <link rel="manifest" href="/manifest.webmanifest"> kullanın. Tarayıcı manifesti bir kez getirip önbelleğe alır; manifestteki güncellemeler sonraki yüklemelerde alınır.

<link rel="manifest" href="/manifest.webmanifest">

Gerekli Minimum Alanlar

Tarayıcının "Uygulamayı yükle" seçeneğini sunabilmesi için manifestte en az şunlar bulunmalıdır: name (tam ad), short_name (ana ekran etiketi, yaklaşık 12 karakter), start_url, display (genellikle "standalone") ve en az bir 192x192 ile bir 512x512 PNG içeren bir icons dizisi.

{
  "name": "Coddy Learn",
  "short_name": "Coddy",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f2937",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

start_url

Yüklü uygulamanın simgesine dokunulduğunda açılan URL'dir. Ana sayfa için genellikle / kullanılır; analiz amacıyla sorgu parametreleri içerebilir: "start_url": "/?source=pwa", yüklü oturumları tarayıcı oturumlarından ayrı olarak etiketler.

display Modları

display değeri "browser" (normal sayfa çubuğu), "minimal-ui" (bazı çubuklar), "standalone" (çubuk yok; uygulama gibi görünür) veya "fullscreen" (durum çubuğu yok) olabilir. Standalone, yaygın PWA tercihidir.

Simgeler ve Maskelenebilir Simgeler

Android'in simgeyi ana ekrandaki diğer simgelerle uyumlu olacak şekilde maskeleyebilmesi için "maskable" amaçlı bir simge ekleyin: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Maskelenebilir simgeler, sistemin kırpma yapabilmesi için güvenli bir bölge içerir.

theme_color ve background_color

theme_color, uygulama tarayıcıda çalışırken adres çubuğunun tonunu belirler. background_color, sayfa yüklenmeden önce açılış ekranının arka planı olarak gösterilir. Özenli bir açılış deneyimi için tasarım sisteminizin ana renkleriyle uyumlu renkler kullanın.

orientation

"orientation": "portrait", yüklendiğinde uygulamayı dikey yönle sınırlar. "any", "landscape" ve "portrait-primary" alternatiflerdir. Genel amaçlı PWA'ların çoğu bu alanı boş bırakır ve yönü cihazın belirlemesine izin verir.

Yükleme Uygunluğu

Tarayıcının "Yükle" seçeneğini göstermesi için sayfanın HTTPS üzerinden sunulması, getirme olaylarını işleyen bir hizmet çalışanının kaydedilmesi, minimum alanları içeren geçerli bir manifestin bağlanması ve etkileşim ölçütlerinin karşılanması gerekir (kullanıcının sayfayla etkileşime girmiş olması).

Manifesti Güncelleme

Tarayıcılar manifesti önbelleğe alır. Düzenlemelerden sonra yenilemeyi zorlamak için simge URL'lerini değiştirin (önbellek kırıcı bir sorgu parametresi işe yarar) veya bekleyin; çoğu tarayıcı düzenli aralıklarla yeniden kontrol eder. Zorunlu güncelleme API'si yoktur; kullanıcıların bir süre biraz eski bir manifest çalıştırabileceğini varsayarak tasarım yapın.

Manifesti Sınama

Chrome DevTools'taki Application sekmesi ayrıştırılmış manifesti, hesaplanan değerleri ve doğrulama hatalarını gösterir. Lighthouse PWA denetimi, her yükleme gereksinimini kontrol eder ve eksik olanları bildirir. Yükleme uygunluğunu doğrulamak için geliştirme sırasında ikisini de kullanın.

Bilgi Kontrolü

Web uygulaması manifestindeki display: "standalone" değeri ne yapar?

Özet

Web uygulaması manifesti (manifest.webmanifest), tarayıcıya sayfanın uygulama olarak nasıl yükleneceğini bildirir: name, short_name, start_url, display, theme_color ve simgeler (192 ve 512; Android için ayrıca maskelenebilir simge). Manifesti <link rel="manifest"> aracılığıyla bağlayın, yüklenebilirlik için HTTPS ve hizmet çalışanı sağlayın, Chrome DevTools ile Lighthouse PWA denetiminde sınayın.

Sıkça Sorulan Sorular

“Web Uygulaması Bildirimi” dersi ücretsiz mi?

Evet — “Web Uygulaması Bildirimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Web Uygulaması Bildirimi” dersinde ne öğreneceğim?

manifest.json dosyasıyla PWA meta verilerini tanımlayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Web Uygulaması Bildirimi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön