Mengapa server mengabaikan perubahan dalam file kode meskipun cache dinonaktifkan?

14

Saya menguji kode html / js di localhost saya (Windows 7, Chrome v79.0.3945.130 (64-bit)) dan sekitar 50% dari perubahan kode waktu tidak tercermin di browser (saya melihatnya dengan Dev Tools / Sumber) ).
Ada banyak nasihat di internet, tetapi sepertinya tidak ada yang berhasil:

  • Klik kanan pada reload dan pilih "Empty cache and Hard reload" - tidak membantu dalam 30% kasus.
  • Nonaktifkan cache di tab Jaringan pada Alat Dev Chrome - tidak membantu.
  • Tambahkan <meta http-equiv="Cache-control" content="no-cache">di header - tidak membantu.
  • Ganti <script src="common.js"></script>dengan <script src="common.js?blabla"></script>- membantu dalam 60% kasus, tetapi Anda harus melakukannya setelah setiap perubahan adalah tugas besar. Juga, itu tidak berfungsi dengan perubahan html.
  • Salin file ke file baru (seperti index.html ke index2.html) dan ganti nama file dalam kode - selalu berfungsi, tetapi itu adalah tugas yang lebih besar.

Masalah yang sama persis muncul ketika saya mengkomit kode ke github.io

Tolong bantu saya untuk membuatnya sehingga situs segera mencerminkan perubahan kode.

Sunting: Saya telah membuat file index3.html dan hanya menempatkan "hello world" di sana. Membuka file di browser. Diubah menjadi "hello world2" - browser memperbarui konten. Diubah menjadi "hello world3" - browser masih menampilkan "hello world2" bahkan setelah beberapa kali memuat ulang dan "Empty cache and hard reload". Saya berubah menjadi "hello world4" - browser masih menunjukkan "hello world2". Dalam 4 jam saya berubah menjadi "hello world5" - browser masih menampilkan "hello world2". File ini saya edit dengan notepad dasar.

Edit2: Orang-orang terus bertanya server apa yang saya gunakan. Ini terlihat seperti bagian dari masalah. Sayangnya, saya tidak tahu dan saya juga tidak tahu persis apa yang harus saya lakukan untuk memeriksanya. Inilah semua yang saya temukan sejauh ini:

  • Saya memiliki inetpub/wwwrootdirektori tempat saya meletakkan file html & js dan kemudian buka index.html di browser di http://localhost/.
  • Panel Network saya di Devs Tools terlihat seperti ini: tautan gambar .
  • Pengaturan server sangat cepat dan tidak memerlukan perangkat lunak tambahan untuk menginstal. Yaitu saya tidak menggunakan node.js.
  • Ada iisstart.htm di inetpub/wwwrootdan ketika saya membukanya http://localhost/iisstart.htmmengatakan IIS7.
javascript html server browser-cache klm123
sumber
Saya kadang-kadang menemukan penonaktifan cache di alat dev krom + menyegarkan + mengaktifkan cache lagi + menyegarkan terkadang memperbaiki masalah? Mungkin patut dicoba ...
Nick Parsons
2
jenis server apa yang Anda gunakan?
Jhecht
@Jhecht bagaimana cara memeriksanya?
klm123
1
Dari apa yang saya lihat di jawaban Anda mungkin akan mengatasinya dengan parameter. Dan itu mungkin akan berhasil. Namun, biasanya ini tidak perlu ketika Anda menonaktifkan cache di alat dev chrome. Jadi firasat saya akan ada cache lain yang terlibat. Antara Anda dan server bisa berupa sejumlah teknologi caching tambahan. Beberapa contoh: Caching sisi server (mis. Varnish), caching CDN (mis. Cloudflare), proxy lokal dari router / firewall (mis. Squid-cache) dan hal-hal serupa. Saya akan memeriksa mereka juga.
Jey DWork
1
@ klm123 tanpa mengetahui server web mana yang membahasnya, tidak mungkin memberi tahu Anda, cara mengubah atau memeriksa konfigurasi cache untuknya. Jika Anda tidak tahu tentang server web Anda, salah satu cara yang mungkin untuk memeriksanya adalah di tab jaringan devTools: periksa tajuk respons yang dimuat index.htmluntuk sesuatu seperti tajuk X-Powered-Byatau Serveryang mungkin memberikan petunjuk di server web. Googling untuk jalur file Anda inetpub/wwwrootsangat mengarah ke server IIS.
acran

