Görev Başlıyor ("Neden")
Şunu hayal edin: Masaüstünde ve mobilde harika görünen şık bir web uygulaması gönderdiniz. Kullanıcılar kullanıcı arayüzünü seviyor ancak bir metro tüneline ya da zayıf Wi-Fi bağlantısına sahip bir kafeye adım attıkları anda her şey durma noktasına geliyor. Ben de oradaydım; hüsrana uğramış kullanıcıların yenilemeye tekrar tekrar dokunmalarını izlerken sessizce onlara bir "çevrimdışı devam et" düğmesi verebilmeyi dilerdim. Kaydetme noktalarının yalnızca elektrik prizinin yanında durduğunuzda işe yaradığı bir video oyunu oynamaya çalışmak gibiydi. Eğlenceli değil.
O an benim ejderhamdı. Kullanıcıların çevrimiçi olsalar da olmasalar da uygulamayla etkileşimde bulunmaya devam edebilmelerini (makaleleri okuyabilmelerini, formları doldurabilmelerini, hatta veri gönderebilmelerini) istedim. Progresif Web Uygulamaları (PWA'lar) ve hizmet çalışanları hakkındaki söylentileri duymuştum, ancak eğitimler eski parşömenlere benziyordu: çok fazla teori, çok az "işte bunu gerçekte nasıl çalıştıracağınız". Ben de klavyemi kaptım, demli bir kahve hazırladım ve web uygulamamı çevrimdışı ilk kahramana dönüştürme arayışına çıktım.
Ortaya çıkardığım hazine beklediğimden daha basitti: Hizmet çalışanı, uygulamanız ile ağ arasında yer alan bir komut dosyasından ibarettir ve neye hizmet edeceğine karar verir. Bunu, her getirme isteğini engelleyen, önbelleğe alınmış bir kopyanın olup olmadığını kontrol eden ve yoksa ağa giden (veya kullanışlı bir çevrimdışı sayfa gösteren) güvenilir bir yardımcı olarak düşünün. Bunu bir kez kavradığınızda, gerisi sadece birkaç geri aramayı ayarlamaktır.
Gelecekte Ne Bekleniyor?
Sihir üç adımda gerçekleşir:
Önemli Gelişmeler
Uygulama yüklendiğinde hizmet çalışanını kaydedin. Yükleyin ve temel varlıkları (HTML, CSS, JS, belki birkaç resim) önceden önbelleğe alın. Getirme olaylarını yönetin; önce ağı deneyin, önbelleğe geri dönün ve isteğe bağlı olarak önbelleği arka planda güncelleyin.
Wi-Fi bağlantımı kasıtlı olarak kapatırken bir hizmet çalışanının index.html dosyamı önbellekten sunduğunu ilk gördüğümde, bir hile kodunun kilidini açtığımı hissettim. Uygulama çalışmaya devam etti, döndürücü hiç görünmedi ve kullanıcılar kaydırmaya devam edebildi. Saf bir mutluluktu.
Nasıl Önlem Alınmalı?
Gücü Kullanmak (Kod ve Örnekler)
Ellerimizi kirletelim. Aşağıda bir önceki kod parçası (çevrimdışı çalışan sade bir React uygulaması) ve onu dayanıklı kılan bir hizmet çalışanının bulunduğu sonraki sürüm bulunmaktadır.
Önce: Kırılgan Uygulama
// src/index.js (hizmet çalışanı yok) React'ı 'reaksiyon'dan içe aktarın; ReactDOM'u ' react-dom/client' dosyasından içe aktarın; Uygulamayı ' ./App' dosyasından içe aktarın; const root = ReactDOM. createRoot ( document . getElementById ( ' root ' )); kök . render ( < React . StrictMode >< Uygulama />< /React.StrictMode> ) ; Tam ekran moduna girin Tam ekran modundan çıkın
DevTools → Uygulama → Hizmet Çalışanları'nı açarsanız, "Hiçbir hizmet çalışanı kayıtlı değil" ifadesini görürsünüz. Ağı kapatın, yenileyin ve korkunç dinozor sayfasını (veya boş bir ekranı) görün. İstediğimiz deneyim değil.
Sonra: Çevrimdışı Yardımcıyı Ekleme
Teknik Analiz
Öncelikle ortak klasörde service-worker.js (veya onu kopyalayan bir derleme aracı kullanıyorsanız src) adlı bir dosya oluşturun. İşte basit, üretime hazır bir versiyon:
// public/service-worker.js const CACHE_NAME = ' my-pwa-v1' ; const PRECACHE_URLS = [ ' / ' , ' /index.html ' , ' /static/js/main.js ' , ' /static/css/main.css ' , ' /manifest.json ' , // diğer kritik varlıkları ekleyin (simgeler, yazı tipleri vb.) ]; // Kurulum: temel varlıkları önbelleğe alın. addEventListener ( ' install ' , event => { event . waitUntil ( önbellekler . open ( CACHE_NAME ) . Then ( önbellek => önbellek . addAll ( PRECACHE_URLS )) . Then (() => self . skipWaiting ()) ); }); // Etkinleştir: eski önbellekleri kendi kendine temizle. addEventListener ( ' active ' , event => { event . waitUntil ( önbellekler . anahtarlar (). ardından ( anahtarlar => Promise . all ( anahtarlar . filtre ( anahtar => anahtar !== CACHE_NAME ) . harita ( anahtar => önbellekler . delete ( anahtar )) ) ).then (() => self . clientlar . iddia ()) ); }); // Getirme: önbellek geri dönüşü ile önce ağda öz . addEventListener ( ' fetch ' , event => { const { request } = event ; // CORS sorunlarını önlemek için çapraz köken isteklerini (analitik gibi) atlayın if ( ! request . url .startsWith ( self .location . Origin )) return ; event . answerWith ( fetch ( request ) . Then ( networkResp => { // İsteğe bağlı: önbellekte yeni bir kopya bulundurun const copy = networkResp . clone (); önbellekler . open ( CACHE_NAME ) sonra ( önbellek => önbellek . put ( request ; copy )); catch (() => önbellekler . match ( request )) // önbelleğe geri dönüş ardından ( ' Çevrimdışı geri dönüş ' , { status : 503 , statusText : ' Hizmet Kullanılamıyor ' })) ); Tam ekran moduna girin Tam ekran modundan çıkın
Şimdi bu işçiyi kaydetmemiz gerekiyor. uygulama yüklenir. Bunu giriş noktanızın üst kısmına yakın bir yere ekleyin (içe aktarmadan sonra):
Detaylar ve Etkileri
// src/index.js (kayıtlı) if (navigatörde 'serviceWorker') { window. addEventListener ( ' load ' , () => { navigator . serviceWorker . Register ( ' /service-worker.js ' ) . Then ( reg => console . log ( ' SW kayıtlı: ' , reg .scope )) . catch ( err => console . error ( ' SW kaydı başarısız oldu: ' , err )); }); } Tam ekran moduna girin Tam ekran modundan çıkın
Sistem Güvenliği
İşte bu! Uygulamanızı oluşturun (CRA, Vite vb. kullanıyorsanız npm run build) ve onu HTTPS üzerinden sunun (hizmet çalışanları yalnızca localhost veya güvenli kaynaklarda çalışır). Uygulamayı açın, DevTools → Uygulama → Hizmet Çalışanları'nı açın; çalışanınızın etkinleştirildiğini görmelisiniz. Şimdi ağ çevrimdışı sekmesini değiştirin ve yenileyin; işte! Uygulamanız önbellekten yüklenir ve sonraki getirme girişimleri, önbelleğe alınan yanıtlara sorunsuz bir şekilde geri döner.
Kaçınılması Gereken Yaygın Tuzaklar
Sonuç ve Değerlendirme
Her şeyi ayrım gözetmeksizin önbelleğe alma – Her API isteğini önbelleğe alırsanız, eski verileri sonsuza kadar sunarsınız. Seçici olun: statik varlıkları önbelleğe alın, ancak API çağrılarının önce ağ üzerinden gitmesine izin verin (veya biraz eski verileri tolere edebiliyorsanız, eskimişken yeniden doğrulama stratejisi kullanın). Önbellek sürümünü güncellemeyi unutmak – Önceden önbelleğe alınmış listenizde bir şeyi mi değiştirdiniz? CACHE_NAME'i artırın (örneğin, my-pwa-v2 ). Aksi takdirde eski hizmet çalışanı eski varlıkları sunmaya devam edecek ve kullanıcıların güncellemelerinin neden gösterilmediği konusunda kafası karışacaktır. Üretimde HTTPS'nin ihmal edilmesi – Hizmet çalışanları, güvenli olmayan kaynaklara (localhost hariç) kaydolmayı reddeder. Düz bir HTTP sitesine dağıtım yaparsanız sessiz bir hatayla karşılaşırsınız. Let's Encrypt'ten ücretsiz bir sertifika alın veya size kutudan çıktığı gibi HTTPS sağlayan Vercel/Netlify gibi bir platform kullanın.
Bu Yeni Güç Neden Önemli?
Artık uygulamanız ölü bir bölgeden kurtulabildiğine göre, tamamen yeni bir kullanıcı deneyimi düzeyinin kilidini açtınız. Kullanıcıların uçuşları sırasında makaleleri takip etmelerine olanak tanıyan bir haber okuyucusu, yeraltındayken yapılacaklar eklemelerine olanak tanıyan bir görev yöneticisi veya bağlantı kesildiğinde bile öğeleri saklayan bir alışveriş sepeti hayal edin. Uygulama güvenilir hissettirir ve güvenilirlik güven oluşturur.
İş açısından bakıldığında, önce çevrimdışı olan PWA'lar, kesintili ağların neden olduğu hemen çıkma oranlarını azaltır ve bağlantının düzensiz olduğu gelişmekte olan pazarlarda etkileşimi artırabilir. Ayrıca klasik PWA avantajlarından da yararlanırsınız: yüklenebilir ana ekran simgeleri, açılış ekranları ve anında bildirimler; üstelik hepsi ayrı bir yerel uygulamaya ihtiyaç duymadan.
En iyi kısım? Yeni bir dil öğrenmenize veya kullanıcı arayüzünüzü yeniden yazmanıza gerek yoktu. Az önce mütevazı bir hizmet çalışanı ve bir kayıt pasajı eklediniz. Bu, bir oyunda zorlu bir patronu atlamanıza olanak tanıyan gizli bir kısayol keşfetmeye benziyor; ancak patronun "güvenilmez bir ağ" olması ve kısayolun birkaç satır JavaScript olması dışında.
Kendi çevrimdışı ilk görevinize başlamaya hazır mısınız? Yukarıdaki hizmet çalışanı pasajını alın, projenize bırakın ve önbellek stratejileriyle oynayın. API çağrıları için eskimişken yeniden doğrulama yaklaşımını deneyin veya ağ geri dönene kadar form gönderimlerini ertelemek için arka planda senkronizasyonu deneyin.
Uzmanların Görüşleri
İlk önce hangi özelliği çevrimdışı hale getireceksiniz? Deneylerinizi, sorunlarınızı ve zaferlerinizi yorumlarda paylaşın; ne yapacağınızı görmek için sabırsızlanıyorum! 🚀
