Öğelerin bir Service Worker ile önbelleğe alınması, tekrar eden ziyaretleri hızlandırabilir ve çevrimdışı destek sağlayabilir. Workbox bu işlemi kolaylaştırır ve Create React Uygulaması'na varsayılan olarak dahildir.
Workbox,
Tüm verileri önbelleğe alan varsayılan bir yapılandırmayla React uygulaması (CRA) oluşturun
her derlemede uygulamanızdaki statik öğelere sahip olur.
Neden yararlı?
Hizmet çalışanları, önemli kaynakları kendi önbelleğinde depolamanıza olanak tanır (önbelleğe alma) sağlar. Böylece, kullanıcı web sayfasını ikinci kez yüklediğinde bunları hizmet çalışanına istek göndermek yerine, tarayıcı tarafından ağa katılmaz. Bu, yinelenen ziyaretlerde sayfaların daha hızlı yüklenmesini sağlar. Kullanıcı çevrimdışıyken içerik gösterebilir.
CRA'daki çalışma kutusu
Workbox, hizmet oluşturmanızı ve sürdürmenizi sağlayan bir araç koleksiyonudur
birlikte çalışır. CRA'da
workbox-webpack-plugin
zaten üretim derlemesine dahildir ve yalnızca
her karede yeni bir hizmet çalışanı kaydettirmek için src/index.js dosyasını
yapı:
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 bir hizmet çalışanının etkinleştirildiği, CRA ile oluşturulmuş bir React uygulamasının örneğini aşağıda bulabilirsiniz:
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
. - 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 boyutunu göstermek yerine
bu kaynakların alındığını belirten bir (from ServiceWorker) mesajı
hizmet çalışanıdır.
Hizmet çalışanı tüm statik öğeleri önbelleğe aldığı için uygulamayı kullanmayı deneyin çevrimdışıyken:
- Geliştirici Araçları'ndaki Ağ sekmesinde bulunan Çevrimdışı onay kutusunu etkinleştirerek bir çevrimdışı deneyimi simüle eder.
- Uygulamayı yeniden yükleyin.
Uygulama, ağ bağlantısı olmadan bile tamamen aynı şekilde çalışır. bağlantı!
Önbelleğe alma stratejilerini değiştirme
CRA'da Workbox tarafından kullanılan varsayılan önbellek stratejisi önbellek odaklıdır. 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 kullanıcılar tüm içeriği eksiksiz bir şekilde kullansalar bile içeriğin kullanıcılara çevrimdışı durumu.
Workbox, farklı strateji ve yaklaşımları tanımlamak için destek sağlasa da
varsayılan yapılandırma, CRA'daki varsayılan yapılandırmada
tamamen çıkarmadığınız sürece değiştirilmez veya üzerine yazılmaz. Bununla birlikte,
teklifi aç
harici workbox.config.js dosyası için destek ekleme hakkında bilgi edinin. Bu
geliştiricilerin yalnızca bir kod oluşturarak varsayılan ayarları geçersiz kılmalarını
tek workbox.config.js dosyası.
Önbellek öncelikli stratejiyi işleme
Önce hizmet çalışanı önbelleğine güvenme ve ardından ağa geri dönme sonraki ziyaretlerde daha hızlı yüklenen siteler oluşturmak ve daha bir şekilde çevrimdışı olarak çalışıyor. Ancak bilmeniz gereken birkaç şey var. şunlar göz önünde bulundurulur:
- Service Worker'ların önbelleğe alma davranışları nasıl test edilebilir?
- Kullanıcılara reklamı incelediklerini bildiren bir mesaj önbelleğe alınmış içerik mi var?
CRA belgeleri ve daha birçok konuyu ayrıntılı olarak açıklıyor.
Sonuç
Uygulamanızdaki önemli kaynakları önbelleğe almak için hizmet çalışanı kullanarak kullanıcılarınıza daha hızlı bir deneyim ve çevrimdışı destek sunar.
- CRA kullanıyorsanız önceden yapılandırılmış hizmet çalışanını şurada etkinleştirin:
src/index.js - React uygulaması derlemek için CRA kullanmıyorsanız
Çalışma Kutusu'nun
workbox-webpack-plugingibi sağladığı çok sayıda kitaplığı geliştirmenizi sağlar. - CRA'nın
workbox.config.jsgeçersiz kılma dosyasını ne zaman destekleyeceğini takip edin bu GitHub sorunu.