Paksa browser untuk menghapus cache

Apakah ada cara saya dapat menaruh beberapa kode pada halaman saya sehingga ketika seseorang mengunjungi suatu situs, itu menghapus cache browser, sehingga mereka dapat melihat perubahannya?

Bahasa yang digunakan: ASP.NET, VB.NET, dan tentu saja HTML, CSS, dan jQuery.

Jika ini tentang .cssdan .jsperubahan, salah satu caranya adalah "cache cache" adalah dengan menambahkan sesuatu seperti " _versionNo" ke nama file untuk setiap rilis. Sebagai contoh:

script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.

Atau alternatifnya lakukan setelah nama file:

script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.

Anda dapat memeriksa tautan ini untuk melihat bagaimana cara kerjanya.

Lihatlah kontrol-cache dan Tag META yang kedaluwarsa .

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Praktik umum lainnya adalah menambahkan string yang terus berubah ke akhir file yang diminta. Misalnya:

<script type="text/javascript" src="main.js?v=12392823"></script>

Perbarui 2012

Ini adalah pertanyaan lama tetapi saya pikir ini membutuhkan jawaban yang lebih terkini karena sekarang ada cara untuk memiliki kontrol lebih besar terhadap caching situs web.

Di Aplikasi Web Offline (yang sebenarnya adalah situs web HTML5)applicationCache.swapCache() dapat digunakan untuk memperbarui versi cache situs web Anda tanpa perlu memuat ulang halaman secara manual.

Ini adalah contoh kode dari Panduan Pemula untuk Menggunakan Cache Aplikasi di HTML5 Rocks yang menjelaskan cara memperbarui pengguna ke versi terbaru situs Anda:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Lihat juga Menggunakan cache aplikasi di Jaringan Pengembang Mozilla untuk info lebih lanjut.

Perbarui 2016

Banyak hal berubah dengan cepat di Web. Pertanyaan ini ditanyakan pada tahun 2009 dan pada tahun 2012 saya memposting pembaruan tentang cara baru untuk menangani masalah yang dijelaskan dalam pertanyaan. 4 tahun berlalu dan sekarang tampaknya sudah usang. Terima kasih kepada cgaldiolo karena menunjukkannya di komentar.

Saat ini, per Juli 2016, Standar HTML, Bagian 7.9, aplikasi Web Offline menyertakan peringatan penghentian:

Fitur ini sedang dalam proses dihapus dari platform Web. (Ini adalah proses panjang yang membutuhkan waktu bertahun-tahun.) Menggunakan salah satu fitur aplikasi Web offline saat ini sangat tidak disarankan. Gunakan pekerja layanan sebagai gantinya.

Begitu juga dengan menggunakan cache aplikasi di Jaringan Pengembang Mozilla yang saya rujuk pada 2012:

Tidak digunakan
Fitur ini telah dihapus dari standar Web. Meskipun beberapa browser mungkin masih mendukungnya, browser ini sedang dalam proses dijatuhkan. Jangan menggunakannya dalam proyek lama atau baru. Halaman atau aplikasi Web yang menggunakannya dapat rusak kapan saja.

Lihat juga Bug 1204581 - Tambahkan pemberitahuan penghentian untuk AppCache jika petugas layanan mengambil intersepsi diaktifkan .

Tidak seperti itu. Salah satu metode adalah mengirim tajuk yang tepat saat mengirimkan konten untuk memaksa browser memuat ulang:

Memastikan halaman web tidak di-cache, di semua browser.

Jika Anda mencari "cache header" atau sesuatu yang serupa di sini di SO, Anda akan menemukan contoh spesifik ASP.NET.

Cara lain yang kurang bersih tetapi terkadang hanya jika Anda tidak dapat mengontrol tajuk di sisi server, adalah menambahkan parameter GET acak ke sumber daya yang dipanggil:

myimage.gif?random=1923849839

Untuk sumber daya statis caching yang tepat adalah dengan menggunakan parameter kueri dengan nilai setiap versi penyebaran atau file. Ini akan memiliki efek membersihkan cache setelah setiap penempatan.

/Content/css/Site.css?version={FileVersionNumber}

Berikut adalah contoh ASP.NET MVC.

<link href="@Url.Content("~/Content/Css/Reset.css")[email protected]().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

Jangan lupa untuk memperbarui versi perakitan.

Saya memiliki masalah serupa dan ini adalah bagaimana saya menyelesaikannya:

1. Dalam index.htmlfile saya telah menambahkan manifes:

   <html manifest="cache.manifest">

2. Pada <head>bagian termasuk skrip yang memperbarui cache:

   <script type="text/javascript" src="update_cache.js"></script>

3. Pada <body>bagian saya memasukkan fungsi onload:

   <body onload="checkForUpdate()">

