Web Uygulaması Bildirimi
Tarayıcıların Ana Ekrana Ekle istemi sunabilmesi için name, icons, start_url, display ve theme_color içeren bir manifest.json yazmayı öğrenin.
Web Uygulaması Bildirimi, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
PWA Nedir?
Aşamalı Web Uygulaması, yerel uygulama yeteneklerine sahip bir web sitesidir: ana ekrana kurulabilir, çevrimdışı çalışabilir ve anlık bildirimler alabilir. Üç temel parçası şunlardır: Web Uygulaması Manifestosu, Hizmet çalışanı ve HTTPS.
Manifest Dosyası
manifest.json (veya .webmanifest), uygulamanızın meta verilerini açıklayan bir JSON dosyasıdır. Tarayıcılar bu dosyayı okuyarak 'Ana Ekrana Ekle' özelliğini etkinleştirir ve uygulamanızı yerel bir uygulama gibi başlatır.
Temel Manifest
En basit manifest; name, icons, start_url ve display alanlarını içerir.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Manifest'i Bağlama
Manifest'i HTML <head> bölümünden bağlayın.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">display Modları
"display", uygulamanın pencere çerçevesini denetler: "standalone" (tarayıcı arayüzü yok, uygulama benzeri), "fullscreen" (sürükleyici görünüm, durum çubuğunu gizler), "minimal-ui" (bazı tarayıcı denetimleri), "browser" (normal sekme).
Simgeler — Birden Çok Boyut
Simgeleri birden çok boyutta sağlayın. Modern Android 192 ve 512 boyutlarını ister; Apple ek boyutlara ihtiyaç duyar. Uyarlanabilir Android simgeleri için "purpose": "maskable" kullanın.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple'a Özel Etiketler
iOS, manifest'i tamamen desteklemez. iOS'ta Ana Ekrana Ekle özelliği için Apple'a özel meta etiketler ekleyin.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Kurulum İstemi
Kriterler karşılandığında (manifest + hizmet çalışanı + HTTPS + kullanıcı etkileşimi) tarayıcılar bir beforeinstallprompt olayı tetikler. Bu olayı erteleyip kendi arayüzünüzden tetikleyebilirsiniz.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Kısayollar (Uygulama Kısayolları)
Manifest, kurulu uygulama simgesine uzun basıldığında görünen kısayolları tanımlayabilir.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Kategoriler ve Ekran Görüntüleri
Chrome Android ve Windows'ta daha zengin bir kurulum arayüzü için categories ve screenshots ekleyin.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Manifest'i Sınama
DevTools → Application → Manifest bölümünü açın. Chrome; ayrıştırılmış manifest alanlarını, simge önizlemelerini ve uyarıları (eksik simgeler, düşük karşıtlık vb.) gösterir.
Çerçeveler Bu İşi Kolaylaştırır
Next.js: manifest.webmanifest dosyasını public/ klasörüne bırakın. Nuxt: @vite-pwa/nuxt modülünü yükleyin. Vite: vite-plugin-pwa, manifest'i ve hizmet çalışanını otomatik olarak oluşturur.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Hızlı Kontrol
Web Uygulaması Manifestosu'ndaki hangi display değeri, kurulu PWA'nın yerel bir uygulama gibi tarayıcı arayüzü olmadan açılmasını sağlar?
Özet: Web Uygulaması Manifestosu
PWA meta verilerini açıklayan JSON dosyasıdır. name, short_name, start_url, display, theme_color ve icons alanlarını (birden çok boyut + maskable) ekleyin. HTML içinde rel=manifest ile bağlayın. iOS için Apple'a özel meta etiketler gerekir. Özel kurulum arayüzü için beforeinstallprompt olayı kullanılır. Daha zengin kurulum için shortcuts ve screenshots eklenebilir. Çerçeveler (Vite PWA, Next, Nuxt PWA) oluşturma işlemini otomatikleştirir.
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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Web Uygulaması Bildirimi” dersinde ne öğreneceğim?
Tarayıcıların Ana Ekrana Ekle istemi sunabilmesi için name, icons, start_url, display ve theme_color içeren bir manifest.json yazmayı öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Web Uygulaması Bildirimi
- Service Worker Kaydı ve Yaşam Döngüsü
- Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst
- Anlık Bildirimler