Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131na kesintisiz ve tutarl\u0131 bir deneyim sunmay\u0131 hedefler. Ancak internet ba\u011flant\u0131s\u0131n\u0131n do\u011fas\u0131 gere\u011fi, kullan\u0131c\u0131lar zaman zaman \u00e7evrimd\u0131\u015f\u0131 kalabilir veya ba\u011flant\u0131 kalitesi d\u00fc\u015febilir. Bu durumlar, bir uygulaman\u0131n kullan\u0131c\u0131 deneyimini, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve genel i\u015flevselli\u011fini ciddi \u015fekilde etkileyebilir. \u00d6zellikle mobil cihazlar\u0131n yayg\u0131nla\u015fmas\u0131 ve Progressive Web Uygulamalar\u0131n\u0131n (PWA) y\u00fckseli\u015fiyle birlikte, bir uygulaman\u0131n \u00e7evrimi\u00e7i ve \u00e7evrimd\u0131\u015f\u0131 durumunu do\u011fru bir \u015fekilde tespit edebilmesi ve bu duruma g\u00f6re adapte olabilmesi kritik bir gereklilik haline gelmi\u015ftir.<\/p>\n
Vue.js, reaktif yap\u0131s\u0131 ve bile\u015fen tabanl\u0131 mimarisiyle \u00f6n u\u00e7 geli\u015ftiricilerin favori \u00e7er\u00e7evelerinden biridir. Vue.js ekosistemi, bu t\u00fcr zorluklar\u0131 a\u015fmak i\u00e7in \u00e7e\u015fitli ara\u00e7lar ve k\u00fct\u00fcphaneler sunar. Bu makalede, Vue.js uygulamalar\u0131nda \u00e7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durum tespitini kolayla\u015ft\u0131ran ve daha g\u00fcvenilir hale getiren Bir web uygulamas\u0131n\u0131n \u00e7evrimi\u00e7i veya \u00e7evrimd\u0131\u015f\u0131 olma durumunu bilmek, sadece bir durum bilgisi olmaktan \u00f6te, uygulaman\u0131n davran\u0131\u015f\u0131n\u0131 ve kullan\u0131c\u0131yla etkile\u015fimini temelden \u015fekillendiren bir fakt\u00f6rd\u00fcr. Bu durum tespiti, \u00e7e\u015fitli nedenlerle modern web geli\u015ftirme prati\u011finde merkezi bir rol oynamaktad\u0131r:<\/p>\n Kullan\u0131c\u0131lar, bir uygulaman\u0131n her zaman eri\u015filebilir ve sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 beklerler. \u0130nternet ba\u011flant\u0131s\u0131 koptu\u011funda, uygulaman\u0131n donmas\u0131, hata mesajlar\u0131 g\u00f6stermesi veya beklemeye girmesi k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7ar. \u00c7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durum tespiti sayesinde, kullan\u0131c\u0131ya ba\u011flant\u0131 durumunu net bir \u015fekilde bildirebilir, \u00e7evrimd\u0131\u015f\u0131 iken hangi i\u015flemlerin yap\u0131labilece\u011fini veya yap\u0131lamayaca\u011f\u0131n\u0131 g\u00f6sterebiliriz. \u00d6rne\u011fin, bir “\u0130nternet ba\u011flant\u0131n\u0131z yok” banner’\u0131 veya grile\u015fmi\u015f butonlar, kullan\u0131c\u0131n\u0131n beklentilerini y\u00f6netmesine yard\u0131mc\u0131 olur.<\/p>\n \u00c7o\u011fu web uygulamas\u0131, sunucu ile veri al\u0131\u015fveri\u015fi yapar. Kullan\u0131c\u0131 \u00e7evrimd\u0131\u015f\u0131yken bir form doldurur, bir g\u00f6nderi yapar veya bir ayar\u0131 de\u011fi\u015ftirirse, bu verilerin kaybolmamas\u0131 kritik \u00f6neme sahiptir. \u00c7evrimd\u0131\u015f\u0131 durum tespiti, bu t\u00fcr verileri yerel depolama mekanizmalar\u0131nda (IndexedDB, LocalStorage) ge\u00e7ici olarak saklamak ve ba\u011flant\u0131 yeniden sa\u011fland\u0131\u011f\u0131nda otomatik olarak sunucuyla senkronize etmek i\u00e7in bir tetikleyici g\u00f6revi g\u00f6r\u00fcr. Bu, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korurken, kullan\u0131c\u0131ya kesintisiz bir i\u015f ak\u0131\u015f\u0131 sunar.<\/p>\n Ba\u011flant\u0131 sorunlar\u0131 genellikle genel a\u011f hatas\u0131 mesajlar\u0131 olarak ortaya \u00e7\u0131kar ve bu mesajlar kullan\u0131c\u0131 i\u00e7in pek anlaml\u0131 de\u011fildir. Ba\u011flant\u0131 durumunu bilmek, daha spesifik ve kullan\u0131c\u0131 dostu hata mesajlar\u0131 sunmam\u0131z\u0131 sa\u011flar (“Sunucuya ula\u015f\u0131lam\u0131yor” yerine “\u0130nternet ba\u011flant\u0131n\u0131z yok”). Ayr\u0131ca, \u00e7evrimd\u0131\u015f\u0131 iken gereksiz a\u011f istekleri g\u00f6ndermekten ka\u00e7\u0131narak hem uygulaman\u0131n performans\u0131n\u0131 art\u0131rabilir hem de kullan\u0131c\u0131n\u0131n cihaz\u0131ndaki pil ve veri kullan\u0131m\u0131n\u0131 optimize edebiliriz.<\/p>\n Progressive Web Uygulamalar\u0131 (PWA), \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fabilirlik \u00fczerine in\u015fa edilmi\u015ftir. Bir PWA’n\u0131n en temel \u00f6zelliklerinden biri, internet ba\u011flant\u0131s\u0131 olmasa bile temel i\u015flevselli\u011fini s\u00fcrd\u00fcrebilmesidir. Web taray\u0131c\u0131lar\u0131, internet ba\u011flant\u0131 durumunu tespit etmek i\u00e7in baz\u0131 yerle\u015fik mekanizmalar sunar. En bilinenleri \u00d6rnek kullan\u0131m:<\/p>\n Ancak Taray\u0131c\u0131lar ayr\u0131ca \u00d6rnek kullan\u0131m:<\/p>\n Bu olaylar da * Reaktiflik:<\/strong> Vue’nun reaktif sistemine tam entegrasyon sayesinde, ba\u011flant\u0131 durumu de\u011fi\u015fti\u011finde uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fc otomatik olarak g\u00fcncellenir. \u00d6ncelikle, k\u00fct\u00fcphaneyi projenize kurman\u0131z gerekir. Global olarak kaydettikten sonra, herhangi bir Vue bile\u015feninde ba\u011flant\u0131 durumunu \u015fu \u015fekilde kontrol edebilirsiniz:<\/p>\n Ba\u011flant\u0131 Durumu: {{ $offline.online ? 'Aktif' : 'Kesik' }}<\/p>\n v-offline<\/code> k\u00fct\u00fcphanesini derinlemesine inceleyece\u011fiz. v-offline<\/code>‘\u0131n ne oldu\u011funu, neden gerekli oldu\u011funu, nas\u0131l kuruldu\u011funu ve geli\u015fmi\u015f kullan\u0131m senaryolar\u0131yla birlikte en iyi uygulamalar\u0131n\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftiricilere ba\u011flant\u0131 durumunu proaktif bir \u015fekilde y\u00f6neterek daha sa\u011flam ve kullan\u0131c\u0131 dostu Vue.js uygulamalar\u0131 olu\u015fturma konusunda rehberlik etmektir.<\/p>\n\u00c7evrimi\u00e7i\/\u00c7evrimd\u0131\u015f\u0131 Durum Tespiti Neden Kritik?<\/h3>\n
Kullan\u0131c\u0131 Deneyimi (UX)<\/h4>\n
Veri B\u00fct\u00fcnl\u00fc\u011f\u00fc ve Senkronizasyon<\/h4>\n
Hata Y\u00f6netimi ve Kaynak Optimizasyonu<\/h4>\n
Offline-First Yakla\u015f\u0131m\u0131 ve PWA’lar<\/h4>\n
v-offline<\/code> gibi k\u00fct\u00fcphaneler, bir uygulaman\u0131n \u00e7evrimd\u0131\u015f\u0131 oldu\u011funu tespit ederek, Service Worker’lar arac\u0131l\u0131\u011f\u0131yla \u00f6nbelle\u011fe al\u0131nm\u0131\u015f i\u00e7erikleri sunma ve \u00e7evrimd\u0131\u015f\u0131 modda \u00e7al\u0131\u015fabilen \u00f6zelliklere y\u00f6nlendirme gibi offline-first stratejilerinin uygulanmas\u0131na olanak tan\u0131r.<\/p>\nTaray\u0131c\u0131lar\u0131n Dahili Mekanizmalar\u0131 ve S\u0131n\u0131rlamalar\u0131<\/h3>\n
navigator.onLine<\/code> \u00f6zelli\u011fi ve online<\/code>\/offline<\/code> olaylar\u0131d\u0131r.<\/p>\nnavigator.onLine<\/h4>\n
navigator.onLine<\/code> \u00f6zelli\u011fi, taray\u0131c\u0131n\u0131n \u00e7evrimi\u00e7i olup olmad\u0131\u011f\u0131n\u0131 g\u00f6steren basit bir boolean de\u011feridir. true<\/code> ise \u00e7evrimi\u00e7i, false<\/code> ise \u00e7evrimd\u0131\u015f\u0131 demektir.<\/p>\nif (navigator.onLine) {\n console.log(\"Ba\u011fl\u0131s\u0131n\u0131z!\");\n} else {\n console.log(\"\u00c7evrimd\u0131\u015f\u0131s\u0131n\u0131z!\");\n}<\/code><\/pre>\nnavigator.onLine<\/code>‘\u0131n \u00f6nemli bir s\u0131n\u0131rlamas\u0131 vard\u0131r: Yaln\u0131zca taray\u0131c\u0131n\u0131n yerel a\u011fa ba\u011fl\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. Yani, cihaz\u0131n\u0131z bir Wi-Fi a\u011f\u0131na ba\u011fl\u0131 olsa bile (\u00f6rne\u011fin, router’\u0131n\u0131z\u0131n internet ba\u011flant\u0131s\u0131 yoksa veya bir captive portal arkas\u0131ndaysan\u0131z), navigator.onLine<\/code> yine de true<\/code> d\u00f6nebilir. Bu durum, uygulaman\u0131z\u0131n ger\u00e7ek internet eri\u015fimi olmad\u0131\u011f\u0131 halde \u00e7evrimi\u00e7i oldu\u011funu d\u00fc\u015f\u00fcnmesine neden olabilir, bu da hatal\u0131 davran\u0131\u015flara ve k\u00f6t\u00fc kullan\u0131c\u0131 deneyimine yol a\u00e7ar.<\/p>\nonline ve offline Olaylar\u0131<\/h4>\n
online<\/code> ve offline<\/code> olaylar\u0131n\u0131 tetikler. Bu olaylar, ba\u011flant\u0131 durumu de\u011fi\u015fti\u011finde dinleyiciler arac\u0131l\u0131\u011f\u0131yla yakalanabilir.<\/p>\nwindow.addEventListener('online', () => {\n console.log('\u0130nternet ba\u011flant\u0131s\u0131 geri geldi.');\n});\n\nwindow.addEventListener('offline', () => {\n console.log('\u0130nternet ba\u011flant\u0131s\u0131 kesildi.');\n});<\/code><\/pre>\nnavigator.onLine<\/code> ile ayn\u0131 s\u0131n\u0131rlamalara sahiptir. Sadece yerel a\u011f ba\u011flant\u0131s\u0131n\u0131n de\u011fi\u015fti\u011fini bildirirler, ger\u00e7ek internet eri\u015fiminin olup olmad\u0131\u011f\u0131n\u0131 garanti etmezler. \u00d6zellikle modern a\u011f yap\u0131lar\u0131nda (proxy sunucular, VPN’ler, captive portal’lar) bu mekanizmalar yetersiz kalabilir ve uygulaman\u0131n yan\u0131lt\u0131c\u0131 bilgilere dayanarak hareket etmesine neden olabilir. Bu nedenle, daha g\u00fcvenilir bir \u00e7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durum tespiti i\u00e7in ek bir mekanizmaya ihtiya\u00e7 duyulur. \u0130\u015fte bu noktada v-offline<\/code> gibi k\u00fct\u00fcphaneler devreye girer.<\/p>\nv-offline K\u00fct\u00fcphanesine Derinlemesine Bak\u0131\u015f<\/h3>\n
v-offline<\/code>, Vue.js uygulamalar\u0131 i\u00e7in tasarlanm\u0131\u015f, reaktif bir \u00e7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durum tespit k\u00fct\u00fcphanesidir. Taray\u0131c\u0131lar\u0131n yerle\u015fik navigator.onLine<\/code> \u00f6zelli\u011finin s\u0131n\u0131rlamalar\u0131n\u0131 a\u015farak, daha g\u00fcvenilir bir ba\u011flant\u0131 durumu tespiti sunar.<\/p>\nNedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
v-offline<\/code>, temel olarak belirli bir URL’ye (genellikle k\u00fc\u00e7\u00fck ve h\u0131zl\u0131 yan\u0131t veren bir dosya veya API endpoint’i) d\u00fczenli aral\u0131klarla ping iste\u011fi g\u00f6ndererek \u00e7al\u0131\u015f\u0131r. Bu ping iste\u011fi ba\u015far\u0131l\u0131 olursa, uygulama \u00e7evrimi\u00e7i kabul edilir; ba\u015far\u0131s\u0131z olursa (timeout veya a\u011f hatas\u0131), \u00e7evrimd\u0131\u015f\u0131 kabul edilir. Bu y\u00f6ntem, navigator.onLine<\/code>‘\u0131n aksine, cihaz\u0131n sadece bir a\u011fa ba\u011fl\u0131 olup olmad\u0131\u011f\u0131n\u0131 de\u011fil, ger\u00e7ek internet eri\u015fiminin olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\nAvantajlar\u0131<\/h4>\n
\n* G\u00fcvenilirlik:<\/strong> Belirlenen bir URL’ye ping atma mekanizmas\u0131 sayesinde, taray\u0131c\u0131n\u0131n yerle\u015fik \u00f6zelliklerinden daha do\u011fru bir internet ba\u011flant\u0131s\u0131 tespiti sa\u011flar.
\n* Kolay Kullan\u0131m:<\/strong> Vue bile\u015feni, direktifi veya plugin olarak kolayca entegre edilebilir.
\n* Yap\u0131land\u0131r\u0131labilirlik:<\/strong> Ping URL’si, zaman a\u015f\u0131m\u0131 (timeout) s\u00fcresi ve ping aral\u0131\u011f\u0131 gibi \u00f6nemli parametreler yap\u0131land\u0131r\u0131labilir.
\n* Esneklik:<\/strong> Uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde, ba\u011flant\u0131 durumuna g\u00f6re farkl\u0131 davran\u0131\u015flar sergilemek i\u00e7in kullan\u0131labilir.<\/p>\nv-offline Kurulumu ve Temel Kullan\u0131m\u0131<\/h3>\n
v-offline<\/code> k\u00fct\u00fcphanesini Vue.js projenize dahil etmek olduk\u00e7a basittir.<\/p>\nKurulum<\/h4>\n
npm<\/code> veya yarn<\/code> kullanabilirsiniz:<\/p>\nnpm install v-offline\nveya<\/h2>\nyarn add v-offline<\/code><\/pre>\n
Global Kay\u0131t (Plugin olarak)<\/h4>\n
v-offline<\/code>‘\u0131 uygulaman\u0131z\u0131n her yerinden eri\u015filebilen global bir plugin olarak kaydetmek, genellikle en pratik yakla\u015f\u0131md\u0131r. Bu sayede, herhangi bir Vue bile\u015feninde this.$offline.online<\/code> veya this.$offline.offline<\/code> \u00f6zelliklerine eri\u015febilirsiniz.<\/p>\nmain.js<\/code> veya main.ts<\/code> dosyan\u0131zda:<\/p>\nimport { createApp } from 'vue'; \/\/ Vue 3 i\u00e7in\n\/\/ import Vue from 'vue'; \/\/ Vue 2 i\u00e7in\nimport App from '.\/App.vue';\nimport VOffline from 'v-offline';\n\nconst app = createApp(App); \/\/ Vue 3 i\u00e7in\n\n\/\/ VOffline'\u0131 global bir plugin olarak kaydet\napp.use(VOffline, {\n \/\/ Opsiyonel yap\u0131land\u0131rma se\u00e7enekleri\n \/\/ pingUrl: 'https:\/\/www.google.com\/favicon.ico',\n \/\/ pingTimeout: 5000,\n \/\/ interval: 5000,\n \/\/ debounceDelay: 100\n});\n\napp.mount('#app');\n\n\/*\n\/\/ Vue 2 i\u00e7in:\nVue.use(VOffline, {\n \/\/ Opsiyonel yap\u0131land\u0131rma se\u00e7enekleri\n});\nnew Vue({\n render: h => h(App),\n}).$mount('#app');\n*\/<\/code><\/pre>\n\n \u00c7evrimi\u00e7isiniz!<\/h3>\n
\u00c7evrimd\u0131\u015f\u0131s\u0131n\u0131z!<\/h3>\n