4. Di cache.manifestsaya sudah meletakkan semua file yang ingin saya cache. Penting sekarang karena berfungsi dalam kasus saya (Apache) hanya dengan memperbarui setiap kali komentar "versi". Ini juga merupakan opsi untuk memberi nama file dengan "? Ver = 001" atau sesuatu di akhir nama tetapi tidak diperlukan . Mengubah hanya # version 1.01memicu acara pembaruan cache.

   CACHE MANIFEST
   # version 1.01
   style.css
   imgs/logo.png
   #all other files

   Penting untuk memasukkan 1., 2. dan 3. poin hanya di index.html. Jika tidak

   GET http://foo.bar/resource.ext net::ERR_FAILED

   terjadi karena setiap file "anak" mencoba untuk me-cache halaman saat halaman sudah di-cache.

5. Dalam update_cache.jsfile saya telah memasukkan kode ini:

   function checkForUpdate()
   {
       if (window.applicationCache != undefined && window.applicationCache != null)
       {
           window.applicationCache.addEventListener('updateready', updateApplication);
       }
   }
   function updateApplication(event)
   {
       if (window.applicationCache.status != 4) return;
       window.applicationCache.removeEventListener('updateready', updateApplication);
       window.applicationCache.swapCache();
       window.location.reload();
   }

Sekarang Anda hanya perlu mengubah file dan dalam manifes Anda harus memperbarui komentar versi. Sekarang mengunjungi halaman index.html akan memperbarui cache.

Bagian dari solusi bukan milik saya, tetapi saya telah menemukannya melalui internet dan disatukan sehingga berfungsi.

Saya punya kasus di mana saya akan mengambil foto klien secara online dan perlu memperbarui div jika foto diubah. Browser masih menampilkan foto lama. Jadi saya menggunakan hack memanggil variabel GET acak, yang akan menjadi unik setiap saat. Ini dia jika itu bisa membantu siapa saja

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

EDIT Seperti yang ditunjukkan oleh orang lain, berikut ini adalah solusi yang jauh lebih efisien karena akan memuat ulang gambar hanya ketika mereka diubah, mengidentifikasi perubahan ini dengan ukuran file:

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Banyak jawaban yang hilang intinya - sebagian besar pengembang sadar bahwa mematikan cache tidak efisien. Namun, ada banyak keadaan umum di mana efisiensi tidak penting dan perilaku cache default rusak parah.

Ini termasuk pengujian skrip yang bersarang dan berulang (yang besar!) Dan pemecahan masalah perangkat lunak pihak ketiga. Tidak ada solusi yang diberikan di sini yang memadai untuk mengatasi skenario umum seperti itu. Sebagian besar browser web adalah caching yang terlalu agresif dan tidak menyediakan cara yang masuk akal untuk menghindari masalah ini.

<meta http-equiv="pragma" content="no-cache" />

Juga lihat /programming/126772/how-to-force-a-web-browser-not-to-cache-images

Memperbarui URL ke karya berikut untuk saya:

/custom.js?id=1

Dengan menambahkan nomor unik setelah ?id=dan menambahnya untuk perubahan baru, pengguna tidak perlu menekan CTRL + F5untuk menyegarkan cache. Atau, Anda dapat menambahkan versi hash atau string dari waktu sekarang atau Epoch sesudahnya?id=

Sesuatu seperti ?id=1520606295

Berikut adalah halaman MDSN tentang pengaturan caching di ASP.NET.

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True

If Response.Cache.VaryByParams("Category") Then
   '...
End If

Tidak yakin apakah itu mungkin benar-benar membantu Anda tetapi itulah cara caching harus bekerja pada browser apa pun. Ketika browser meminta file, itu harus selalu mengirim permintaan ke server kecuali ada mode "offline". Server akan membaca beberapa parameter seperti tanggal dimodifikasi atau etag.

Server akan mengembalikan respons kesalahan 304 untuk NOT MODIFIED dan browser harus menggunakan cache-nya. Jika etag tidak memvalidasi di sisi server atau tanggal yang dimodifikasi di bawah tanggal yang dimodifikasi saat ini, server harus mengembalikan konten baru dengan tanggal modifikasi yang baru atau etag atau keduanya.

Jika tidak ada data caching yang dikirim ke browser, saya kira perilaku tidak ditentukan, browser mungkin atau mungkin tidak men-cache file yang tidak memberitahu bagaimana mereka di-cache. Jika Anda menetapkan parameter caching dalam respons, maka akan men-cache file Anda dengan benar dan server kemudian dapat memilih untuk mengembalikan kesalahan 304, atau konten baru.

Inilah yang harus dilakukan. Menggunakan params acak atau nomor versi di url lebih mirip peretasan daripada apa pun.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- expire-header-vs-etag /

Setelah membaca saya melihat bahwa ada juga tanggal kedaluwarsa. Jika Anda memiliki masalah, mungkin Anda memiliki tanggal kedaluwarsa yang diatur. Dengan kata lain, ketika browser akan menyimpan file Anda, karena memiliki tanggal kedaluwarsa, ia tidak perlu meminta lagi sebelum tanggal itu. Dengan kata lain, itu tidak akan pernah meminta file ke server dan tidak akan pernah menerima 304 yang tidak dimodifikasi. Itu hanya akan menggunakan cache sampai tanggal kedaluwarsa tercapai atau cache dihapus.

Jadi itu dugaan saya, Anda memiliki semacam tanggal kedaluwarsa dan Anda harus menggunakan etag yang terakhir diubah atau campuran dari semuanya dan memastikan bahwa tidak ada tanggal kedaluwarsa.

