Mengonfigurasi perilaku caching HTTP

Jeff Posnick

Codelab ini menunjukkan cara mengubah header penyimpanan cache HTTP yang ditampilkan oleh Server web berbasis Node.js, yang menjalankan layanan Express Google Workspace for Education. Kode ini juga akan menunjukkan cara mengonfirmasi bahwa perilaku {i>caching<i} yang Anda harapkan diterapkan, menggunakan panel Jaringan di DevTools Chrome.

Membiasakan diri dengan contoh proyek

Berikut adalah file utama yang akan Anda kerjakan dalam contoh project:

  • server.js berisi kode Node.js yang melayani aplikasi web saat ini. Menggunakan Express untuk menangani permintaan HTTP beserta responsnya. Secara khusus, express.static() digunakan untuk menyalurkan semua file lokal di direktori publik, sehingga serve-static dokumentasi akan berguna.
  • public/index.html adalah HTML aplikasi web. Seperti kebanyakan file HTML, berisi informasi pembuatan versi sebagai bagian dari URL-nya.
  • public/app.15261a07.js dan public/style.391484cf.css adalah JavaScript aplikasi web dan aset CSS. Setiap file ini berisi {i> hash <i}di URL mereka, sesuai dengan kontennya. index.html bertanggung jawab untuk menjaga melacak URL berversi khusus yang akan dimuat.

Mengonfigurasi header penyimpanan dalam cache untuk HTML kita

Saat merespons permintaan untuk URL yang tidak berisi info pembuatan versi, pastikan pastikan Anda menambahkan Cache-Control: no-cache ke pesan respons. Bersama dengan bahwa, pengaturan salah satu dari dua {i>header <i}respons tambahan adalah hal yang direkomendasikan: Last-Modified atau ETag. Tujuan index.html termasuk dalam kategori ini. Anda dapat membaginya menjadi dua langkah.

Pertama, header Last-Modified dan ETag dikontrol oleh etag dan lastModified opsi konfigurasi. Kedua opsi ini sebenarnya ditetapkan secara default ke true untuk semua respons HTTP, jadi dalam penyiapan saat ini, Anda tidak perlu memilih ikut serta untuk mendapatkannya perilaku model. Tapi Anda bisa bersikap eksplisit dalam konfigurasi Anda.

Kedua, Anda harus dapat menambahkan header Cache-Control: no-cache, tetapi hanya untuk dokumen HTML Anda (dalam hal ini adalah index.html). Cara termudah untuk mengatur header ini secara bersyarat adalah dengan menulis {i>custom <i} setHeaders function, dan di dalamnya, periksa untuk melihat apakah permintaan masuk itu adalah untuk dokumen HTML.

  • Klik Remix to Edit agar project dapat diedit.

Konfigurasi penayangan statis di server.js dimulai sebagai berikut:

app.use(express.static('public'));
  • Buat perubahan yang dijelaskan di atas, dan Anda akan mendapatkan sesuatu yang 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) => {
    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 berversi

Saat merespons permintaan untuk URL yang berisi "sidik jari" atau informasi pembuatan versi, dan yang isinya tidak pernah dimaksudkan untuk diubah, tambahkan Cache-Control: max-age=31536000 pada respons Anda. app.15261a07.js dan style.391484cf.css termasuk dalam kategori ini.

Membangun dari setHeaders function digunakan di langkah terakhir, Anda dapat menambahkan logika tambahan untuk memeriksa apakah adalah untuk URL berversi. Jika ya, tambahkan header Cache-Control: max-age=31536000.

Cara paling ampuh untuk melakukannya adalah dengan menggunakan ekspresi reguler untuk melihat apakah aset yang diminta cocok dengan pola tertentu yang Anda mengetahui terjadinya {i>hash<i}. Dalam kasus proyek contoh ini, selalu delapan karakter yang terdiri dari himpunan angka 0–9 dan huruf kecil a–f (yaitu heksadesimal). {i>Hash <i} 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');
    }
  },
}));

Konfirmasi perilaku baru menggunakan DevTools

Dengan memodifikasi server file statis, Anda dapat memeriksa untuk membuat pastikan header kanan sedang disetel dengan melihat pratinjau aplikasi aktif dengan panel Jaringan DevTools terbuka.

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh layar penuh.

  • Sesuaikan kolom yang yang ditampilkan di panel Jaringan untuk menyertakan informasi yang paling relevan, dengan mengklik kanan {i>header <i}kolom:

Mengonfigurasi DevTools Panel jaringan.

Di sini, kolom yang harus 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 ini:

Kolom panel jaringan.

Baris pertama adalah untuk dokumen HTML yang Anda buka. Ini adalah ditayangkan dengan Cache-Control: no-cache. Status respons HTTP untuk permintaan tersebut adalah 304. Ini berarti browser tahu untuk tidak langsung menggunakan HTML yang di-cache, tetapi membuat permintaan HTTP ke server web, menggunakan Last-Modified dan ETag informasi untuk melihat apakah ada pembaruan pada HTML yang sudah ada di dalam cache-nya. Respons HTTP 304 menunjukkan bahwa tidak ada HTML yang diupdate.

Dua baris berikutnya adalah untuk aset CSS dan JavaScript berversi. Anda seharusnya melihatnya ditayangkan dengan Cache-Control: max-age=31536000, dan status HTTP untuk masing-masing adalah 200. Karena konfigurasi yang digunakan, sebenarnya tidak ada permintaan yang dibuat ke Server Node.js, dan mengklik entri akan menunjukkan detail tambahan, termasuk bahwa respons berasal "(dari cache disk)".

Status respons jaringan 200.

Nilai sebenarnya untuk kolom ETag dan Last-Modified tidak terlalu penting. Tujuan penting untuk mengkonfirmasi bahwa mereka sudah diatur.

Mengambil kesimpulan

Setelah melakukan langkah-langkah dalam codelab ini, Anda sekarang telah memahami cara mengkonfigurasi header respons HTTP di server web berbasis Node.js menggunakan Express, untuk mengoptimalkan penggunaan cache HTTP. Anda juga memiliki langkah-langkah yang perlu untuk mengonfirmasi bahwa perilaku {i>caching<i} yang diharapkan sedang digunakan, melalui panel {i>Network<i} dalam DevTools Chrome.