Bu codelab'de, Express sunum çerçevesini çalıştırarak Node.js tabanlı bir web sunucusu tarafından döndürülen HTTP önbelleğe alma üst bilgilerini nasıl değiştireceğiniz gösterilmektedir. Burada, Chrome Geliştirici Araçları'ndaki Ağ panelini kullanarak, beklediğiniz önbelleğe alma davranışının gerçekten uygulandığının nasıl onaylanacağı da gösterilmektedir.
Örnek projeyi tanıyın
Örnek projede çalışacağınız anahtar dosyalar şunlardır:
server.js
, web uygulamasının içeriğini sunan Node.js kodunu içerir. HTTP isteklerini ve yanıtlarını işlemek için Express'i kullanır. Özellikleexpress.static()
, ortak dizindeki tüm yerel dosyaları sunmak için kullanılır. Bu nedenle,serve-static
belgeleri faydalı olacaktır.public/index.html
, web uygulamasının HTML'sidir. Çoğu HTML dosyası gibi bu dosya da URL'sinin bir parçası olarak herhangi bir sürüm oluşturma bilgisi içermez.public/app.15261a07.js
vepublic/style.391484cf.css
, web uygulamasının JavaScript ve CSS öğeleridir. Bu dosyaların her birinin URL'lerinde, içeriklerine karşılık gelen bir karma değer bulunur.index.html
, hangi sürüm oluşturulmuş URL'nin yükleneceğini izlemekten sorumludur.
HTML'miz için önbelleğe alma üst bilgilerini yapılandırın
Sürüm oluşturma bilgisi içermeyen URL isteklerine yanıt verirken, yanıt mesajlarınıza Cache-Control: no-cache
eklediğinizden emin olun. Bununla birlikte, iki ek yanıt başlığından birini ayarlamanız önerilir: Last-Modified
veya ETag
. index.html
bu kategoriye girer. Bunu iki adıma bölebilirsiniz.
Öncelikle, Last-Modified
ve ETag
başlıkları etag
ve lastModified
yapılandırma seçenekleri tarafından kontrol edilir. Bu seçeneklerin ikisi de aslında tüm HTTP yanıtları için varsayılan olarak true
değerine ayarlıdır. Dolayısıyla bu geçerli kurulumda, bu davranışı elde etmek için etkinleştirmeniz gerekmez. Ancak yapılandırmanızda yine de açık olabilirsiniz.
İkinci olarak, Cache-Control: no-cache
üst bilgisini yalnızca HTML dokümanlarınız (bu örnekte index.html
) için eklemeniz gerekir. Bu üst bilgiyi koşullu olarak ayarlamanın en kolay yolu, özel bir setHeaders function
yazmak ve bu şekilde gelen isteğin bir HTML dokümanı için olup olmadığını kontrol etmektir.
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
server.js
içindeki statik sunum yapılandırması şu şekilde başlar:
app.use(express.static('public'));
- Yukarıda açıklanan değişiklikleri yaptığınızda, aşağıdaki gibi bir sonuç elde edersiniz:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
}
},
}));
Sürümü tutulan URL'ler için önbelleğe alma üst bilgilerini yapılandırma
"Parmak izi" veya sürüm oluşturma bilgilerini içeren ve içeriği hiçbir zaman değiştirilmesi amaçlanmayan URL isteklerine yanıt verirken yanıtlarınıza Cache-Control: max-age=31536000
ekleyin. app.15261a07.js
ve style.391484cf.css
bu kategoriye girer.
Son adımda kullanılan setHeaders function
dan yola çıkarak, belirli bir isteğin sürüm oluşturulmuş bir URL için olup olmadığını kontrol etmek için ilave mantık ekleyebilirsiniz. Böyle bir durumda Cache-Control:
max-age=31536000
üst bilgisini ekleyin.
Bunu yapmanın en sağlam yolu, istenen öğenin karmaların yer aldığını bildiğiniz belirli bir kalıpla eşleşip eşleşmediğini görmek için normal ifade kullanmaktır. Bu örnek projede, her zaman 0-9 arasındaki rakam grubundan sekiz karakter ve a-f arasındaki küçük harflerden (ör. onaltılık karakterler) alınır. Karma değer, her iki tarafta bir .
karakteriyle ayrılır.
Bu genel kurallarla eşleşen bir normal ifade, new RegExp('\\.[0-9a-f]{8}\\.')
olarak ifade edilebilir.
setHeaders
işlevini aşağıdaki gibi değiştirin:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
} else if (hashRegExp.test(path)) {
// If the RegExp matched, then we have a versioned URL.
res.setHeader('Cache-Control', 'max-age=31536000');
}
},
}));
Geliştirici Araçları'nı kullanarak yeni davranışı onaylayın
Statik dosya sunucusunda yapılan değişiklikler yapıldıktan sonra, Geliştirici Araçları Ağ paneli açık olarak yayındaki uygulamayı önizleyerek doğru başlıkların ayarlandığından emin olabilirsiniz.
Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
Sütun başlığını sağ tıklayarak en alakalı bilgileri eklemek için Ağ panelinde görüntülenen sütunları özelleştirin:
Burada, dikkat etmeniz gereken sütunlar şunlardır: Name
, Status
, Cache-Control
,
ETag
ve Last-Modified
.
- DevTools penceresi açıkken sayfayı yenileyin.
Sayfa yüklendikten sonra, Ağ panelinde aşağıdakine benzer girişler görmeniz gerekir:
İlk satır, gittiğiniz HTML dokümanı içindir. Bu, Cache-Control: no-cache
ile düzgün bir şekilde yayınlanır. Bu isteğin HTTP yanıt durumu 304
şeklindedir. Bu, tarayıcının önbelleğe alınmış HTML'yi hemen kullanmayacağını bildiği, bunun yerine önbelleğindeki HTML'de herhangi bir güncelleme olup olmadığını görmek için Last-Modified
ve ETag
bilgilerini kullanarak web sunucusuna bir HTTP isteği yaptığı anlamına gelir. HTTP 304 yanıtı, güncellenmiş HTML olmadığını belirtir.
Sonraki iki satır, sürümü olan JavaScript ve CSS öğeleri içindir. Bunların Cache-Control: max-age=31536000
ile sunulduğunu ve her birinin HTTP durumunun 200
olduğunu görmeniz gerekir.
Kullanılan yapılandırma nedeniyle, Node.js sunucusuna gerçekten bir istek gönderilmez ve girişi tıkladığınızda yanıtın "(disk önbelleğinden)" geldiği bilgisi de dahil olmak üzere ek ayrıntılar gösterilir.
ETag ve Last-Modified sütunlarının gerçek değerleri çok önemli değildir. Önemli olan, ayarlandıklarından emin olmaktır.
Konuyu özetleme
Bu codelab'deki adımları tamamladıktan sonra, HTTP önbelleğinin en iyi şekilde kullanılması için Node.js tabanlı bir web sunucusunda, Express kullanarak HTTP yanıt başlıklarını nasıl yapılandıracağınızı öğrendiniz. Ayrıca, Chrome Geliştirici Araçları'ndaki Ağ paneli aracılığıyla, beklenen önbelleğe alma davranışının kullanılmakta olduğunu onaylamanız için gereken adımları da uygulayabilirsiniz.