Jika orang cenderung banyak menyegarkan dan file tidak banyak berubah, maka mungkin bijaksana untuk menetapkan tanggal kedaluwarsa yang besar.

2 sen saya!

Saya menerapkan solusi sederhana ini yang berfungsi untuk saya (belum pada lingkungan produksi):

function verificarNovaVersio() {
    var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
    $.ajax({
        url: "./versio.txt"
        , dataType: 'text'
        , cache: false
        , contentType: false
        , processData: false
        , type: 'post'
     }).done(function(sVersioFitxer) {
        console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
        if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
            localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
            location.reload(true);
        }
    });
}

Saya memiliki sedikit file yang berlokasi di mana html berada:

"versio.txt":

v00.5.0014

Fungsi ini dipanggil di semua halaman saya, jadi ketika memuatnya memeriksa apakah nilai versi localStorage lebih rendah dari versi saat ini dan melakukan

location.reload(true);

... untuk memaksa memuat ulang dari server alih-alih dari cache.

(jelas, alih-alih penyimpanan lokal, Anda dapat menggunakan cookie atau penyimpanan klien persisten lainnya)

Saya memilih solusi ini karena kesederhanaannya, karena hanya mempertahankan satu file "versio.txt" akan memaksa situs lengkap untuk memuat ulang.

Metode queryString sulit untuk diterapkan dan juga di-cache (jika Anda mengubah dari v1.1 ke versi sebelumnya akan memuat dari cache, maka itu berarti bahwa cache tidak memerah, menjaga semua versi sebelumnya di cache).

Saya seorang pemula dan saya sangat menghargai pemeriksaan & ulasan profesional Anda untuk memastikan metode saya adalah pendekatan yang baik.

Semoga ini bisa membantu.

Selain mengatur Kontrol-cache: tanpa-cache, Anda juga harus mengatur header Kedaluwarsa ke -1 jika Anda ingin salinan lokal di-refresh setiap kali (beberapa versi IE tampaknya memerlukan ini).

Lihat HTTP Cache - periksa dengan server, selalu mengirim Jika-Dimodifikasi-Sejak

Ada satu trik yang bisa digunakan. Triknya adalah menambahkan parameter / string ke nama file di tag skrip dan mengubahnya ketika Anda mengajukan perubahan.

<script src="myfile.js?version=1.0.0"></script>

Browser mengartikan seluruh string sebagai path file meskipun apa yang muncul setelah "?" adalah parameter. Jadi yang terjadi sekarang adalah saat berikutnya Anda memperbarui file, cukup ubah angka pada tag skrip di situs web Anda (Contoh <script src="myfile.js?version=1.0.1"></script>) dan setiap browser pengguna akan melihat file telah berubah dan mengambil salinan baru.

Paksa browser untuk menghapus cache atau memuat kembali data yang benar?Saya telah mencoba sebagian besar solusi yang dijelaskan dalam stackoverflow, beberapa pekerjaan, tetapi setelah beberapa saat, itu cache akhirnya dan menampilkan skrip atau file yang dimuat sebelumnya. Apakah ada cara lain yang akan menghapus cache (css, js, dll) dan benar-benar berfungsi pada semua browser?

Saya menemukan sejauh ini bahwa sumber daya spesifik dapat dimuat ulang secara individual jika Anda mengubah tanggal dan waktu pada file Anda di server. "Menghapus cache" tidak semudah yang seharusnya. Alih-alih membersihkan cache di browser saya, saya menyadari bahwa "menyentuh" ​​file server yang di-cache akan benar-benar mengubah tanggal dan waktu file sumber di-cache di server (Diuji pada Edge, Chrome dan Firefox) dan sebagian besar browser akan secara otomatis mengunduh paling banyak salinan terbaru apa yang ada di server Anda (kode, grafik juga multimedia apa pun). Saya sarankan Anda hanya menyalin skrip terkini di server dan solusi "melakukan hal sentuh" sebelum program Anda berjalan, sehingga itu akan mengubah tanggal semua file masalah Anda ke tanggal dan waktu terbaru, kemudian mengunduh salinan baru ke browser Anda:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

lalu ... sisa program Anda ...

Butuh beberapa waktu untuk menyelesaikan masalah ini (karena banyak browser bertindak berbeda untuk perintah yang berbeda, tetapi mereka semua memeriksa waktu file dan membandingkannya dengan salinan yang Anda unduh di browser Anda, jika tanggal dan waktu yang berbeda, akan melakukan penyegaran), Jika Anda tidak bisa berjalan dengan cara yang benar, selalu ada solusi lain yang dapat digunakan dan lebih baik untuk itu. Salam hangat dan selamat berkemah. By the way, sentuh (); atau alternatif bekerja dalam banyak bahasa pemrograman termasuk dalam javascript bash sh php dan Anda dapat memasukkan atau memanggil mereka dalam html.

Apakah Anda ingin menghapus cache, atau hanya memastikan halaman Anda saat ini (diubah?) Tidak di-cache?

Jika yang terakhir, itu harus sesederhana

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">