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

Öğeleri bir hizmet çalışanıyla önbelleğe almak, tekrarlanan ziyaretleri hızlandırabilir ve çevrimdışı destek sağlayabilir. Workbox bu işlemi kolaylaştırır ve Create React App'e varsayılan olarak dahil edilir.

Houssein Djirdeh

Dikkat: Glitch barındırma hizmetini sonlandırdığı için bu sayfadaki bir veya daha fazla demo artık çalışmıyor.

Not: Hizmet çalışanları ve önbelleğe alma ile ilgili temel fikri henüz anlamadıysanız önce workbox-precaching modül kılavuzunu okuyun.

Workbox, her derlemede uygulamanızdaki tüm statik öğeleri ö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ğinde depolamanıza (önceden önbelleğe alma) olanak tanır. 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. Bu sayede, tekrar eden ziyaretlerde sayfalar daha hızlı yüklenir ve kullanıcı çevrimdışıyken içerik gösterilebilir.

CRA'da Workbox

Workbox, hizmet çalışanları oluşturmanıza ve yönetmenize olanak tanıyan bir araç koleksiyonudur. CRA'da workbox-webpack-plugin, üretim derlemesine zaten 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();

Aşağıda, bu dosya aracılığıyla hizmet çalışanının etkinleştirildiği, CRA ile oluşturulmuş bir React uygulaması örneği verilmiştir:

Hangi öğelerin önbelleğe alındığını görmek için:

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a basın.
• Geliştirici Araçları'nı açmak için `Ctrl+Ü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 boyutunun gösterilmesi yerine bu kaynakların hizmet çalışanından alındığını belirten bir (from ServiceWorker) mesajının gösterildiğini fark edeceksiniz.

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

1. Geliştirici Araçları'ndaki Ağ sekmesinde, çevrimdışı deneyimi simüle etmek için Çevrimdışı onay kutusunu etkinleştirin.
2. Uygulamayı yeniden yükleyin.

Uygulama, ağ bağlantısı olmasa bile tamamen 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 önbellek'tir. Bu stratejide tüm statik öğeler hizmet çalışanı önbelleğinden getirilir ve bu işlem başarısız olursa (örneğin, kaynak önbelleğe alınmamışsa) ağ isteği yapılır. Bu sayede, kullanıcılar tamamen çevrimdışı durumdayken bile içerik sunulabilir.

Workbox, statik ve dinamik kaynakları önbelleğe almak için farklı stratejiler ve yaklaşımlar tanımlama desteği sağlasa da CRA'daki varsayılan yapılandırma, tamamen çıkarılmadığı sürece değiştirilemez veya üzerine yazılamaz. Ancak harici bir workbox.config.js dosyası için destek eklemeyi araştıran açık bir teklif vardır. Bu sayede geliştiriciler, tek bir workbox.config.js dosyası oluşturarak varsayılan ayarları geçersiz kılabilir.

Not: Hizmet çalışanlarının kullanabileceği tüm önbelleğe alma stratejileri hakkında daha fazla bilgi için Çevrimdışı Yemek Kitabı'na göz atın.

Önce önbellek stratejisini kullanma

Önce 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:

• 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 olmalı mı?

CRA belgeleri bu noktaları ve daha fazlasını ayrıntılı olarak açıklar.

Sonuç

Uygulamanızdaki önemli kaynakları önceden önbelleğe almak için bir hizmet çalışanı kullanarak kullanıcılarınıza daha hızlı bir deneyim ve çevrimdışı destek sunun.

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