Paksa browser untuk menyegarkan css, javascript, dll

Saya sedang mengembangkan situs web berdasarkan kode sumber Wordpress melalui XAMPP. Kadang-kadang saya mengubah kode CSS, skrip atau yang lainnya dan saya perhatikan browser saya membutuhkan waktu untuk menerapkan modifikasi. Ini membuat saya menggunakan beberapa browser untuk menyegarkan satu dan jika tidak menerapkan gaya baru, saya mencoba yang kedua dan selalu begini.

Adakah cara untuk menghindari masalah ini? Terkadang saya mengubah kode tanpa memperhatikan modifikasi sebelumnya.

Solusi umum

Menekan Ctrl+ F5(atau Ctrl+ Shift+ R) untuk memaksa pemuatan ulang cache. Saya yakin Mac menggunakan Cmd+ Shift+ R.

PHP

Di PHP, Anda dapat menonaktifkan cache dengan menyetel tanggal kedaluwarsa ke waktu di masa lalu dengan header:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Cache Chrome dapat dinonaktifkan dengan membuka alat pengembang dengan F12, mengklik ikon roda gigi di pojok kanan bawah dan memilih Nonaktifkan cache di dialog pengaturan, seperti ini:

^{Gambar diambil dari jawaban ini .}

Firefox

Ketik about:configdi bilah URL lalu cari entri berjudul network.http.use-cache. Setel ini ke false.

Jika Anda ingin menghindari hal itu di sisi klien, Anda dapat menambahkan sesuatu seperti ?v=1.xtautan file css, ketika konten file diubah. misalnya jika ada <link rel="stylesheet" type="text/css" href="css-file-name.css">Anda bisa mengubahnya menjadi <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">ini akan melewati caching.

Jika Anda dapat menulis php, Anda dapat menulis:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

Itu akan selalu menyegarkan!

EDIT: Tentu saja, ini tidak terlalu praktis untuk seluruh situs web, karena Anda tidak akan menambahkan ini secara manual untuk semuanya.

Periksa ini: Bagaimana Saya Memaksa Browser Menggunakan Versi Terbaru Stylesheet saya?

Dengan asumsi file css Anda adalah foo.css, Anda dapat memaksa klien untuk menggunakan versi terbaru dengan menambahkan string kueri seperti yang ditunjukkan di bawah ini.

<link rel="stylesheet" href="foo.css?v=1.1">

Sudut pandang
pengembang Jika Anda berada dalam mode pengembangan (seperti dalam pertanyaan awal), pendekatan terbaik adalah menonaktifkan cache di browser melalui tag meta HTML. Untuk membuat pendekatan ini universal, Anda harus memasukkan setidaknya tiga tag meta seperti yang ditunjukkan di bawah ini.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Dengan cara ini, Anda sebagai developer, hanya perlu me-refresh halaman untuk melihat perubahannya. Tetapi jangan lupa untuk memberi komentar kode itu ketika dalam produksi, bagaimanapun juga caching adalah hal yang baik untuk klien Anda.

Mode Produksi
Karena dalam produksi Anda akan mengizinkan caching dan klien Anda tidak perlu mengetahui cara memaksa pemuatan ulang penuh atau trik lainnya, Anda harus menjamin browser akan memuat file baru. Dan ya, dalam hal ini, pendekatan terbaik yang saya tahu adalah mengubah nama file.

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Ini akan menyegarkan jika dimodifikasi.

Pastikan ini tidak terjadi dari DNS Anda. Misalnya Cloudflare memilikinya di mana Anda dapat mengaktifkan mode pengembangan di mana itu memaksa pembersihan pada stylesheet dan gambar Anda karena Cloudflare menawarkan cache yang dipercepat. Ini akan menonaktifkannya dan memaksanya untuk memperbarui setiap kali seseorang mengunjungi situs Anda.

Coba bersihkan cache browser Anda.

Anda dapat mematikan cache dengan toolbar pengembang web Firefox.