Jawaban:

6

Menggunakan parameter adalah cara yang benar! Di sini Anda dapat menambahkan nomor versi yang hanya Anda ubah pada perubahan besar secara manual dan untuk debugging Anda dapat mengaturnya ke Date.time () jadi di tag <head> Anda, ini memaksa semua versi yang di-cache untuk ditimpa karena parameter selalu baru satu:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

Semoga ini membantu!

lehm.ro
sumber
Saya kira saya bisa melakukannya. Tetapi bukankah ini sama efektifnya dengan pilihan keempat saya? untuk menambahkan "? blabla" setelah nama file. Ini tidak berfungsi cukup sering - itu nama file yang sama di tab Sumber, atau blabla ditambahkan, tetapi konten file masih sama.
klm123
Ini tidak sama. Setelah parameter digunakan dua kali (yang tidak akan pernah terjadi dengan Date.time (), ia dapat membuat versi yang di-cache.? Blabla adalah sama setelah menggunakannya dua kali sama sekali tidak menggunakannya sama sekali.
lehm.ro
parameter tidak digunakan dua kali. Saya mengedit kode, kemudian mengubah parameter, lalu memeriksa kode sumber di browser dan itu adalah yang lama.
klm123
Sudahkah Anda mencoba pendekatan saya?
lehm.ro
Pendekatan Anda membantu, terima kasih. Tapi itu tidak menyelesaikan masalah saya. Apa yang Anda tulis tidak benar dalam situasi saya. "memaksa semua versi yang di-cache ditimpa karena parameter selalu yang baru", mengubah parameter ke yang baru tidak memaksa cache saya untuk memuat ulang dengan andal. Juga tidak dapat membantu dengan perubahan pada index.html.
klm123
3

Di server Windows IIS7 berjalan pada Windows 7, untuk mencegah caching konten Anda, Anda perlu membuat beberapa perubahan pada salah satu file konfigurasi Anda yang dipanggil web.config. File konfigurasi untuk IIS 7 dan yang lebih baru berlokasi di %WinDir%\System32\Inetsrv\Config foldertempat %WinDir%folder tempat Anda menginstal Windows (biasanya C:/Windows).

Buat salinan cadangan web.configfile Anda sebelum mengeditnya sehingga Anda dapat mengembalikannya jika perubahan yang Anda buat pada file akan merusaknya.

Di web.configfile Anda , cukup tambahkan berikut ini untuk mencegah caching Anda index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

Dapatkan path file untuk web.configfile dari sini: Windows Doc: Referensi Konfigurasi

Mendapat konfigurasi cache di atas dari sini: Cara menonaktifkan caching file HTML aplikasi halaman tunggal yang dilayani melalui IIS?

AndrewL64
sumber
Tidak ada web.config di jalur yang disebutkan. Saya telah membuatnya dan meletakkan kode Anda di sana. Tetapi saya harus mengganti index.html dengan path lengkap seperti projectName/index.html, yang saya salin dari url di browser saya http:/localhost/projectName/index.html. Hasil - tidak berpengaruh pada masalah caching.
klm123
@ kim123 Bisakah Anda mencoba menambahkan web.configfile di folder root situs Anda (folder tempat situs Anda berada) dan mengubah path kembali menjadi adil index.htmldan melihat apakah itu berfungsi.
AndrewL64
aku melakukannya. itu tidak membantu.
klm123
1

Saya memiliki masalah yang sama dan ini adalah daftar periksa saya:

  1. Periksa web.config (caching dan clientcache, kebijakan cache kernel, dll.) Atau .htaccess (Header atur Cache-Control).
  2. Jika Anda menggunakan bahasa dinamis seperti ASP, PHP mungkin ada pengaturan cache internal. Dalam satu kasus saya menemukan <%Response.Expires=1440%>banyak baris kode ASP dan itu mengatasi semua pengaturan lain! Dalam php session_cache_expiremungkin melakukan hal yang sama.
  3. Jika Anda menggunakan IIS maka periksa server > HTTP Response header untuk memastikan tidak ada apa-apa tentang caching yang sama untuk masing-masing situs web yang terdaftar dengan nama server.
  4. periksa http-equiv="Cache-control"di header html (Anda lulus tes ini!).

Akhirnya saya harus mengatakan bahwa dalam semua situasi di atas, Memeriksa Nonaktifkan cache di tab newtwork di Chrome console selalu berhasil bagi saya untuk melihat versi halaman baru namun ini hanya baik untuk keperluan debugging dan pengunjung tidak akan melakukannya!

Ali Sheikhpour
sumber
1. Di mana saya menemukan web.config dan .htaccess? 2. Saya hanya menggunakan html dan js. 3. Header Respons HTTP terlihat seperti ini: imgur.com/leYpdej
klm123
Jika Anda menggunakan IIS web.congfig ada di root atau wwwroot. Selain itu ada file Machine.config di tingkat server yang dapat Anda modifikasi dari konsol IIS langsung dari sini: stackoverflow.com/questions/2325473/where-is-machine-config . Jika Anda menggunakan server apache di windows, silakan serach windows untuk menemukan .htaccess @ klm123
Ali Sheikhpour
0

Dalam kasus tertentu dengan menggunakan Google Chrome, coba ini: Buka Alat Dev -> Buka tab 'Jaringan'. Centang kotak 'Nonaktifkan cache', setelah itu segarkan halaman.

CATATAN: Agar ini berfungsi setiap kali jendela Alat Dev HARUS tetap terbuka setiap saat.

masukkan deskripsi gambar di sini

Namun, untuk menyebar perubahan ke pengguna Anda, tanpa harus me-refresh halaman, dll, Anda harus menambahkan versi file di akhir setiap file yang direferensikan untuk file yang sering berubah (seperti yang Anda tunjukkan). Sebagai contoh:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

The v=20b379f72a37ditambahkan ke akhir adalah file hash yang dihasilkan otomatis dari isi file.

Martin Shishkov
sumber
Itulah item 2 dalam daftar saya.
klm123
Apakah Anda memastikan jendela Dev Tools tetap terbuka?
Martin Shishkov
jendela alat dev terbuka, kotak centang dicentang [tapi saya biasanya melihat tab sumber], dan saya bahkan melakukan penyegaran keras.
klm123
0

Ini kemungkinan besar - tetapi editor / IDE macam apa yang Anda gunakan? Juga, pengeditan seperti apa yang Anda lakukan pada index.html Anda?

Bisakah Anda memberikan beberapa contoh pengeditan yang tidak tercermin ketika Anda menyimpan dan mencoba memuat file?

Saya ingin mencoba mereproduksi masalah Anda. Dari apa yang orang sarankan, tampaknya tidak ada masalah dalam kode itu sendiri. Saya menduga ini adalah masalah lingkungan tetapi saya perlu lebih banyak info dari Anda untuk mengonfirmasi kecurigaan saya.

foreza
sumber
Saya menggunakan kode studio visual microsoft. Contoh: ganti <script src = "common.js"> </script> dengan <script src = "common.js? Blabla">. Contoh2: tambahkan tombol baru, tambahkan div baru, tambahkan panggilan fungsi onload. Tbh sepertinya ada jenis pengeditan.
klm123
Lihat hasil edit di akhir posting pertanyaan saya.
klm123
0

Apa yang Anda tulis dalam meta HTML adalah rekomendasi untuk browser, bukan instruksi yang ketat. Jika cache ketat diaktifkan di browser, ini tidak akan membantu.

Solusi dijelaskan dengan baik: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Saya lebih suka di sisi server untuk menambahkan ke skrip versi dengan tanggal pembaruan terakhir dari file itu sendiri.

<script src="/myScript.js?v=1579780745150"></script>

Di mana 1579780745150 adalah Unix Timestamp memperbarui file myScript.js itu sendiri. Ini hanya berfungsi dengan file sendiri, tetapi yang eksternal tidak diperlukan. Paling sering dalam nama file adalah versi.

Aleksandr Smityukh
sumber
Jika Anda memerlukan kode backend. Katakan platform mana yang Anda gunakan.
Aleksandr Smityukh
0

Ini mungkin sangat frustasi, dan sepertinya Anda tidak melakukan kesalahan.

Masalahnya mungkin ada sesuatu antara browser Anda dan file skrip yang Anda panggil melakukan caching.

Untuk menentukan apa itu, izinkan saya bertanya bagaimana Anda menjelajah ke URL host lokal?

Contoh:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

Jika Anda menjalankan file://path/to/file.htmlini berarti Anda tidak menjelajahi server web / proxy. Jika sudah http://[something]/file.htmlmaka Anda menjalankan beberapa jenis server web dan itu kemungkinan penyebabnya. Cari semacam pengaturan tempat Anda dapat mematikan caching.

Jika Anda tidak menggunakan server web dan benar-benar meramban langsung ke file html lokal tanpa server web, maka saya sarankan browser adalah penyebabnya. Jika ini masalahnya, saya sarankan mematikan cache browser seperti yang disarankan Martin Shishkov .

Householder Dekan
sumber
itu http://localhost/ProjectName/index.htmlDimana pengaturan ini di mana Anda dapat menonaktifkan caching bisa?
klm123
Sepertinya dari cuplikan layar yang Anda poskan di tempat lain, Anda menggunakan IIS, (juga disebut Layanan Informasi Internet Microsoft). Solusi cepat adalah dengan mengklik dua kali pada file .html Anda untuk memuatnya di browser, yang akan menggunakan a file://path/to/projectName/index.html. Itu akan menghapus server web dari persamaan. Untuk terus menggunakan IIS dan hanya memperbaiki cache, lihat artikel ini: support.microsoft.com/en-us/help/247404/…
Dean Householder
0

Chrome melakukan hal ini di mana, jika file tidak terlalu banyak berubah, tidak yakin apa artinya, itu akan menggunakan versi cache "dikompilasi". Untuk html artinya parsed don tree. Untuk kode JS yang dikompilasi, dll.

Biasanya ada cara untuk mengatasi ini, banyak kerangka kerja menggunakan hash di dalam nama file, seperti main.md5hash.js:, karena mengubah nama file membatalkan cache.

Maka Anda akan ditinggalkan dengan mungkin html tidak memperbarui. Dan untuk lebih jelasnya, saya tidak yakin, Anda selalu dapat menambahkan komentar dengan gumpalan acak ... seperti kencan.

Akxe
sumber
0

Berdasarkan pembaruan jawaban Anda, saya akan mengatakan bahwa masalah Anda disebabkan oleh IIS v7 yang menggunakan Memori PC Anda untuk caching bukan Hard drive lokal Anda itu sebabnya Hard reloaddan semua metode lain tampaknya tidak berfungsi dengan baik.

Saya dapat memikirkan 3 solusi:

1. Memperbaiki masalah cache IIS Anda: (Tidak diuji karena saya tidak memiliki PC dengan IIS)

  1. Dari menu Mulai , klik Alat Administratif , lalu klik Manajer Layanan Informasi Internet (IIS). (lihat Gambar )
  2. Pada tampilan hierarki di sebelah kiri , temukan aplikasi Anda.
  3. Pilih item menu Output Caching .
  4. Klik Add Cache Rule kemudian ketikkan file extensionyang ingin Anda nonaktifkan cache yaitu .aspx, .css, .js dll ... (satu per satu pada saat saya kira?)
  5. Sekarang, Anda bisa Untick caching mode pengguna atau Periksa mencegah semua caching. Seharusnya terlihat seperti ini:

masukkan deskripsi gambar di sini

Sumber Solusi - Baca lebih lanjut tentang IIS 7 Cache

2. Menggunakan beberapa alternatif untuk IIS Ada beberapa tetapi saya akan merekomendasikan (berdasarkan pengalaman saya) WAMP atau XAMPP Keduanya akan memberi Anda pengembangan "lingkungan" yang lebih baik dan keduanya mendukung Windows 7. Juga, jika Anda terbiasa dengan Kode VS Anda hanya dapat menggunakan ekstensi Server Live .

3. Gunakan mode Penyamaran Chrome saat mengembangkan. (Tidak yakin apakah itu berfungsi untuk IIS7)

awran5
sumber
Tambahkan Aturan Cache / Cegah semua cache - tidak membantu [dicoba dengan html]. Mode penyamaran - tidak membantu.
klm123
Sudahkah Anda mencoba dengan .jsfile? itu tergantung pada perubahan apa yang Anda lakukan.
awran5