nginx cached index.html paksa muat ulang

Question

Selama migrasi server, konfigurasi nginx baru kehilangan arahan kontrol cache. Oleh karena itu, kami berakhir dengan cache index.htmlyang sangat buruk untuk SPA kami yang tidak disegarkan lagi jika kami menerapkan kode baru. Kami membutuhkan index.html agar tidak di-cache.

Ini adalah konfigurasi nginx (buruk) kami yang online beberapa hari:

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Kami memperbaiki konfigurasi kami:

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

PERTANYAAN

Klien yang telah mengunjungi halaman web kami dalam beberapa hari terakhir menyimpan cache index.html lama. Bagaimana kita bisa memaksa browser mereka untuk melepaskan cache mereka index.html?

Answer 1

Tidak ada cara mengatur ulang cache browser secara manual di sisi pengguna (browser) sementara klien tidak meminta ke server untuk konten baru. Dalam hal ini dapat berguna akses ke skrip apa pun, yang SPA Anda unduh tanpa cache. Dalam hal ini Anda dapat mengubah skrip ini dan menjalankan halaman pemuatan ulang paksa (tetapi hati-hati - Anda memerlukan tanda apa pun untuk mencegah pemuatan ulang paksa secara permanen setelah setiap pemuatan halaman). Misalnya, jika Anda memiliki GTM di situs - ini dapat membantu.

UPD: Saya bukan spesialis js, tetapi Anda perlu menambahkan tag GTM pada semua halaman seperti ini js-script:

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

was_reloaded = getCookie('was_reloaded')
alert(was_reloaded)
if (was_reloaded != 'yes') {
        document.cookie = "was_reloaded=yes; path=/; max-age=3600;"
    location.reload();
} }