Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Cihazla Etkileşen Tarayıcı API'leri: Async Clipboard, Web Share, Screen Wake Lock, Fullscreen, Permissions ve Geolocation
Pano, paylaşım, tam ekran ve konum API'lerini bir tıklamanın içinden çağırır, izin durumunu Permissions API ile önceden okur ve her birine feature detection ile bir fallback koyarsın; wake lock dışındakiler user activation olmadan reddediliyor. Bookstore'da hepsini tek bir DeviceCapabilities service'inde topluyor, Chromium 158 ve WebKit 27.2'de aktivasyonun tükenmesini, ClipboardItem'a promise vermenin farkını ve konumu sunucuya göndermeden en yakın depoyu bulmayı gösteriyoruz.
2020'den 2026'ya Tarayıcı API'lerinde ve Angular Service Worker'da Değişenler: Baseline'ı Okumak
Baseline bir özelliğin bütün çekirdek tarayıcılarda olup olmadığını söyler; Angular 22'nin hedefi ise sabit bir tarihteki widely available tarayıcılar (Chrome 119, Firefox 119, Safari 17), bu yüzden Navigation API gibi newly available API'ler için feature detection hâlâ şart. Serinin kullandığı özelliklerin durumunu web-features'tan okuyan bir rapor, 2020-2026 dönüm noktaları, Angular Service Worker'daki API değişiklikleri ve eski bir Angular PWA'sı için denetleme listesi.
Sekmeler ve Sayfa Yaşam Döngüsü: BroadcastChannel, Web Locks, visibilitychange ve Navigation API
Birden çok sekmede çalışan bir uygulamada paylaşılan işi Web Locks ile tek sekmeye verir, sonucu ve çıkış gibi olayları BroadcastChannel ile diğer sekmelere yayarsın; kapanışta unload yerine pagehide ve visibilitychange kullanırsın. Bookstore'da outbox'ın iki sekmeden dört yerine iki POST göndermesini, lider sekmenin poll'u tek başına yapmasını, Chromium 158'de unload'ın artık çalışmamasını ve Navigation API ile Angular'ın deneysel desteğini gösteriyoruz.
Web Worker'ları Angular'da Kullanmak: ng generate web-worker, Comlink ve Main Thread'i Rahatlatmak
Ağır bir hesabı async bir method'a koymak onu main thread'den çıkarmaz; Angular'da işi ng generate web-worker ile üretilen bir worker'a taşıyıp Comlink ile bir service'e sarmak ya da scheduler.yield() ile parçalara bölmek gerekir. 5.000 kitaplık istemci tarafı aramada CPU 4 kat yavaşken en yavaş etkileşimin main thread'de 408 ms, yield ile 56 ms, worker'da 40 ms olduğunu ölçüyor; tsconfig tuzağını, iptali ve neyi worker'a taşımak gerektiğini gösteriyoruz.
Web Push Bildirimleri: VAPID, Angular SwPush ve ASP.NET Core'dan Bildirim Göndermek
Web Push'ta tarayıcı, backend'in VAPID public key'ine bağlı bir subscription verir; backend sipariş kargoya verilince o endpoint'e VAPID ile imzalı, aes128gcm ile şifreli bir mesaj gönderir ve Angular Service Worker bildirimi gösterir. Angular SwPush, ASP.NET Core 10 ve Lib.Net.Http.WebPush ile akışı yerel bir test push service'i üzerinden uçtan uca çalıştırıyor; izin UX'ini, SSRF'e karşı endpoint kontrolünü, 404/410 temizliğini ve anahtar değişince ne olduğunu gösteriyoruz.
PWA'yı Kurulabilir Yapmak: Web App Manifest, Install Akışı, navigator.install ve App Badging
Bir PWA'yı kurulabilir yapan şey manifest'tir: id'yi bir kez yazıp sabitle, any ve maskable icon'ları ayır, install teklifini Chromium'da beforeinstallprompt ile kullanıcı bir değer gördükten sonra göster ve Safari'de Ana Ekrana Ekle talimatı ver. Chromium 158 ve WebKit'te kimlik hesabını, kurulabilirlik kontrolünü, navigator.install()'un hatalarını ve okunmamış siparişleri gösteren App Badging'i gerçek çıktılarla gösteriyoruz.
Angular Service Worker ile Offline Çalışan Uygulama: ngsw-config, dataGroups, SwUpdate ve Güvenli Deploy
Angular Service Worker uygulama dosyalarını assetGroups ile, API cevaplarını dataGroups ile cache'ler ve sürümü build'in ürettiği hash'li ngsw.json'dan anlar; yeni sürümü SwUpdate.versionUpdates ile haber verip kullanıcıya tam yenileme yaptırırsın. Production build'de offline senaryoyu, VERSION_READY'yi, eski dosya silinince gelen unrecoverable durumunu, deploy cache header'larını ve safety-worker.js ile worker'ı geri çekmeyi Chromium ve WebKit'te gösteriyoruz.
Service Worker Yaşam Döngüsü ve Cache Stratejileri: install, activate, waiting, skipWaiting ve Stale-While-Revalidate
Yeni bir service worker, eski sürümün bütün sekmeleri kapanana ya da skipWaiting çağrılana kadar waiting'de bekler; tek sekmeyi yenilemek yetmez. Framework'süz bir worker ile yaşam döngüsünü Chromium ve WebKit'te adım adım gösteriyor, skipWaiting'in eski sayfa ile yeni chunk'ı karıştırmasını, updateViaCache'i, cache-first/network-first/stale-while-revalidate stratejilerini, HTTP cache tuzağını ve worker'ı geri çeken kill switch'i inceliyoruz.
IndexedDB'yi Angular'da Kullanmak: Schema Versiyonlama, Transaction'lar ve Offline Outbox
IndexedDB'de schema yalnız sürüm artırınca onupgradeneeded içinde değişir ve transaction, IndexedDB dışı bir await'te kendiliğinden commit edilir; bu yüzden ağ işi önce, yazmalar sonra yapılır. Sürüm başına migration'ları, TransactionInactiveError'u, başka sekmenin upgrade'i bloklamasını Chromium ve WebKit'te gösteriyor, Angular'da idb ile okuma listesini ve offline yorumları idempotency key ile çift kayıtsız gönderen bir outbox'ı kuruyoruz.
Tarayıcıda Hangi Storage? localStorage, IndexedDB, Cache API, OPFS, cookieStore ve Kota Yönetimi
Küçük bir tercihi localStorage'a, sorgulanacak kayıtları IndexedDB'ye, HTTP response'larını Cache API'ye, dosyaları OPFS'e, sunucunun da okuyacağı değeri cookieStore'a yazarsın; hepsi origin kotasını paylaşır ve persist() yoksa silinebilir. Chromium 158 ve WebKit 27.2'de localStorage'ın 5 MiB sınırını, Cache API'nin max-age'i yok saymasını, OPFS'in ephemeral oturumda düşmesini, estimate()/persist() sonuçlarını ve Safari'nin 7 günlük silme kuralını gösteriyoruz.
Fetch Derinlemesine: Streaming Response, AbortSignal.any, keepalive, fetchLater ve Angular 22'nin Fetch Backend'i
Büyük bir response'u beklemeden işlemek için response.body'yi TextDecoderStream ile satır satır okursun; timeout ile kullanıcı iptalini AbortSignal.any birleştirir, sayfa kapanırken veri için keepalive ve fetchLater var. Chromium 158 ve WebKit 27.2'de gerçek çıktılarla upload streaming'in HTTP/2 şartını, keepalive'ın 64 KiB sınırını, WebKit farklarını ve Angular 22 HttpClient'ında upload progress için route bazında withXhr() kullanmayı gösteriyoruz.