Ekstensi Firefox ini adalah satu-satunya solusi yang dapat saya gunakan: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

Jawaban yang diterima di atas benar. Namun, jika Anda hanya ingin memuat ulang cache secara berkala, dan Anda menggunakan Firefox, alat Pengembang Web (di bawah item menu Alat per November 2015) menyediakan opsi Jaringan. Ini termasuk tombol Muat Ulang. Pilih Reload untuk reset cache sekali.

Jika Anda ingin memastikan bahwa file-file ini di-refresh dengan benar oleh Chrome untuk semua pengguna, maka Anda harus memilikinya must-revalidatedi Cache-Controlheader. Ini akan membuat Chrome memeriksa ulang file untuk melihat apakah mereka perlu diambil ulang.

Rekomendasikan header respons berikut:

Cache-Control: must-validate

Ini memberi tahu Chrome untuk memeriksa dengan server, dan melihat apakah ada file yang lebih baru. Jika ada file yang lebih baru, itu akan menerimanya sebagai tanggapan. Jika tidak, itu akan menerima respons 304, dan jaminan bahwa yang ada di cache adalah yang terbaru.

Jika Anda TIDAK menyetel tajuk ini, jika tidak ada setelan lain yang membuat file tidak valid, Chrome tidak akan pernah memeriksa server untuk melihat apakah ada versi yang lebih baru.

Berikut adalah entri blog yang membahas masalah ini lebih lanjut.

Sebagai ganti tag-tautan di html-head ke file css eksternal, gunakan php-include:

<style>
<?php
include("style.css");
?>      
</style>

Jenis retasan, tetapi berfungsi untuk saya :)

Saya telah memutuskan bahwa karena browser tidak memeriksa versi baru file css dan js, saya mengganti nama direktori css dan js saya setiap kali saya melakukan perubahan. Saya menggunakan css1 untuk css9 dan js1 ke js9 sebagai nama direktori. Ketika saya mencapai 9, saya selanjutnya mulai dari 1. Memang menyakitkan, tapi selalu bekerja dengan sempurna. Konyol jika harus memberi tahu pengguna untuk mengetik.

Saya punya kasus, di mana saya harus dapat membuat dan mengubah stylesheet saya dari jarak jauh yang memengaruhi ribuan klien, tetapi karena risiko beban jaringan yang berat, saya tidak mematikan cache.

Karena saya dapat mengubah konten HTML dari jarak jauh, saya kemudian menautkan stylesheet dengan kode hash yang cocok dengan konten stylesheet.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Karena itu, saya juga menggunakan fungsi javascript sisi klien untuk mengganti node dan atribut dengan hati-hati saat konten HTML berubah, artinya tag tautan stylesheet tidak akan diganti, hanya atribut href yang akan berubah.

Skenario ini berfungsi dengan baik di Chrome, Firefox dan Edge di Windows, juga Chrome di Android, tetapi tidak selalu berfungsi di klien web di Android yang mengejutkan saya. Jadi saya kurang lebih mencari sesuatu untuk memaksa / memicu pembaruan menggunakan javascript - secara optimal tanpa perlu memuat ulang halaman.

Anda dapat menggunakan toolbar pengembang Firefox / Chrome:

1. Buka Dev Toolbar Ctrl+ Shift+I
2. Buka tab jaringan
3. Tekan kotak centang "nonaktifkan cache" (Firefox: kanan atas toolbar; Chrome: tengah atas toolbar)

Coba ini:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Jika Anda membutuhkan sesuatu setelah tanda '?' yang berbeda setiap kali halaman diakses maka time()akan melakukannya. Membiarkan ini dalam kode Anda secara permanen bukanlah ide yang baik karena hanya akan memperlambat pemuatan halaman dan mungkin tidak diperlukan.

Saya telah menemukan bahwa memaksa penyegaran lembar gaya sangat membantu jika Anda telah membuat perubahan ekstensif pada tata letak halaman dan mengakses lembar gaya baru sangat penting agar sesuatu yang masuk akal muncul di layar.