Service Worker'ları kullanarak öğeleri önbelleğe almak, yinelenen ziyaretleri hızlandırabilir ve çevrimdışı destek sağlayabilir. Çalışma kutusu bunu kolaylaştırır. Varsayılan olarak Create React Uygulaması'na dahildir.
Workbox
, her derlemede uygulamanızdaki tüm statik öğeleri önbelleğe alan varsayılan bir yapılandırmaya sahip olan Create React App (CRA) uygulamasına sahiptir.
![Service Worker ile istekler/yanıtlar](https://web.dev/static/articles/precache-with-workbox-react/image/requestsresponses-servi-008f1f41abc53.png?authuser=5&hl=tr)
Neden faydalı oldu?
Service Worker'lar, önemli kaynakları önbelleğinde depolamanıza (önbelleğe alma) olanak tanır. Böylece bir kullanıcı web sayfasını ikinci kez yüklediğinde tarayıcı, ağa istek yapmak yerine bu kaynakları Service Worker'dan alabilir. Böylece, sonraki ziyaretlerde sayfalar daha hızlı yüklenir ve kullanıcı çevrimdışıyken içerik gösterilebilir.
CRA'daki çalışma kutusu
Workbox, hizmet çalışanları oluşturup sürdürmenize olanak tanıyan bir araç koleksiyonudur. CRA'da workbox-webpack-plugin
zaten üretim derlemesine dahil edilmiştir ve her derlemede yeni bir hizmet çalışanı kaydetmek için yalnızca src/index.js
dosyasında etkinleştirilmesi gerekir:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Bu dosya üzerinden etkinleştirilmiş bir Service Worker içeren, CRA ile oluşturulmuş bir React uygulaması örneği aşağıda verilmiştir:
Hangi öğelerin önbelleğe alındığını görmek için:
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Uygulamayı yeniden yükleyin.
Size
sütununda yük boyutu yerine, bu kaynakların Service Worker'dan alındığını belirten bir (from ServiceWorker)
mesajı gösterilir.
Service Worker tüm statik öğeleri önbelleğe aldığı için uygulamayı çevrimdışıyken kullanmayı deneyin:
- Çevrimdışı deneyimi simüle etmek için Geliştirici Araçları'ndaki Ağ sekmesinde Çevrimdışı onay kutusunu etkinleştirin.
- Uygulamayı yeniden yükleyin.
Uygulama, ağ bağlantısı olmasa bile tam olarak aynı şekilde çalışır.
Önbelleğe alma stratejilerini değiştirme
CRA'da Workbox tarafından kullanılan varsayılan önbelleğe alma stratejisi önbellek öncelikli'dir. Bu stratejide tüm statik öğeler, hizmet çalışanı önbelleğinden getirilir ve bu başarısız olursa (örneğin, kaynak önbelleğe alınmazsa) ağ isteği yapılır. İçerikler tamamen çevrimdışı durumda olsalar bile kullanıcılara bu şekilde sunulmaya devam edebilir.
Workbox, statik ve dinamik kaynakları önbelleğe almak için farklı stratejiler ve yaklaşımlar tanımlama desteği sağlar. Ancak tamamen çıkarmadığınız sürece CRA'daki varsayılan yapılandırma değiştirilemez veya üzerine yazılamaz. Bununla birlikte, harici bir workbox.config.js
dosyası için destek eklemenin incelenebileceği açık bir teklif mevcuttur. Bu, geliştiricilerin yalnızca tek bir workbox.config.js
dosyası oluşturarak varsayılan ayarları geçersiz kılmasına olanak tanır.
Önbellek öncelikli strateji kullanma
Önce Service Worker önbelleğine güvenip daha sonra ağa geri dönmek, sonraki ziyaretlerde daha hızlı yüklenen ve belirli ölçüde çevrimdışı çalışan siteler oluşturmak için mükemmel bir yöntemdir. Ancak göz önünde bulundurulması gereken birkaç nokta vardır:
- Service Worker'ın önbelleğe alma davranışları nasıl test edilebilir?
- Kullanıcılara önbelleğe alınmış içeriğe baktıklarını bildiren bir mesaj olmalı mı?
Bu noktalar ve daha fazlası CRA belgelerinde ayrıntılı olarak açıklanmaktadır.
Sonuç
Kullanıcılarınıza daha hızlı bir deneyim ve çevrimdışı destek sağlamak için uygulamanızdaki önemli kaynakları önbelleğe almak üzere bir Service Worker kullanın.
- CRA kullanıyorsanız
src/index.js
ürününde önceden yapılandırılmış hizmet çalışanını etkinleştirin. - React uygulaması derlemek için CRA kullanmıyorsanız derleme işleminize Workbox'ın sağladığı
workbox-webpack-plugin
gibi kitaplıklardan birini ekleyin. - Bu GitHub sorununda CRA'nın bir
workbox.config.js
geçersiz kılma dosyasını ne zaman destekleyeceğini takip edin.