Codelab ini menunjukkan cara mengubah header cache HTTP yang ditampilkan oleh server web berbasis Node.js, yang menjalankan framework penayangan Express. Codelab ini juga akan menunjukkan cara mengonfirmasi bahwa perilaku penyimpanan dalam cache yang Anda harapkan sebenarnya diterapkan, menggunakan panel Jaringan di DevTools Chrome.
Memahami project contoh
Berikut adalah file utama yang akan Anda gunakan dalam project contoh:
server.js
berisi kode Node.js yang menayangkan konten aplikasi web. Aplikasi ini menggunakan Express untuk menangani permintaan dan respons HTTP. Secara khusus,express.static()
digunakan untuk menayangkan semua file lokal di direktori publik, sehingga dokumentasiserve-static
akan berguna.public/index.html
adalah HTML aplikasi web. Seperti sebagian besar file HTML, file ini tidak berisi informasi pembuatan versi apa pun sebagai bagian dari URL-nya.public/app.15261a07.js
danpublic/style.391484cf.css
adalah aset JavaScript dan CSS aplikasi web. Setiap file ini berisi hash di URL-nya, yang sesuai dengan kontennya.index.html
bertanggung jawab untuk melacak URL versi tertentu yang akan dimuat.
Mengonfigurasi header penyimpanan dalam cache untuk HTML
Saat merespons permintaan untuk URL yang tidak berisi info pembuatan versi, pastikan Anda menambahkan Cache-Control: no-cache
ke pesan respons. Selain itu, sebaiknya tetapkan salah satu dari dua header respons tambahan: Last-Modified
atau ETag
. index.html
termasuk dalam kategori ini. Anda dapat membaginya menjadi dua langkah.
Pertama, header Last-Modified
dan ETag
dikontrol oleh opsi konfigurasi
etag
dan
lastModified
. Kedua opsi ini sebenarnya ditetapkan secara default ke true
untuk semua
respons HTTP, sehingga dalam penyiapan saat ini, Anda tidak harus ikut serta untuk mendapatkan
perilaku tersebut. Namun, Anda dapat membuat konfigurasi secara eksplisit.
Kedua, Anda harus dapat menambahkan header Cache-Control: no-cache
, tetapi
hanya untuk dokumen HTML (index.html
, dalam hal ini). Cara termudah untuk
menetapkan header ini secara kondisional adalah dengan menulis
setHeaders function
kustom,
dan di dalamnya, periksa untuk melihat apakah permintaan yang masuk adalah untuk dokumen HTML.
- Klik Remix to Edit untuk membuat project dapat diedit.
Konfigurasi penayangan statis di server.js
dimulai seperti ini:
app.use(express.static('public'));
- Lakukan perubahan yang dijelaskan di atas, dan Anda akan mendapatkan sesuatu yang terlihat seperti:
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');
}
},
}));
Mengonfigurasi header penyimpanan dalam cache untuk URL yang diberi versi
Saat merespons permintaan untuk URL yang berisi
"sidik jari" atau
informasi pembuatan versi, dan kontennya tidak pernah dimaksudkan untuk berubah, tambahkan
Cache-Control: max-age=31536000
ke respons Anda. app.15261a07.js
dan
style.391484cf.css
termasuk dalam kategori ini.
Berdasarkan
setHeaders function
yang digunakan pada langkah terakhir, Anda dapat menambahkan logika tambahan untuk memeriksa apakah permintaan
tertentu ditujukan untuk URL yang memiliki versi, dan jika ya, tambahkan header Cache-Control:
max-age=31536000
.
Cara paling andal untuk melakukannya adalah dengan menggunakan
ekspresi reguler
untuk melihat apakah aset yang diminta cocok dengan pola tertentu yang Anda
ketahui termasuk dalam hash. Dalam kasus project contoh ini, selalu delapan
karakter dari kumpulan angka 0–9 dan huruf kecil a–f (yaitu
karakter heksadesimal). Hash
selalu dipisahkan oleh karakter .
di kedua sisi.
Ekspresi reguler yang
cocok dengan aturan umum tersebut
dapat dinyatakan sebagai new RegExp('\\.[0-9a-f]{8}\\.')
.
- Ubah fungsi
setHeaders
agar terlihat seperti ini:
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');
}
},
}));
Mengonfirmasi perilaku baru menggunakan DevTools
Dengan modifikasi pada server file statis yang diterapkan, Anda dapat memeriksa untuk memastikan bahwa header yang tepat ditetapkan dengan melihat pratinjau aplikasi live dengan panel Jaringan DevTools terbuka.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
Sesuaikan kolom yang ditampilkan di panel Jaringan untuk menyertakan informasi yang paling relevan, dengan mengklik kanan di header kolom:
Di sini, kolom yang perlu diperhatikan adalah Name
, Status
, Cache-Control
,
ETag
, dan Last-Modified
.
- Dengan DevTools terbuka ke panel Jaringan, muat ulang halaman.
Setelah halaman dimuat, Anda akan melihat entri di panel Jaringan yang terlihat seperti berikut:
Baris pertama adalah untuk dokumen HTML yang Anda buka. Hal ini ditayangkan dengan benar
dengan Cache-Control: no-cache
. Status respons HTTP untuk permintaan tersebut
adalah 304
. Hal ini
berarti browser tahu untuk tidak langsung menggunakan HTML yang di-cache, tetapi
membuat permintaan HTTP ke server web, menggunakan informasi Last-Modified
dan ETag
untuk melihat apakah ada update pada HTML yang sudah ada di
cache-nya. Respons HTTP 304 menunjukkan bahwa tidak ada HTML yang diperbarui.
Dua baris berikutnya adalah untuk aset JavaScript dan CSS yang diberi versi. Anda akan
melihatnya ditayangkan dengan Cache-Control: max-age=31536000
, dan status HTTP untuk
masing-masing adalah 200
.
Karena konfigurasi yang digunakan, tidak ada permintaan sebenarnya yang dibuat ke
server Node.js, dan mengklik entri akan menampilkan detail tambahan,
termasuk bahwa respons berasal dari "(dari cache disk)".
Nilai sebenarnya untuk kolom ETag dan Last-Modified tidak terlalu penting. Yang penting adalah mengonfirmasi bahwa parameter tersebut telah ditetapkan.
Merangkum
Setelah mengikuti langkah-langkah dalam codelab ini, Anda kini sudah memahami cara mengonfigurasi header respons HTTP di server web berbasis Node.js menggunakan Express, untuk penggunaan cache HTTP yang optimal. Anda juga memiliki langkah-langkah yang diperlukan untuk mengonfirmasi bahwa perilaku penyimpanan dalam cache yang diharapkan sedang digunakan, melalui panel Jaringan di DevTools Chrome.