Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in verileri taray\u0131c\u0131da saklama ve payla\u015fma yeteneklerine ihtiya\u00e7 duyar. Bu kapsaml\u0131 rehberle, web depolama ve ileti\u015fim API’lerinin derinliklerine inerek, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve \u00e7evrimd\u0131\u015f\u0131 yeteneklerini nas\u0131l art\u0131rabilece\u011finizi ke\u015ffedin.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n web uygulamalar\u0131ndan beklentileri her zamankinden daha y\u00fcksek. H\u0131zl\u0131 y\u00fckleme s\u00fcreleri, kesintisiz etkile\u015fimler ve hatta \u00e7evrimd\u0131\u015f\u0131 eri\u015fim, ba\u015far\u0131l\u0131 bir kullan\u0131c\u0131 deneyiminin temelini olu\u015fturuyor. T\u00fcm bu beklentileri kar\u015f\u0131laman\u0131n anahtarlar\u0131ndan biri de, verilerin etkin bir \u015fekilde taray\u0131c\u0131da saklanmas\u0131 ve gerekti\u011finde uygulamalar veya sekmeler aras\u0131nda payla\u015f\u0131lmas\u0131d\u0131r. Peki, bu neden bu kadar kritik bir hale geldi?<\/p>\n
\u00d6ncelikle, performans. Her sunucu iste\u011fi zaman ve bant geni\u015fli\u011fi maliyetine sahiptir. Taray\u0131c\u0131da saklanan veriler, sunucuya tekrar tekrar gitme ihtiyac\u0131n\u0131 ortadan kald\u0131rarak uygulaman\u0131n \u00e7ok daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu durum, \u00f6zellikle mobil cihazlarda veya internet ba\u011flant\u0131s\u0131n\u0131n zay\u0131f oldu\u011fu durumlarda kullan\u0131c\u0131lar\u0131n sabr\u0131n\u0131 test etmez. \u00d6rne\u011fin, s\u0131k\u00e7a g\u00f6r\u00fcnt\u00fclenen \u00fcr\u00fcn listeleri, kullan\u0131c\u0131 tercihleri veya form verileri gibi statik veya yar\u0131 statik bilgileri yerel olarak depolamak, uygulaman\u0131z\u0131n tepki s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/p>\n
\u0130kinci olarak, \u00e7evrimd\u0131\u015f\u0131 yetenekler. Modern web uygulamalar\u0131, Progressive Web App (PWA) konseptiyle birlikte, internet ba\u011flant\u0131s\u0131 olmasa bile \u00e7al\u0131\u015fabilme kabiliyetini kazanm\u0131\u015ft\u0131r. Bu, \u00f6zellikle saha \u00e7al\u0131\u015fanlar\u0131, seyahat edenler veya anl\u0131k ba\u011flant\u0131 kesintileri ya\u015fayan kullan\u0131c\u0131lar i\u00e7in paha bi\u00e7ilmez bir \u00f6zelliktir. Taray\u0131c\u0131 depolama mekanizmalar\u0131, uygulaman\u0131n \u00e7evrimd\u0131\u015f\u0131 modda bile temel i\u015flevselli\u011fini s\u00fcrd\u00fcrmesini, hatta yeni veriler olu\u015fturup ba\u011flant\u0131 geldi\u011finde senkronize etmesini m\u00fcmk\u00fcn k\u0131lar. Bu, sadece bir \u00f6zellik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 ba\u011fl\u0131l\u0131\u011f\u0131n\u0131 art\u0131ran g\u00fc\u00e7l\u00fc bir rekabet avantaj\u0131d\u0131r. Tarihsel olarak, \u00e7erezler (cookies) k\u00fc\u00e7\u00fck miktarda veri saklamak i\u00e7in kullan\u0131l\u0131rd\u0131 ancak g\u00fcvenlik s\u0131n\u0131rlamalar\u0131, boyut k\u0131s\u0131tlamalar\u0131 ve sunucuya her istekte g\u00f6nderilmesi gibi dezavantajlar\u0131, modern depolama \u00e7\u00f6z\u00fcmlerini ka\u00e7\u0131n\u0131lmaz hale getirmi\u015ftir.<\/p>\n
Son olarak, ki\u015fiselle\u015ftirme ve kullan\u0131c\u0131 deneyimi. Her kullan\u0131c\u0131n\u0131n kendine \u00f6zg\u00fc tercihleri, ayarlar\u0131 veya ge\u00e7mi\u015f etkile\u015fimleri olabilir. Bu verileri taray\u0131c\u0131da saklamak, uygulaman\u0131n her ziyaret\u00e7iye \u00f6zel bir deneyim sunmas\u0131na olanak tan\u0131r. Tema se\u00e7imleri, dil tercihleri, en son g\u00f6r\u00fcnt\u00fclenen \u00f6\u011feler veya al\u0131\u015fveri\u015f sepeti i\u00e7eri\u011fi gibi bilgiler, yerel depolama sayesinde kal\u0131c\u0131 hale gelir. B\u00f6ylece kullan\u0131c\u0131, uygulamaya her d\u00f6nd\u00fc\u011f\u00fcnde kald\u0131\u011f\u0131 yerden devam edebilir veya ki\u015fiselle\u015ftirilmi\u015f bir aray\u00fczle kar\u015f\u0131la\u015f\u0131r. Bu seviyedeki bir deneyim, kullan\u0131c\u0131n\u0131n uygulamaya olan ba\u011fl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve tekrar ziyaret olas\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltir. K\u0131sacas\u0131, modern taray\u0131c\u0131 depolama yetenekleri, web uygulamalar\u0131n\u0131 basit sayfalardan zengin, etkile\u015fimli ve \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilen g\u00fc\u00e7l\u00fc platformlara d\u00f6n\u00fc\u015ft\u00fcren temel bir altyap\u0131d\u0131r. Bu yetenekleri anlamak ve do\u011fru bir \u015fekilde kullanmak, her web geli\u015ftiricisi i\u00e7in vazge\u00e7ilmez bir beceridir.<\/p>\n
Web uygulamalar\u0131n\u0131n verileri depolama ihtiyac\u0131, farkl\u0131 senaryolar i\u00e7in \u00e7e\u015fitli \u00e7\u00f6z\u00fcmlerin ortaya \u00e7\u0131kmas\u0131na yol a\u00e7m\u0131\u015ft\u0131r. Her depolama y\u00f6nteminin kendine \u00f6zg\u00fc avantajlar\u0131, dezavantajlar\u0131 ve kullan\u0131m alanlar\u0131 bulunur. Bu b\u00f6l\u00fcmde, en yayg\u0131n ve g\u00fc\u00e7l\u00fc taray\u0131c\u0131 tabanl\u0131 depolama se\u00e7eneklerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Web Storage API, taray\u0131c\u0131da k\u00fc\u00e7\u00fck miktarda anahtar\/de\u011fer \u00e7iftleri depolamak i\u00e7in basit ve kullan\u0131m\u0131 kolay bir aray\u00fcz sunar. \u0130ki ana bile\u015feni vard\u0131r: localStorage<\/strong>, verileri kal\u0131c\u0131 olarak saklar. Yani taray\u0131c\u0131 kapat\u0131lsa veya bilgisayar yeniden ba\u015flat\u0131lsa bile veriler kaybolmaz. Bu \u00f6zellik, kullan\u0131c\u0131 tercihlerini (tema, dil ayarlar\u0131), oturum a\u00e7ma token’lar\u0131n\u0131 (g\u00fcvenli bir \u015fekilde y\u00f6netildi\u011finde), al\u0131\u015fveri\u015f sepeti durumunu veya kullan\u0131c\u0131lar\u0131n s\u0131k ziyaret etti\u011fi sayfalara ait verileri saklamak i\u00e7in idealdir. Veriler, ayn\u0131 kaynak (domain, port, protokol) i\u00e7inde t\u00fcm sekmeler ve pencereler aras\u0131nda payla\u015f\u0131l\u0131r. Ancak, sessionStorage<\/strong> ise, verileri yaln\u0131zca mevcut taray\u0131c\u0131 oturumu s\u00fcresince saklar. Kullan\u0131c\u0131 taray\u0131c\u0131 sekmesini veya penceresini kapatt\u0131\u011f\u0131nda, bu depolamadaki t\u00fcm veriler silinir. Bu, ge\u00e7ici veriler, bir formun doldurma a\u015famas\u0131ndaki bilgiler veya \u00e7ok ad\u0131ml\u0131 bir i\u015flemdeki ara veriler gibi durumlar i\u00e7in uygundur. Her taray\u0131c\u0131 sekmesi veya penceresi kendi Her iki depolama t\u00fcr\u00fc de anahtar ve de\u011fer olarak sadece string veri tiplerini kabul eder. E\u011fer JavaScript nesnelerini depolamak isterseniz, bunlar\u0131 <\/code><\/p>\n Vaka Analizi: Bir e-ticaret sitesinde, kullan\u0131c\u0131lar\u0131n se\u00e7ti\u011fi dili ve para birimini Web Storage API, basit anahtar\/de\u011fer depolamas\u0131 i\u00e7in harika olsa da, daha b\u00fcy\u00fck, yap\u0131sal ve sorgulanabilir verilere ihtiya\u00e7 duydu\u011funuzda yetersiz kal\u0131r. \u0130\u015fte bu noktada IndexedDB devreye girer. IndexedDB, taray\u0131c\u0131da istemci taraf\u0131nda \u00e7al\u0131\u015fan, NoSQL tarz\u0131 bir veritaban\u0131 sistemidir. \u0130li\u015fkisel veritabanlar\u0131na benzeyen, ancak nesne deposu (object store) ad\u0131 verilen koleksiyonlar halinde veri saklayan g\u00fc\u00e7l\u00fc bir API'dir.<\/p>\n IndexedDB, \u00e7evrimd\u0131\u015f\u0131 uygulamalar (PWA'lar), kullan\u0131c\u0131 taraf\u0131ndan olu\u015fturulan b\u00fcy\u00fck veri setleri (\u00f6rn: notlar, foto\u011fraflar, makaleler), \u00f6nbelle\u011fe al\u0131nm\u0131\u015f medya dosyalar\u0131 veya \u00e7evrimd\u0131\u015f\u0131 i\u015flenecek karma\u015f\u0131k form verileri gibi senaryolar i\u00e7in m\u00fckemmeldir. Boyut s\u0131n\u0131r\u0131 taray\u0131c\u0131ya ve cihaza g\u00f6re de\u011fi\u015fmekle birlikte genellikle y\u00fczlerce megabayt, hatta gigabayt seviyelerine kadar \u00e7\u0131kabilir. En \u00f6nemlisi, IndexedDB i\u015flemleri asenkrondur; bu da ana taray\u0131c\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmedi\u011fi ve uygulaman\u0131z\u0131n tepki vermeye devam etti\u011fi anlam\u0131na gelir. Bu asenkron yap\u0131, \u00f6zellikle b\u00fcy\u00fck veri i\u015flemleri yaparken kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n IndexedDB kullan\u0131rken birka\u00e7 temel ad\u0131mdan ge\u00e7ilir:<\/p>\n IndexedDB'nin karma\u015f\u0131k bir API'si oldu\u011fu do\u011frudur, ancak bu karma\u015f\u0131kl\u0131k sundu\u011fu esneklik ve g\u00fc\u00e7le dengelenir. \u0130\u015fte basit bir IndexedDB veri ekleme \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n Vaka Analizi: \u00c7evrimd\u0131\u015f\u0131 bir not alma uygulamas\u0131 geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 internet ba\u011flant\u0131s\u0131 olmasa bile yeni notlar olu\u015fturabilmeli, mevcut notlar\u0131 d\u00fczenleyebilmeli ve silebilir. T\u00fcm bu not verileri (ba\u015fl\u0131k, i\u00e7erik, etiketler, son d\u00fczenleme tarihi vb.), IndexedDB'de depolanabilir. Ba\u011flant\u0131 tekrar sa\u011fland\u0131\u011f\u0131nda, Service Worker yard\u0131m\u0131yla IndexedDB'deki yerel veriler sunucuyla senkronize edilerek uygulaman\u0131n her zaman g\u00fcncel kalmas\u0131 sa\u011flan\u0131r. Bu, kullan\u0131c\u0131lara kesintisiz ve g\u00fcvenilir bir deneyim sunar.<\/p>\n \u00c7evrimd\u0131\u015f\u0131 web uygulamalar\u0131n\u0131n (PWA'lar) kalbinde Service Workers ve Cache API yer al\u0131r. Cache API, Service Worker'lar arac\u0131l\u0131\u011f\u0131yla web kaynaklar\u0131n\u0131 (HTML, CSS, JavaScript dosyalar\u0131, resimler, API yan\u0131tlar\u0131 vb.) programl\u0131 bir \u015fekilde \u00f6nbelle\u011fe alman\u0131z\u0131 ve y\u00f6netmenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bu, uygulaman\u0131z\u0131n h\u0131zl\u0131 y\u00fcklenmesine ve internet ba\u011flant\u0131s\u0131 olmasa bile \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r.<\/p>\n Service Worker'lar<\/strong>, taray\u0131c\u0131 taraf\u0131ndan ana web sayfas\u0131ndan ayr\u0131 bir i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015fan, JavaScript dosyalar\u0131d\u0131r. A\u011f isteklerini (fetch event'i arac\u0131l\u0131\u011f\u0131yla) yakalayabilir, \u00f6nbelle\u011fe alma stratejilerini uygulayabilir ve hatta push bildirimleri gibi geli\u015fmi\u015f \u00f6zellikleri y\u00f6netebilirler. Cache API ise bu Service Worker'lar\u0131n \u00f6nbelle\u011fe alma yeteneklerini somutla\u015ft\u0131r\u0131r. Bir Service Worker, y\u00fcklenip kaydedildikten sonra, belirli kaynaklar\u0131 \u00f6nbelle\u011fe almak i\u00e7in Farkl\u0131 \u00f6nbellekleme stratejileri mevcuttur:<\/p>\n \u0130\u015fte basit bir Service Worker kayd\u0131 ve \u00f6nbelle\u011fe alma \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n <\/code><\/p>\n Vaka Analizi: Bir haber sitesi veya blog uygulamas\u0131 geli\u015ftirdi\u011finizi hayal edin. Service Worker ve Cache API kullanarak, uygulaman\u0131n statik varl\u0131klar\u0131n\u0131 (CSS, JS, logolar) ve hatta son ziyaret edilen haber i\u00e7eriklerini \u00f6nbelle\u011fe alabilirsiniz. B\u00f6ylece, kullan\u0131c\u0131 \u00e7evrimd\u0131\u015f\u0131 oldu\u011funda bile daha \u00f6nce okudu\u011fu makalelere eri\u015febilir veya uygulaman\u0131n temel aray\u00fcz\u00fcn\u00fc g\u00f6rebilir. Bu, \u00f6zellikle internet eri\u015fiminin k\u0131s\u0131tl\u0131 oldu\u011fu b\u00f6lgelerde veya seyahat esnas\u0131nda kullan\u0131c\u0131lar i\u00e7in kritik bir avantaj sa\u011flar. Yeni i\u00e7erik geldi\u011finde ise 'stale-while-revalidate' gibi stratejilerle \u00f6nbelle\u011fi g\u00fcncel tutarak en iyi kullan\u0131c\u0131 deneyimini sunabilirsiniz.<\/p>\n Modern web uygulamalar\u0131 genellikle birden fazla sekme, pencere veya hatta farkl\u0131 ba\u011flamlarda \u00e7al\u0131\u015fabilir. Bu durumlarda, uygulamalar aras\u0131nda veri senkronizasyonu veya ileti\u015fim kurma ihtiyac\u0131 do\u011far. Neyse ki, taray\u0131c\u0131lar bu t\u00fcr senaryolar i\u00e7in \u00e7e\u015fitli g\u00fc\u00e7l\u00fc API'ler sunar. \u0130\u015fte bu yetenekleri detayl\u0131 bir \u015fekilde inceleyelim.<\/p>\n Broadcast Channel API, ayn\u0131 kaynak (ayn\u0131 origin: protokol, host, port) alt\u0131ndaki farkl\u0131 taray\u0131c\u0131 pencereleri, sekmeleri, iframe'leri veya hatta web worker'lar\u0131 aras\u0131nda basit mesajla\u015fma sa\u011flamak i\u00e7in tasarlanm\u0131\u015f bir mekanizmad\u0131r. Bu API, tek y\u00f6nl\u00fc bir yay\u0131nlama (publish\/subscribe) modeli sunar; bir kanal olu\u015fturulur, mesajlar bu kanala g\u00f6nderilir ve ayn\u0131 kanal\u0131 dinleyen t\u00fcm di\u011fer ba\u011flamlar bu mesajlar\u0131 al\u0131r.<\/p>\n Broadcast Channel'\u0131n en yayg\u0131n kullan\u0131m senaryolar\u0131ndan biri, kullan\u0131c\u0131 oturum durumunu senkronize etmektir. \u00d6rne\u011fin, kullan\u0131c\u0131 bir sekmede oturum a\u00e7t\u0131\u011f\u0131nda veya kapatt\u0131\u011f\u0131nda, di\u011fer t\u00fcm a\u00e7\u0131k sekmelerin de bu durumu bilmesi ve buna g\u00f6re tepki vermesi gerekebilir. Ba\u015fka bir \u00f6rnek, bir \u00fcr\u00fcn\u00fcn sepete eklenmesi durumunda, t\u00fcm a\u00e7\u0131k sekmelerdeki sepet simgesinin g\u00fcncellenmesidir. Bu, kullan\u0131c\u0131 deneyiminin tutarl\u0131 kalmas\u0131n\u0131 sa\u011flar.<\/p>\n Kullan\u0131m\u0131 olduk\u00e7a basittir:<\/p>\n \u0130\u015fte bir \u00f6rnek:<\/p>\n <\/code><\/p>\n <\/code><\/p>\n Vaka Analizi: Bir finansal analiz panosu d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 ayn\u0131 anda farkl\u0131 hisse senedi grafiklerini farkl\u0131 sekmelerde a\u00e7m\u0131\u015f olabilir. Bir sekmede bir hisse senedini favorilere ekledi\u011finde, Broadcast Channel API kullanarak bu bilgiyi di\u011fer t\u00fcm a\u00e7\u0131k sekmelere yay\u0131nlayabilir ve b\u00f6ylece her sekmdeki favoriler listesinin otomatik olarak g\u00fcncellenmesini sa\u011flayabilirsiniz. Bu, tutarl\u0131 ve senkronize bir kullan\u0131c\u0131 deneyimi sunman\u0131n etkili bir yoludur.<\/p>\n Web Worker'lar, ana taray\u0131c\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden arka planda JavaScript kodunu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. Ancak standart Web Worker'lar, yaln\u0131zca onlar\u0131 olu\u015fturan betik ile ileti\u015fim kurabilir ve her sekme i\u00e7in ayr\u0131 bir \u00f6rnek ba\u015flat\u0131r. Shared Workers<\/strong> ise, ayn\u0131 kaynak (origin) alt\u0131ndaki birden fazla pencere, sekme veya iframe taraf\u0131ndan payla\u015f\u0131labilen tek bir i\u015f par\u00e7ac\u0131\u011f\u0131d\u0131r. Bu, birden fazla taray\u0131c\u0131 ba\u011flam\u0131n\u0131n ayn\u0131 arka plan s\u00fcrecini kullanarak ileti\u015fim kurmas\u0131n\u0131 ve ortak kaynaklar\u0131 veya verileri y\u00f6netmesini sa\u011flar.<\/p>\n Shared Workers'\u0131n temel avantaj\u0131, kaynak verimlili\u011fidir. \u00d6rne\u011fin, birden fazla sekmenin a\u011fdan ayn\u0131 veriyi \u00e7ekmesi gerekti\u011finde, her sekmenin ayr\u0131 ayr\u0131 istek yapmas\u0131 yerine, Shared Worker tek bir istek yapabilir ve yan\u0131t\u0131 t\u00fcm ba\u011fl\u0131 sekmelere da\u011f\u0131tabilir. Bu, a\u011f y\u00fck\u00fcn\u00fc azalt\u0131r ve uygulaman\u0131n genel performans\u0131n\u0131 art\u0131r\u0131r. Ger\u00e7ek zamanl\u0131 veri senkronizasyonu, web soket ba\u011flant\u0131s\u0131n\u0131n y\u00f6netimi veya karma\u015f\u0131k hesaplamalar\u0131n merkezi bir yerde yap\u0131lmas\u0131 gibi senaryolar i\u00e7in idealdir.<\/p>\n Shared Workers, portlar arac\u0131l\u0131\u011f\u0131yla ileti\u015fim kurar. Her bir ba\u011flam (sekme, pencere) Shared Worker'a bir port a\u00e7ar ve bu port \u00fczerinden mesajlar g\u00f6nderir\/al\u0131r. Worker i\u00e7indeki \u0130\u015fte basit bir Shared Worker kullan\u0131m\u0131:<\/p>\n <\/code><\/p>\n <\/code><\/p>\n Vaka Analizi: Birden fazla sekmeyi y\u00f6neten bir sohbet uygulamas\u0131 d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 farkl\u0131 sohbet odalar\u0131n\u0131 farkl\u0131 sekmelerde a\u00e7m\u0131\u015f olabilir. Shared Worker, t\u00fcm bu sekmeler i\u00e7in tek bir WebSocket ba\u011flant\u0131s\u0131n\u0131 y\u00f6netebilir. Gelen t\u00fcm mesajlar bu Shared Worker \u00fczerinden al\u0131n\u0131r ve ilgili sohbet sekmesine y\u00f6nlendirilir. Kullan\u0131c\u0131 bir sekmede mesaj g\u00f6nderdi\u011finde de, bu mesaj Shared Worker \u00fczerinden WebSocket'e iletilir. Bu sayede, gereksiz ba\u011flant\u0131 y\u00fck\u00fcnden ka\u00e7\u0131n\u0131l\u0131r ve a\u011f kaynaklar\u0131 daha verimli kullan\u0131l\u0131r.<\/p>\n WebRTC (Web Real-Time Communication), taray\u0131c\u0131dan taray\u0131c\u0131ya (peer-to-peer) ger\u00e7ek zamanl\u0131 ses, video ve genel veri ak\u0131\u015f\u0131 sa\u011flamak i\u00e7in geli\u015ftirilmi\u015f bir teknolojidir. WebRTC'nin bir par\u00e7as\u0131 olan Data Channels<\/strong>, taray\u0131c\u0131lar aras\u0131nda herhangi bir sunucuya ihtiya\u00e7 duymadan do\u011frudan ve g\u00fcvenli bir \u015fekilde rastgele veri g\u00f6ndermeyi m\u00fcmk\u00fcn k\u0131lar. Bu, \u00f6zellikle d\u00fc\u015f\u00fck gecikmeli, y\u00fcksek bant geni\u015fli\u011fine sahip veri transferi gerektiren uygulamalar i\u00e7in olduk\u00e7a g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n Data Channels, oyunlar (multiplayer), dosya payla\u015f\u0131m uygulamalar\u0131, ger\u00e7ek zamanl\u0131 i\u015fbirli\u011fi ara\u00e7lar\u0131 (\u00f6rne\u011fin, ortak metin d\u00fczenleyiciler) veya e\u015fler aras\u0131 mesajla\u015fma sistemleri gibi senaryolarda kullan\u0131labilir. Veriler, UDP benzeri bir Reliable Data Transfer (RDT) protokol\u00fc \u00fczerinden ak\u0131\u015f halinde veya g\u00fcvenilir bir \u015fekilde (TCP benzeri) g\u00f6nderilebilir. G\u00fcvenlik, standart WebRTC \u015fifrelemesi (DTLS ve SRTP) ile sa\u011flan\u0131r.<\/p>\n WebRTC Data Channels'\u0131n kurulumu, genellikle bir sinyal sunucusu gerektirir. Bu sunucu, e\u015flerin birbirlerini bulmas\u0131na, a\u011f yap\u0131land\u0131rma bilgilerini (ICE candidates) ve oturum tan\u0131mlamalar\u0131n\u0131 (SDP offers\/answers) de\u011fi\u015f toku\u015f etmesine yard\u0131mc\u0131 olur. E\u015fler bir kez birbirini bulduktan ve ba\u011flant\u0131 kurduktan sonra, veri ak\u0131\u015f\u0131 do\u011frudan aralar\u0131nda ger\u00e7ekle\u015fir. Bu sunucu, veri trafi\u011fine arac\u0131l\u0131k etmez, sadece ba\u011flant\u0131 kurulumuna yard\u0131mc\u0131 olur.<\/p>\n Temel ad\u0131mlar:<\/p>\n WebRTC'nin detayl\u0131 kod \u00f6rnekleri olduk\u00e7a karma\u015f\u0131k olabilece\u011finden, burada genel \u00e7al\u0131\u015fma prensibini vurgulamak yeterli olacakt\u0131r. Ancak, ana hatlar\u0131yla bir veri kanal\u0131 olu\u015fturma ve mesaj g\u00f6nderme k\u0131sm\u0131 \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n <\/code><\/p>\n Vaka Analizi: Taray\u0131c\u0131 tabanl\u0131 bir \u00e7ok oyunculu oyun geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Oyunun durumu (oyuncu pozisyonlar\u0131, skorlar, olaylar) her oyuncu aras\u0131nda h\u0131zl\u0131 ve d\u00fc\u015f\u00fck gecikmeli bir \u015fekilde senkronize edilmelidir. WebRTC Data Channels kullanarak, oyuncular\u0131n taray\u0131c\u0131lar\u0131 aras\u0131nda do\u011frudan veri ak\u0131\u015f\u0131 sa\u011flayabilir, b\u00f6ylece sunucu \u00fczerindeki y\u00fck\u00fc azaltabilir ve oyun deneyimini daha ak\u0131c\u0131 hale getirebilirsiniz. Ayn\u0131 zamanda, sunucusuz dosya payla\u015f\u0131m uygulamalar\u0131 da WebRTC Data Channels'\u0131n g\u00fcc\u00fcn\u00fc kullanan pop\u00fcler \u00f6rneklerdendir.<\/p>\n Taray\u0131c\u0131 depolama ve veri payla\u015f\u0131m\u0131 yetenekleri g\u00fc\u00e7l\u00fc olsa da, bu ara\u00e7lar\u0131 etkili ve g\u00fcvenli bir \u015fekilde kullanmak i\u00e7in baz\u0131 \u00f6nemli noktalar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak gerekir. G\u00fcvenlik, performans ve y\u00f6netim, ba\u015far\u0131l\u0131 bir web uygulamas\u0131n\u0131n temel ta\u015flar\u0131d\u0131r.<\/p>\n G\u00fcvenlik \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n Performans \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n Y\u00f6netim \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Bu ipu\u00e7lar\u0131 ve en iyi uygulamalar, uygulaman\u0131z\u0131n sadece i\u015flevsel olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda g\u00fcvenli, h\u0131zl\u0131 ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r. Modern taray\u0131c\u0131 yeteneklerinden tam anlam\u0131yla faydalanmak i\u00e7in bu prensiplere ba\u011fl\u0131 kalmak \u00f6nemlidir.<\/p>\n Web teknolojileri s\u00fcrekli geli\u015fiyor ve taray\u0131c\u0131 depolama ile veri payla\u015f\u0131m\u0131 yetenekleri de bu evrimin ayr\u0131lmaz bir par\u00e7as\u0131. Gelecekte bizi bekleyen geli\u015fmeler, web uygulamalar\u0131n\u0131 daha da yetenekli, entegre ve \u00e7evrimd\u0131\u015f\u0131 \u00f6ncelikli hale getirecek gibi g\u00f6r\u00fcn\u00fcyor. \u0130\u015fte bu alandaki potansiyel y\u00f6nelimler ve yeni teknolojiler:<\/p>\n Daha Derin Sistem Entegrasyonu:<\/strong> G\u00fcn\u00fcm\u00fczde web uygulamalar\u0131, yerel (native) uygulamalar\u0131n sundu\u011fu entegrasyon seviyesine yakla\u015fmaya \u00e7al\u0131\u015f\u0131yor. Gelecekte, File System Access API gibi standartla\u015fmakta olan API'ler sayesinde web uygulamalar\u0131, kullan\u0131c\u0131n\u0131n cihaz\u0131ndaki dosya sistemine daha kontroll\u00fc ve g\u00fcvenli bir \u015fekilde eri\u015febilecek. Bu, \u00e7evrimd\u0131\u015f\u0131 dosya y\u00f6netimi, do\u011frudan dosya d\u00fczenleme ve daha karma\u015f\u0131k yerel veri etkile\u015fimleri i\u00e7in yeni kap\u0131lar a\u00e7acak. Kullan\u0131c\u0131 izniyle, uygulamalar\u0131n belgeleri, resimleri veya di\u011fer dosyalar\u0131 do\u011frudan IndexedDB'de depolamas\u0131 veya yerel dosya sistemine yazmas\u0131 m\u00fcmk\u00fcn hale gelebilir, bu da PWA'lar\u0131n g\u00fcc\u00fcn\u00fc katlayacak.<\/p>\n Web Assembly (Wasm) ile Performans Patlamas\u0131:<\/strong> Web Assembly, taray\u0131c\u0131da neredeyse yerel h\u0131zda kod \u00e7al\u0131\u015ft\u0131rmay\u0131 sa\u011flayan d\u00fc\u015f\u00fck seviyeli bir ikili format\u0131d\u0131r. Depolama veya veri i\u015fleme yo\u011fun uygulamalar i\u00e7in Wasm, JavaScript'in performans s\u0131n\u0131rlamalar\u0131n\u0131 a\u015fma potansiyeli sunar. \u00d6rne\u011fin, b\u00fcy\u00fck veri k\u00fcmeleri \u00fczerinde karma\u015f\u0131k analizler veya veritaban\u0131 i\u015flemleri, Wasm ile \u00e7ok daha h\u0131zl\u0131 yap\u0131labilir. Gelecekte, taray\u0131c\u0131 tabanl\u0131 SQL veritabanlar\u0131 veya di\u011fer geli\u015fmi\u015f depolama sistemleri, Wasm sayesinde \u00e7ok daha verimli \u00e7al\u0131\u015fabilir ve web uygulamalar\u0131n\u0131n yeteneklerini geni\u015fletebilir.<\/p>\n Geli\u015fmi\u015f Senkronizasyon ve \u00c7evrimd\u0131\u015f\u0131 Deneyim:<\/strong> Background Sync API, web uygulamalar\u0131n\u0131n kullan\u0131c\u0131 \u00e7evrimd\u0131\u015f\u0131yken bile verileri senkronize etme yetene\u011fini geli\u015ftiriyor. Gelecekte, bu t\u00fcr API'ler daha sofistike hale gelecek, \u00e7at\u0131\u015fma \u00e7\u00f6zme (conflict resolution) mekanizmalar\u0131 ve daha ak\u0131ll\u0131 senkronizasyon stratejileri sunacak. Bu, kullan\u0131c\u0131lar\u0131n tamamen \u00e7evrimd\u0131\u015f\u0131 ortamlarda bile \u00fcretkenli\u011fini s\u00fcrd\u00fcrmelerini sa\u011flayacak ve ba\u011flant\u0131 geri geldi\u011finde verilerin sorunsuz bir \u015fekilde bulutla senkronize olmas\u0131n\u0131 kolayla\u015ft\u0131racak.<\/p>\n Kullan\u0131c\u0131 Mahremiyeti ve G\u00fcvenlik Odakl\u0131 Geli\u015fmeler:<\/strong> Taray\u0131c\u0131lar, kullan\u0131c\u0131 mahremiyetini ve g\u00fcvenli\u011fini korumak i\u00e7in s\u00fcrekli yeni y\u00f6ntemler geli\u015ftiriyor. Depolama alanlar\u0131 i\u00e7in daha gran\u00fcler izinler, \u00e7erezlerin ve di\u011fer izleme mekanizmalar\u0131n\u0131n k\u0131s\u0131tlanmas\u0131 gibi geli\u015fmeler, geli\u015ftiricilerin veri saklama ve payla\u015f\u0131m yakla\u015f\u0131mlar\u0131n\u0131 yeniden d\u00fc\u015f\u00fcnmesini gerektirecek. \u00d6rne\u011fin, \"Federated Learning\" gibi yakla\u015f\u0131mlar, verilerin cihazda kalmas\u0131n\u0131 sa\u011flayarak ve sadece toplu \u00f6\u011frenme modellerini payla\u015farak mahremiyeti korurken, kullan\u0131c\u0131 davran\u0131\u015flar\u0131ndan faydalanmaya devam etmeyi m\u00fcmk\u00fcn k\u0131labilir.<\/p>\n Web Transport ve Daha H\u0131zl\u0131 \u0130leti\u015fim:<\/strong> WebSockets, ger\u00e7ek zamanl\u0131 ileti\u015fim i\u00e7in harika olsa da, yeni WebTransport API'si (WebRTC'nin bir uzant\u0131s\u0131 olarak d\u00fc\u015f\u00fcn\u00fclebilir) HTTP\/3 (QUIC) protokol\u00fc \u00fczerine in\u015fa edilmi\u015f daha esnek ve performansl\u0131 bir ileti\u015fim kanal\u0131 sunmay\u0131 hedefliyor. Bu, \u00f6zellikle oyunlar, canl\u0131 yay\u0131nlar veya di\u011fer d\u00fc\u015f\u00fck gecikmeli veri ak\u0131\u015f\u0131 gerektiren uygulamalar i\u00e7in WebRTC Data Channels'a g\u00fc\u00e7l\u00fc bir alternatif veya tamamlay\u0131c\u0131 olabilir. Bu sayede taray\u0131c\u0131lar aras\u0131 veri payla\u015f\u0131m\u0131 daha h\u0131zl\u0131, daha g\u00fcvenilir ve daha az gecikmeli hale gelecektir.<\/p>\n \u00d6zetle, modern taray\u0131c\u0131 depolama ve veri payla\u015f\u0131m yetenekleri, web'i sadece bir bilgi platformu olmaktan \u00e7\u0131kar\u0131p, yerel uygulamalarla rekabet edebilecek, zengin ve dinamik bir uygulama ekosistemine d\u00f6n\u00fc\u015ft\u00fcr\u00fcyor. Bu alandaki s\u00fcrekli yenilikler, web geli\u015ftiricilerine daha \u00f6nce hayal bile edilemeyen deneyimler in\u015fa etme g\u00fcc\u00fc verecek ve internetin gelece\u011fini \u015fekillendirmeye devam edecektir.<\/p>\n Modern web uygulamalar\u0131, kullan\u0131c\u0131 beklentilerini kar\u015f\u0131lamak ve zengin bir deneyim sunmak i\u00e7in geli\u015fmi\u015f depolama ve veri payla\u015f\u0131m yeteneklerine ihtiya\u00e7 duyar. Bu makalede, 1. localStorage ve sessionStorage aras\u0131ndaki temel fark nedir?<\/strong><\/p>\n 2. IndexedDB'yi ne zaman kullanmal\u0131y\u0131m ve Web Storage API'sinden fark\u0131 nedir?<\/strong><\/p>\n IndexedDB, b\u00fcy\u00fck, yap\u0131sal ve sorgulanabilir verileri taray\u0131c\u0131da depolamak i\u00e7in tasarlanm\u0131\u015f NoSQL tarz\u0131 bir veritaban\u0131d\u0131r. \u00c7evrimd\u0131\u015f\u0131 uygulamalar, b\u00fcy\u00fck veri k\u00fcmeleri ve performans\u0131n kritik oldu\u011fu senaryolar i\u00e7in idealdir. Web Storage ( 3. Service Worker'lar ve Cache API ile uygulaman\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 nas\u0131l sa\u011flar\u0131m?<\/strong><\/p>\n Service Worker'lar, taray\u0131c\u0131da ana sayfadan ayr\u0131 \u00e7al\u0131\u015fan JavaScript dosyalar\u0131d\u0131r. 4. Taray\u0131c\u0131lar aras\u0131nda veri payla\u015f\u0131m\u0131 i\u00e7in hangi API'yi ne zaman tercih etmeliyim?<\/strong><\/p>\n 5. Taray\u0131c\u0131da hassas verileri depolamak g\u00fcvenli midir?<\/strong><\/p>\n Hay\u0131r, do\u011frudan hassas verileri (\u015fifreler, kredi kart\u0131 bilgileri, ki\u015fisel sa\u011fl\u0131k verileri vb.) taray\u0131c\u0131 depolama mekanizmalar\u0131nda ( <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in verileri taray\u0131c\u0131da saklama ve payla\u015fma yeteneklerine ihtiya\u00e7 duyar. Bu kapsaml\u0131 rehberle,…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-32034","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nlocalStorage<\/code> ve sessionStorage<\/code>. Her ikisi de taray\u0131c\u0131n\u0131n yerel diskinde veya oturum baz\u0131nda veri saklama olana\u011f\u0131 tan\u0131r ve \u00e7erezlere (cookies) g\u00f6re daha b\u00fcy\u00fck depolama alan\u0131 (genellikle 5-10 MB) sunar.<\/p>\nlocalStorage<\/code>‘da depolanan verilere, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131 yoluyla eri\u015filebilece\u011fi i\u00e7in hassas bilgileri (\u015fifreler, kredi kart\u0131 bilgileri) do\u011frudan saklamaktan ka\u00e7\u0131nmak \u00f6nemlidir.<\/p>\nsessionStorage<\/code> \u00f6rne\u011fine sahiptir, yani farkl\u0131 sekmelerdeki veriler birbirini etkilemez.<\/p>\nJSON.stringify()<\/code> kullanarak string’e d\u00f6n\u00fc\u015ft\u00fcrmeniz ve \u00e7ekerken de JSON.parse()<\/code> ile tekrar nesneye \u00e7evirmeniz gerekir. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n\n\/\/ localStorage'a veri kaydetme\nlocalStorage.setItem('kullaniciTercihiTema', 'dark');\nlocalStorage.setItem('sonZiyaretTarihi', new Date().toISOString());\n\n\/\/ Bir nesneyi kaydetme\nconst ayarlar = {\n dil: 'tr',\n bildirimler: true\n};\nlocalStorage.setItem('kullaniciAyarlari', JSON.stringify(ayarlar));\n\n\/\/ localStorage'dan veri okuma\nconst tema = localStorage.getItem('kullaniciTercihiTema');\nconsole.log(Kullan\u0131c\u0131n\u0131n tercih etti\u011fi tema: ${tema}<\/code>); \/\/ \u00c7\u0131kt\u0131: dark\n\nconst kaydedilenAyarlar = JSON.parse(localStorage.getItem('kullaniciAyarlari'));\nconsole.log(Kullan\u0131c\u0131n\u0131n dil ayar\u0131: ${kaydedilenAyarlar.dil}<\/code>); \/\/ \u00c7\u0131kt\u0131: tr\n\n\/\/ localStorage'dan veri silme\n\/\/ localStorage.removeItem('kullaniciTercihiTema');\n\n\/\/ T\u00fcm localStorage verilerini temizleme\n\/\/ localStorage.clear();\n\n\n\/\/ sessionStorage i\u00e7in de ayn\u0131 y\u00f6ntemler ge\u00e7erlidir\nsessionStorage.setItem('geciciMesaj', 'Ho\u015f geldiniz!');\nconst geciciMesaj = sessionStorage.getItem('geciciMesaj');\nconsole.log(Ge\u00e7ici mesaj: ${geciciMesaj}<\/code>); \/\/ \u00c7\u0131kt\u0131: Ho\u015f geldiniz!\n<\/pre>\nlocalStorage<\/code>'\u0131 kullan\u0131rken, anahtar isimlerinizin benzersiz oldu\u011fundan emin olun ve uygulaman\u0131z\u0131n etki alan\u0131yla \u00e7ak\u0131\u015fmayacak bir \u00f6nek kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz (\u00f6rn: myapp_tema<\/code>). Bu, di\u011fer uygulamalarla veya k\u00fct\u00fcphanelerle olas\u0131 \u00e7ak\u0131\u015fmalar\u0131 \u00f6nler.\n<\/div>\nlocalStorage<\/code> kullanarak kal\u0131c\u0131 hale getirebilirsiniz. Sepete eklenen \u00fcr\u00fcnleri, kullan\u0131c\u0131 oturumunu kapatana kadar sessionStorage<\/code>'da tutarak, sayfa yenilense bile sepetin bo\u015falmas\u0131n\u0131 \u00f6nleyebilirsiniz. B\u00f6ylece, kullan\u0131c\u0131 deneyimi kesintisiz ve ki\u015fiselle\u015ftirilmi\u015f bir hal al\u0131r, ki bu da m\u00fc\u015fteri memnuniyetini do\u011frudan etkileyen bir fakt\u00f6rd\u00fcr.<\/p>\nIndexedDB: Yap\u0131sal Veriler \u0130\u00e7in G\u00fc\u00e7l\u00fc Bir Depo<\/h3>\n
\n
indexedDB.open()<\/code> ile bir veritaban\u0131 a\u00e7\u0131l\u0131r. E\u011fer mevcut de\u011filse olu\u015fturulur.<\/li>\nonupgradeneeded<\/code> olay\u0131) s\u0131ras\u0131nda, verilerin saklanaca\u011f\u0131 nesne depolar\u0131 tan\u0131mlan\u0131r. Bu depolar, veritaban\u0131ndaki \"tablolar\" gibi d\u00fc\u015f\u00fcn\u00fclebilir.<\/li>\nadd()<\/code>, put()<\/code>, get()<\/code>, delete()<\/code> gibi y\u00f6ntemlerle CRUD (Create, Read, Update, Delete) i\u015flemleri yap\u0131l\u0131r.<\/li>\n\nfunction initIndexedDB() {\n const request = indexedDB.open('MyDatabase', 1); \/\/ Veritaban\u0131n\u0131 a\u00e7 veya olu\u015ftur\n\n request.onupgradeneeded = function(event) {\n const db = event.target.result;\n \/\/ E\u011fer 'todos' nesne deposu yoksa olu\u015ftur\n if (!db.objectStoreNames.contains('todos')) {\n db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });\n }\n };\n\n request.onsuccess = function(event) {\n console.log('IndexedDB veritaban\u0131 ba\u015far\u0131yla a\u00e7\u0131ld\u0131.');\n const db = event.target.result;\n addTodo(db, { text: 'IndexedDB \u00f6\u011fren', completed: false });\n addTodo(db, { text: 'Makaleyi tamamla', completed: true });\n };\n\n request.onerror = function(event) {\n console.error('IndexedDB hatas\u0131:', event.target.errorCode);\n };\n}\n\nfunction addTodo(db, todo) {\n const transaction = db.transaction(['todos'], 'readwrite'); \/\/ 'readwrite' i\u015flemi ba\u015flat\n const objectStore = transaction.objectStore('todos');\n const request = objectStore.add(todo); \/\/ Veri ekle\n\n request.onsuccess = function() {\n console.log('Yap\u0131lacaklar listesine \u00f6\u011fe eklendi:', todo);\n };\n\n request.onerror = function() {\n console.error('Veri eklenirken hata olu\u015ftu:', request.error);\n };\n}\n\ninitIndexedDB();\n<\/pre>\nCache API: Servis \u0130\u015f\u00e7ileriyle \u00c7evrimd\u0131\u015f\u0131 Deneyim (Service Workers)<\/h3>\n
caches.open()<\/code> ve cache.addAll()<\/code> gibi y\u00f6ntemleri kullanabilir. Ard\u0131ndan, bir a\u011f iste\u011fi geldi\u011finde, iste\u011fi do\u011frudan a\u011fa g\u00f6ndermek yerine \u00f6nce \u00f6nbellekte arayabilir ve varsa \u00f6nbellekten servis edebilir. Bu sayede, uygulaman\u0131z internet olmasa bile gerekli kaynaklara eri\u015febilir.<\/p>\n\n
\n\/\/ index.html veya ana JavaScript dosyan\u0131zda\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('\/service-worker.js')\n .then(registration => {\n console.log('Service Worker kay\u0131t ba\u015far\u0131l\u0131:', registration.scope);\n })\n .catch(err => {\n console.log('Service Worker kay\u0131t ba\u015far\u0131s\u0131z:', err);\n });\n });\n}\n<\/pre>\n\n\/\/ service-worker.js dosyas\u0131nda\nconst CACHE_NAME = 'my-app-cache-v1';\nconst urlsToCache = [\n '\/',\n '\/index.html',\n '\/styles.css',\n '\/script.js',\n '\/images\/logo.png'\n];\n\n\/\/ Y\u00fckleme (install) olay\u0131nda kaynaklar\u0131 \u00f6nbelle\u011fe al\nself.addEventListener('install', event => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => {\n console.log('\u00d6nbellek a\u00e7\u0131ld\u0131 ve kaynaklar eklendi.');\n return cache.addAll(urlsToCache);\n })\n );\n});\n\n\/\/ Talep (fetch) olay\u0131nda \u00f6nbellekten veya a\u011fdan servis et\nself.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n \/\/ \u00d6nbellekte varsa \u00f6nbellekten d\u00f6n\n if (response) {\n return response;\n }\n \/\/ Yoksa a\u011fdan talep et\n return fetch(event.request)\n .then(response => {\n \/\/ Ge\u00e7erli bir yan\u0131t gelirse \u00f6nbelle\u011fe al ve d\u00f6n\n if (!response || response.status !== 200 || response.type !== 'basic') {\n return response;\n }\n const responseToCache = response.clone();\n caches.open(CACHE_NAME)\n .then(cache => {\n cache.put(event.request, responseToCache);\n });\n return response;\n });\n })\n .catch(() => {\n \/\/ Hem \u00f6nbellekte yoksa hem de a\u011f hatas\u0131 varsa fallback sayfas\u0131 g\u00f6ster\n \/\/ return caches.match('\/offline.html');\n })\n );\n});\n\n\/\/ Aktivasyon (activate) olay\u0131nda eski \u00f6nbellekleri temizle\nself.addEventListener('activate', event => {\n const cacheWhitelist = [CACHE_NAME];\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheWhitelist.indexOf(cacheName) === -1) {\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n});\n<\/pre>\nTaray\u0131c\u0131lar Aras\u0131 Veri Payla\u015f\u0131m\u0131 Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n
Broadcast Channel API: Ayn\u0131 Kaynak \u0130\u00e7inde \u0130leti\u015fim Kurma<\/h3>\n
\n
BroadcastChannel<\/code> s\u0131n\u0131f\u0131n\u0131n bir \u00f6rne\u011fini olu\u015fturun, kanal i\u00e7in benzersiz bir isim verin.<\/li>\npostMessage()<\/code> y\u00f6ntemini kullan\u0131n.<\/li>\nonmessage<\/code> olay i\u015fleyicisini kullan\u0131n.<\/li>\nclose()<\/code> y\u00f6ntemini kullan\u0131n (kaynaklar\u0131 serbest b\u0131rakmak i\u00e7in).<\/li>\n<\/ol>\n\n\/\/ Sekme A veya Pencere A\nconst channel = new BroadcastChannel('kullanici_oturum_kanali');\n\ndocument.getElementById('loginButton').addEventListener('click', () => {\n \/\/ Oturum a\u00e7ma i\u015flemi sonras\u0131\n const userData = { userId: '123', username: 'AliDemir', status: 'loggedIn' };\n channel.postMessage({ type: 'LOGIN', payload: userData });\n console.log('Giri\u015f mesaj\u0131 g\u00f6nderildi.');\n});\n\ndocument.getElementById('logoutButton').addEventListener('click', () => {\n \/\/ Oturum kapatma i\u015flemi sonras\u0131\n channel.postMessage({ type: 'LOGOUT' });\n console.log('\u00c7\u0131k\u0131\u015f mesaj\u0131 g\u00f6nderildi.');\n});\n\n\/\/ Gelen mesajlar\u0131 dinle\nchannel.onmessage = (event) => {\n console.log('Sekme A\\'da mesaj al\u0131nd\u0131:', event.data);\n \/\/ Kendi UI'n\u0131 g\u00fcncelle\n};\n\n\/\/ Sayfa kapan\u0131rken kanal\u0131 kapatmak iyi bir pratiktir\nwindow.addEventListener('beforeunload', () => {\n channel.close();\n});\n<\/pre>\n\n\/\/ Sekme B veya Pencere B\nconst channelB = new BroadcastChannel('kullanici_oturum_kanali');\n\nchannelB.onmessage = (event) => {\n console.log('Sekme B\\'de mesaj al\u0131nd\u0131:', event.data);\n if (event.data.type === 'LOGIN') {\n alert(Kullan\u0131c\u0131 ${event.data.payload.username} oturum a\u00e7t\u0131!<\/code>);\n \/\/ UI'y\u0131 login durumuna getir\n } else if (event.data.type === 'LOGOUT') {\n alert('Kullan\u0131c\u0131 oturumu kapatt\u0131!');\n \/\/ UI'y\u0131 logout durumuna getir\n }\n};\n\nwindow.addEventListener('beforeunload', () => {\n channelB.close();\n});\n<\/pre>\nShared Workers: Ortak Bir \u0130\u015f Par\u00e7ac\u0131\u011f\u0131 ile Verimlilik<\/h3>\n
onconnect<\/code> olay\u0131, yeni bir port ba\u011fland\u0131\u011f\u0131nda tetiklenir.<\/p>\n\n\/\/ shared-worker.js (Shared Worker dosyas\u0131)\nlet connections = 0;\nself.onconnect = function(e) {\n const port = e.ports[0];\n connections++;\n console.log(Yeni ba\u011flant\u0131 kuruldu. Toplam ba\u011flant\u0131: ${connections}<\/code>);\n\n port.onmessage = function(event) {\n if (event.data === 'Merhaba Worker') {\n port.postMessage(Worker'dan Merhaba! (Ba\u011flant\u0131: ${connections})<\/code>);\n } else if (event.data === 'Kapat') {\n connections--;\n console.log(Bir ba\u011flant\u0131 kapand\u0131. Kalan ba\u011flant\u0131: ${connections}<\/code>);\n \/\/ Gerekirse worker'\u0131 sonland\u0131rabiliriz\n }\n };\n port.start(); \/\/ Portu ba\u015flatmak \u00f6nemli\n};\n<\/pre>\n\n\/\/ index.html veya JavaScript dosyas\u0131 (her sekmede\/pencerede)\nconst mySharedWorker = new SharedWorker('\/shared-worker.js', { type: 'module' }); \/\/ {type: 'module'} gerekli olabilir\n\nmySharedWorker.port.onmessage = function(event) {\n console.log('Ana sayfadan Shared Worker mesaj\u0131 al\u0131nd\u0131:', event.data);\n};\n\n\/\/ Worker'a mesaj g\u00f6nder\ndocument.getElementById('sendMessageButton').addEventListener('click', () => {\n mySharedWorker.port.postMessage('Merhaba Worker');\n});\n\n\/\/ Sayfa kapan\u0131rken worker ba\u011flant\u0131s\u0131n\u0131 kapatmak iyi bir pratiktir\nwindow.addEventListener('beforeunload', () => {\n mySharedWorker.port.postMessage('Kapat'); \/\/ Worker'a kapanma bilgisini g\u00f6nder\n mySharedWorker.port.close();\n});\n<\/pre>\nWebRTC Data Channels: Ger\u00e7ek Zamanl\u0131 ve G\u00fcvenli Veri Ak\u0131\u015f\u0131<\/h3>\n
\n
RTCPeerConnection<\/code> nesnelerini olu\u015fturma.<\/li>\nRTCPeerConnection.createDataChannel()<\/code> ile veri kanal\u0131 olu\u015fturma.<\/li>\nDataChannel<\/code> \u00fczerinden mesaj g\u00f6nderme\/alma.<\/li>\n<\/ol>\n\n\/\/ Peer 1 (\u00d6rnek)\nconst peerConnection1 = new RTCPeerConnection();\nconst dataChannel1 = peerConnection1.createDataChannel(\"chat\");\n\ndataChannel1.onopen = (event) => {\n console.log(\"Veri Kanal\u0131 1 A\u00e7\u0131ld\u0131!\");\n dataChannel1.send(\"Merhaba Peer 2!\");\n};\n\ndataChannel1.onmessage = (event) => {\n console.log(\"Peer 1'de mesaj al\u0131nd\u0131:\", event.data);\n};\n\n\/\/ ... (SDP ve ICE de\u011fi\u015fimi i\u00e7in sinyalizasyon kodlar\u0131 buraya gelir) ...\n\n\n\/\/ Peer 2 (\u00d6rnek)\nconst peerConnection2 = new RTCPeerConnection();\n\npeerConnection2.ondatachannel = (event) => {\n const dataChannel2 = event.channel;\n dataChannel2.onopen = (event) => {\n console.log(\"Veri Kanal\u0131 2 A\u00e7\u0131ld\u0131!\");\n };\n dataChannel2.onmessage = (event) => {\n console.log(\"Peer 2'de mesaj al\u0131nd\u0131:\", event.data);\n dataChannel2.send(\"Merhaba Peer 1!\");\n };\n};\n\n\/\/ ... (SDP ve ICE de\u011fi\u015fimi i\u00e7in sinyalizasyon kodlar\u0131 buraya gelir) ...\n<\/pre>\nG\u00fcvenlik, Performans ve Y\u00f6netim \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n
\n
localStorage<\/code> ve sessionStorage<\/code> gibi Web Storage API'leri, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olabilir. Asla hassas kullan\u0131c\u0131 bilgileri (\u015fifreler, kredi kart\u0131 numaralar\u0131, ki\u015fisel sa\u011fl\u0131k bilgileri vb.) bu depolama alanlar\u0131nda saklamay\u0131n. Bu t\u00fcr veriler her zaman sunucu taraf\u0131nda g\u00fcvenli bir \u015fekilde y\u00f6netilmeli veya uygun \u015fifreleme ve token mekanizmalar\u0131 kullan\u0131lmal\u0131d\u0131r.<\/li>\nlocalStorage<\/code> ve sessionStorage<\/code> verilerine eri\u015febilir.<\/li>\n\n
localStorage<\/code>\/sessionStorage<\/code>, yap\u0131sal ve b\u00fcy\u00fck veri setleri i\u00e7in IndexedDB<\/code> kullan\u0131n.<\/li>\nlocalStorage<\/code>) boyut s\u0131n\u0131rlamalar\u0131 vard\u0131r. Bu limitlere ula\u015fmaktan ka\u00e7\u0131nmak i\u00e7in gereksiz verileri depolamay\u0131n ve s\u0131k s\u0131k temizlik yap\u0131n.<\/li>\n\n
navigator.storage.estimate()<\/code> API'sini kullanarak uygulaman\u0131z\u0131n ne kadar depolama alan\u0131 kulland\u0131\u011f\u0131n\u0131 ve ne kadar bo\u015f alan kald\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz. Kota a\u015f\u0131ld\u0131\u011f\u0131nda uygulamalar\u0131n nas\u0131l davranaca\u011f\u0131n\u0131 test edin.<\/li>\n\n\/* HTML'de basit bir tablo \u00f6rne\u011fi *\/\n\n \n
\n \n \u00dcr\u00fcn Ad\u0131<\/th>\n Fiyat<\/th>\n Stok Durumu<\/th>\n Kategori<\/th>\n <\/tr>\n <\/thead>\n \n Laptop A<\/td>\n 12000 TL<\/td>\n Var<\/td>\n Elektronik<\/td>\n <\/tr>\n \n <\/tbody>\n<\/table>\n\n\n\/* CSS'te medya sorgusu ile mobil uyumluluk *\/\n.data-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.data-table th, .data-table td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\n\n\/* Masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in *\/\n.hide-on-mobile {\n display: table-cell; \/* Masa\u00fcst\u00fcnde g\u00f6r\u00fcn\u00fcr *\/\n}\n\n\/* Mobil cihazlar i\u00e7in medya sorgusu *\/\n@media (max-width: 768px) {\n .data-table th, .data-table td {\n font-size: 14px;\n padding: 6px;\n }\n \n \/* Belirli s\u00fctunlar\u0131 mobil cihazlarda gizle *\/\n .hide-on-mobile {\n display: none;\n }\n\n \/* Tabloyu dikey olarak kayd\u0131r\u0131labilir hale getir (e\u011fer \u00e7ok s\u00fctun varsa) *\/\n .data-table-wrapper { \/* Tabloyu sarmalayan bir div *\/\n overflow-x: auto;\n -webkit-overflow-scrolling: touch; \/* iOS'ta ak\u0131c\u0131 kayd\u0131rma *\/\n }\n\n \/* Alternatif: her sat\u0131r\u0131 ayr\u0131 bir blok olarak g\u00f6ster *\/\n .data-table thead {\n display: none; \/* Ba\u015fl\u0131klar\u0131 gizle *\/\n }\n .data-table tr {\n display: block;\n margin-bottom: 10px;\n border: 1px solid #eee;\n }\n .data-table td {\n display: block;\n text-align: right;\n padding-left: 50%;\n position: relative;\n }\n .data-table td::before {\n content: attr(data-label); \/* data-label \u00f6zelli\u011fini kullanarak ba\u015fl\u0131k ekle *\/\n position: absolute;\n left: 6px;\n width: 45%;\n padding-right: 10px;\n white-space: nowrap;\n text-align: left;\n font-weight: bold;\n }\n}\n<\/pre>\n .hide-on-mobile<\/code> s\u0131n\u0131f\u0131na sahip tablo s\u00fctunlar\u0131 mobil cihazlarda gizlenirken, tablolar\u0131n dikey olarak kayd\u0131r\u0131labilir hale getirilmesi veya her sat\u0131r\u0131n ayr\u0131 bir blok olarak g\u00f6sterilmesi i\u00e7in alternatif yakla\u015f\u0131mlar sunulmu\u015ftur. Bu t\u00fcr adaptasyonlar, kullan\u0131c\u0131lar\u0131n farkl\u0131 cihazlarda da verileri rahat\u00e7a t\u00fcketebilmesini sa\u011flar.<\/p>\nModern Taray\u0131c\u0131 Depolama ve Payla\u015f\u0131m Yeteneklerinin Gelece\u011fi Nas\u0131l \u015eekillenecek?<\/h2>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
localStorage<\/code> ve sessionStorage<\/code> gibi basit \u00e7\u00f6z\u00fcmlerden, yap\u0131sal veriler i\u00e7in g\u00fc\u00e7l\u00fc IndexedDB<\/code>'ye ve \u00e7evrimd\u0131\u015f\u0131 yeteneklerin kalbi olan Cache API<\/code> ile Service Worker<\/code>'lara kadar \u00e7e\u015fitli depolama mekanizmalar\u0131n\u0131 inceledik. Ayr\u0131ca, ayn\u0131 kaynak i\u00e7indeki farkl\u0131 ba\u011flamlar aras\u0131 ileti\u015fimi sa\u011flayan Broadcast Channel API<\/code>, kaynak verimlili\u011fi sunan Shared Workers<\/code> ve e\u015fler aras\u0131 ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131 sa\u011flayan WebRTC Data Channels<\/code> gibi veri payla\u015f\u0131m y\u00f6ntemlerini ele ald\u0131k. G\u00fcvenlik, performans ve y\u00f6netim ipu\u00e7lar\u0131yla birlikte, bu teknolojilerin etkin ve sorumlu kullan\u0131m\u0131n\u0131n \u00f6nemini vurgulad\u0131k. Gelecekteki geli\u015fmelerin de web uygulamalar\u0131n\u0131 daha yetenekli ve entegre hale getirece\u011fi a\u015fikard\u0131r. Bu ara\u00e7lar\u0131 do\u011fru bir \u015fekilde anlamak ve uygulamak, modern web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmezdir.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
localStorage<\/code> verileri kal\u0131c\u0131 olarak saklar; yani taray\u0131c\u0131 kapat\u0131lsa veya bilgisayar yeniden ba\u015flat\u0131lsa bile veriler kaybolmaz. Veriler ayn\u0131 kaynak i\u00e7indeki t\u00fcm sekmeler ve pencereler aras\u0131nda payla\u015f\u0131l\u0131r. sessionStorage<\/code> ise verileri yaln\u0131zca mevcut taray\u0131c\u0131 oturumu s\u00fcresince saklar; sekme veya pencere kapat\u0131ld\u0131\u011f\u0131nda veriler silinir. Her sekme veya pencerenin kendi ba\u011f\u0131ms\u0131z sessionStorage<\/code> \u00f6rne\u011fi vard\u0131r.<\/p>\nlocalStorage<\/code>\/sessionStorage<\/code>) ise daha k\u00fc\u00e7\u00fck, anahtar\/de\u011fer \u00e7iftleri halinde basit verileri depolamak i\u00e7in kullan\u0131l\u0131r ve daha az esneklik sunar. IndexedDB asenkron \u00e7al\u0131\u015f\u0131rken, Web Storage senkron i\u015flemler yapar.<\/p>\nCache API<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, uygulaman\u0131n statik varl\u0131klar\u0131n\u0131 (HTML, CSS, JS, resimler) ve hatta API yan\u0131tlar\u0131n\u0131 \u00f6nbelle\u011fe alabilirler. Bir a\u011f iste\u011fi geldi\u011finde, Service Worker \u00f6nce \u00f6nbelle\u011fe bakar; e\u011fer kaynak \u00f6nbellekte varsa, \u00e7evrimd\u0131\u015f\u0131 olsa bile oradan servis edebilir. Bu, uygulaman\u0131z\u0131n internet ba\u011flant\u0131s\u0131 olmadan bile \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r.<\/p>\n\n
localStorage<\/code>, sessionStorage<\/code>, IndexedDB) saklamak genellikle g\u00fcvenli de\u011fildir. Bu veriler XSS sald\u0131r\u0131lar\u0131 veya di\u011fer g\u00fcvenlik a\u00e7\u0131klar\u0131 yoluyla \u00e7al\u0131nabilir. Hassas bilgiler her zaman sunucu taraf\u0131nda g\u00fcvenli bir \u015fekilde saklanmal\u0131 veya k\u0131sa \u00f6m\u00fcrl\u00fc, g\u00fcvenli HTTP Only \u00e7erezleri veya sunucu taraf\u0131ndan y\u00f6netilen tokenlar gibi daha g\u00fcvenli mekanizmalar kullan\u0131lmal\u0131d\u0131r. \u015eifreleme kullan\u0131lsa bile, anahtar\u0131n taray\u0131c\u0131da bulunmas\u0131 bir risk olu\u015fturur.<\/p>\n