Create React Uygulamasında Workbox ile Önbelleğe Alma

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.

Houssein Djirdeh

Not: Service Worker'ların ve önbelleğe alma işlemlerinin arkasındaki temel fikri henüz anlamadıysanız, ilk olarak Workbox ile Önbelleğe Alma kılavuzunu okuyun.

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.

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:

1. Çevrimdışı deneyimi simüle etmek için Geliştirici Araçları'ndaki Ağ sekmesinde Çevrimdışı onay kutusunu etkinleştirin.
2. 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.

Not: Service Worker'ın kullanabileceği tüm önbelleğe alma stratejileri hakkında daha fazla bilgi edinmek için Çevrimdışı Tarif Defteri'ne göz atın.

Ö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.

1. CRA kullanıyorsanız src/index.js ürününde önceden yapılandırılmış hizmet çalışanını etkinleştirin.
2. React uygulaması derlemek için CRA kullanmıyorsanız derleme işleminize Workbox'ın sağladığı workbox-webpack-plugin gibi kitaplıklardan birini ekleyin.
3. Bu GitHub sorununda CRA'nın bir workbox.config.js geçersiz kılma dosyasını ne zaman destekleyeceğini takip edin.