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

Öğelerin bir Service Worker ile önbelleğe alınması, tekrar eden ziyaretleri hızlandırabilir ve çevrimdışı destek sağlayabilir. Workbox bunu kolaylaştırır ve varsayılan olarak Create React App'e dahildir.

Houssein Djirdeh

Workbox, her derlemede uygulamanızdaki tüm statik öğeleri önceden önbelleğe alan varsayılan bir yapılandırmayla Create React App'e (CRA) yerleştirilmiştir.

Bu neden yararlı?

Hizmet çalışanları, önemli kaynakları önbelleğine (önbelleğe alma) kaydetmenizi sağlar. Böylece, kullanıcı web sayfasını ikinci kez yüklediğinde tarayıcı, ağa istek göndermek yerine bu kaynakları hizmet çalışanından alabilir. Böylece, tekrar eden ziyaretlerde sayfaların daha hızlı yüklenmesi ve kullanıcı çevrimdışıyken içerik göstermesi mümkün olur.

CRA'da Workbox

Workbox, hizmet çalışanları oluşturmanızı ve sürdürmenizi sağlayan bir araç koleksiyonudur. CRA'da workbox-webpack-plugin zaten üretim derlemesine dahildir ve her derlemeyle yeni bir Service Worker kaydetmek için src/index.js dosyasında etkinleştirilmesi yeterlidir:

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();

CRA ile oluşturulan ve bu dosya üzerinden etkinleştirilmiş bir hizmet işçisine sahip 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örüntüle'ye, ardından Tam Ekran'a basın.
• Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 hizmet işleyicisinden alındığını belirten bir (from ServiceWorker) mesajı gösterildiğini fark edeceksiniz.

Hizmet çalışanı tüm statik öğeleri önbelleğe aldığından, uygulamayı çevrimdışıyken kullanmayı deneyin:

1. Çevrimdışı bir deneyimi simüle etmek için DevTools'daki Ağ sekmesinde Çevrimdışı onay kutusunu etkinleştirin.
2. Uygulamayı yeniden yükleyin.

Uygulama, ağ bağlantısı olmadan 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 önce önbelleğe alma stratejisidir. Bu stratejide tüm statik öğeler hizmet çalışanı önbelleğinden alınır ve bu işlem başarısız olursa (ör. kaynak önbelleğe alınmamışsa) ağ isteği yapılır. Bu sayede, tamamen çevrimdışı durumdayken bile kullanıcılara içerik sunulmaya devam edilebilir.

Workbox, statik ve dinamik kaynakları önbelleğe almayla ilgili farklı stratejiler ve yaklaşımlar tanımlamak için destek sağlasa da CRA'daki varsayılan yapılandırma, tamamen çıkarmadığınız sürece değiştirilemez veya üzerine yazılamaz. Bununla birlikte, harici workbox.config.js dosyası için destek eklemenin keşfedileceği açık bir teklif vardır. Bu sayede geliştiriciler, tek bir workbox.config.js dosyası oluşturarak varsayılan ayarları geçersiz kılabilecek.

Önbelleğe öncelik veren stratejiyi kullanma

Öncelikle hizmet çalışanı önbelleğini kullanıp ardından ağa geri dönmek, sonraki ziyaretlerde daha hızlı yüklenen ve bir dereceye kadar çevrimdışı çalışan siteler oluşturmanın mükemmel bir yoludur. Ancak dikkate alınması gereken birkaç nokta vardır:

• Bir hizmet çalışanını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 gösterilmeli mi?

CRA dokümanlarında bu ve daha fazla nokta ayrıntılı olarak açıklanmaktadır.

Sonuç

Kullanıcılarınıza daha hızlı bir deneyimin yanı sıra çevrimdışı destek sunmak için uygulamanızdaki önemli kaynakları önceden önbelleğe almak üzere bir hizmet çalışanı kullanın.

1. CRA kullanıyorsanız önceden yapılandırılmış hizmet çalışanını src/index.js içinde etkinleştirin.
2. React uygulaması oluşturmak için CRA kullanmıyorsanız Workbox'un sunduğu birçok kitaplıktan birini (ör. workbox-webpack-plugin) derleme sürecinize ekleyin.
3. CRA'nın workbox.config.js geçersiz kılma dosyasını ne zaman destekleyeceğini bu GitHub sorununda takip edin.