मैं XAMPP के माध्यम से Wordpress स्रोत कोड के आधार पर एक वेबसाइट विकसित कर रहा हूं। कभी-कभी मैं सीएसएस कोड, स्क्रैप या कुछ और बदल देता हूं और मुझे लगता है कि मेरा ब्राउज़र संशोधनों को लागू करने में समय लेता है। यह मुझे एक को ताज़ा करने के लिए कई ब्राउज़रों का उपयोग करने की ओर अग्रसर करता है और यदि मैं नई शैली को लागू नहीं करता तो मैं दूसरा प्रयास करता हूं और यह हमेशा होता है।
इस समस्या से बचने का कोई तरीका है? कभी-कभी मैं पिछले संशोधनों को नोटिस किए बिना कोड बदल रहा हूं।
जवाबों:
कैश पुनः लोड करने के लिए Ctrl+ F5(या Ctrl+ Shift+ R) दबाने पर । मेरा मानना है कि मैक Cmd+ Shift+ का उपयोग करते हैं R।
PHP में, आप शीर्षकों के साथ भूतकाल में समाप्ति तिथि सेट करके कैश को अक्षम कर सकते हैं:
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");
क्रोम टूल को डेवलपर टूल खोलकर F12, निचले दाएं कोने में गियर आइकन पर क्लिक करके और सेटिंग डायलॉग में अक्षम कैश का चयन करके अक्षम किया जा सकता है:
इस उत्तर से लिया गया चित्र ।
about:configURL बार में टाइप करें फिर प्रविष्टि शीर्षक से खोजें network.http.use-cache। इसे सेट करें false।
यदि आप इस बात से बचना चाहते हैं कि क्लाइंट की ओर से आप ?v=1.xसीएसएस फ़ाइल लिंक में कुछ जोड़ सकते हैं , जब फ़ाइल सामग्री बदल जाती है। उदाहरण के लिए अगर वहाँ था <link rel="stylesheet" type="text/css" href="css-file-name.css">तो आप इसे <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">कैशिंग को बायपास कर सकते हैं ।
यदि आप php लिख सकते हैं, तो आप लिख सकते हैं:
<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(); ?>" />
यह हमेशा ताज़ा रहेगा!
संपादित करें: बेशक, यह वास्तव में एक पूरी वेबसाइट के लिए व्यावहारिक नहीं है, क्योंकि आप इसे हर चीज के लिए मैन्युअल रूप से नहीं जोड़ेंगे।
इसे जांचें: मैं अपनी शैलियाँ के नवीनतम संस्करण का उपयोग करने के लिए ब्राउज़र को कैसे बाध्य करूं?
अपनी सीएसएस फ़ाइल को मानते हुए foo.css, आप क्लाइंट को नवीनतम संस्करण का उपयोग करने के लिए बाध्य कर सकते हैं, जैसा कि नीचे दिखाया गया है।
<link rel="stylesheet" href="foo.css?v=1.1">
डेवलपर का दृष्टिकोण
यदि आप विकास मोड में हैं (जैसे मूल प्रश्न), तो HTML मेटा टैग के माध्यम से ब्राउज़र में कैशिंग को अक्षम करना सबसे अच्छा तरीका है। इस दृष्टिकोण को सार्वभौमिक बनाने के लिए आपको नीचे दिखाए गए अनुसार कम से कम तीन मेटा टैग सम्मिलित करने होंगे।
<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" />
इस तरह, आपको एक डेवलपर के रूप में, परिवर्तनों को देखने के लिए केवल पृष्ठ को रीफ़्रेश करना होगा। लेकिन उस कोड को टिप्पणी करना न भूलें जब उत्पादन में, सभी कैशिंग के बाद आपके ग्राहकों के लिए एक अच्छी बात है।
उत्पादन मोड
क्योंकि उत्पादन में आप कैशिंग की अनुमति देंगे और आपके ग्राहकों को यह जानने की आवश्यकता नहीं है कि एक पूर्ण पुनः लोड या किसी अन्य चाल को कैसे बाध्य किया जाए, आपको वारंटी को नई फ़ाइल लोड करना होगा। और हां, इस मामले में, मुझे पता है कि फ़ाइल का नाम बदलना सबसे अच्छा तरीका है।
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
यदि संशोधित किया गया तो यह ताज़ा हो जाएगा।
सुनिश्चित करें कि यह आपके DNS से नहीं हो रहा है। उदाहरण के लिए क्लाउडफ्लेयर में वह जगह है जहां आप विकास मोड को चालू कर सकते हैं, जहां यह आपकी स्टाइलशीट और छवियों पर एक बदलाव के लिए मजबूर करता है क्योंकि क्लाउडफ्लेयर त्वरित कैश प्रदान करता है। यह इसे निष्क्रिय कर देगा और हर बार किसी को आपकी साइट पर आने के लिए इसे अपडेट करने के लिए मजबूर करेगा।
यह फ़ायरफ़ॉक्स एक्सटेंशन एकमात्र समाधान था जिसे मैं काम कर सकता था: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
ऊपर दिया गया उत्तर सही है। यदि, हालांकि, आप केवल समय-समय पर कैश को फिर से लोड करना चाहते हैं, और आप फ़ायरफ़ॉक्स, वेब डेवलपर टूल (नवंबर 2015 तक टूल मेनू आइटम के तहत) का उपयोग कर रहे हैं, तो एक नेटवर्क विकल्प प्रदान करता है। इसमें एक रीलोड बटन शामिल है। कैश रीसेट को एक बार बंद करने के लिए रीलोड का चयन करें।
आप यह सुनिश्चित करें कि इन फ़ाइलों को ठीक से सभी उपयोगकर्ताओं के लिए क्रोम करके रीफ्रेश कर रहे हैं होना चाहते हैं, तो आप की जरूरत must-revalidateमें Cache-Controlहैडर। यह क्रोम को फिर से जांच करेगा कि क्या उन्हें दोबारा लाने की जरूरत है।
निम्नलिखित प्रतिक्रिया हेडर सुझाएं:
Cache-Control: must-validate
यह क्रोम को सर्वर के साथ जांच करने के लिए कहता है, और देखें कि क्या कोई नई फ़ाइल है। यदि कोई नई फ़ाइल है, तो उसे प्रतिक्रिया में प्राप्त होगी। यदि नहीं, तो उसे 304 प्रतिसाद प्राप्त होगा, और यह आश्वासन कि कैश में एक अप टू डेट है।
यदि आप इस हेडर को सेट नहीं करते हैं, तो फ़ाइल को अमान्य करने वाली किसी भी अन्य सेटिंग के अभाव में, क्रोम कभी भी सर्वर के साथ जांच नहीं करेगा कि क्या कोई नया संस्करण है।
यहाँ एक ब्लॉग पोस्ट है जो इस मुद्दे पर आगे चर्चा करता है।
HTML-head में बाहरी-सीएसएस फ़ाइल में लिंक-टैग के अनुसार, php- का उपयोग करें:
<style>
<?php
include("style.css");
?>
</style>
हैक की तरह, लेकिन मेरे लिए काम करता है :)
मैंने निर्णय लिया है कि चूंकि ब्राउज़र सीएसएस और जेएस फाइलों के नए संस्करणों की जांच नहीं करते हैं, मैं जब भी कोई बदलाव करता हूं तो मैं अपने सीएसएस और जेएस निर्देशिकाओं का नाम बदल देता हूं। मैं सीएसएस 1 से सीएसएस 9 और जेएस 1 से जेएस 9 तक निर्देशिका नामों के रूप में उपयोग करता हूं। जब मैं 9 पर पहुंचता हूं, तो मैं अगली बार 1. शुरू करता हूं। यह एक दर्द है, लेकिन यह हर बार पूरी तरह से काम करता है। उपयोगकर्ताओं को टाइप करने के लिए कहना हास्यास्पद है।
मेरे पास एक मामला है, जहां मुझे हजारों ग्राहकों को प्रभावित करने वाली अपनी स्टाइलशीट बनाने और बदलने में सक्षम होने की आवश्यकता है, लेकिन भारी नेटवर्क लोड के जोखिम के कारण, मैं कैश बंद नहीं कर रहा हूं।
चूंकि मैं HTML सामग्री को दूरस्थ रूप से बदल सकता हूं, इसलिए मैं स्टाइलशीट को एक हैशकोड के साथ शैलीशीट की सामग्री से मेल खाता हूं।
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
उस ने कहा, मैं एक क्लाइंट-साइड जावास्क्रिप्ट फ़ंक्शन का उपयोग सावधानी से नोड्स और विशेषताओं को बदलने के लिए करता हूं जब HTML सामग्री बदलती है, तो स्टाइलशीट लिंक टैग को प्रतिस्थापित नहीं किया जाएगा, केवल href विशेषता बदल जाएगी।
यह परिदृश्य विंडोज पर क्रोम, फ़ायरफ़ॉक्स और एज, एंड्रॉइड पर भी क्रोम में ठीक काम करता है, लेकिन मेरे आश्चर्य के लिए हमेशा एंड्रॉइड पर वेबक्लिप में काम नहीं करता है। इसलिए मैं कम या ज्यादा कुछ खोज रहा हूं, ताकि जावास्क्रिप्ट को अपडेट करने के लिए मजबूर किया जा सके - पेज को पुनः लोड करने की आवश्यकता के बिना।
इसे इस्तेमाल करे:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
यदि आप 'के बाद कुछ की जरूरत है?' हर बार जब पृष्ठ एक्सेस किया जाता है तो वह अलग time()होता है। स्थायी रूप से अपने कोड में इसे छोड़ना वास्तव में एक अच्छा विचार नहीं है क्योंकि यह केवल पृष्ठ लोडिंग को धीमा कर देगा और शायद आवश्यक नहीं है।
मैंने पाया है कि यदि आपने किसी पृष्ठ के लेआउट में व्यापक बदलाव किए हैं और स्क्रीन पर कुछ समझदार दिखने के लिए नया स्टाइल शीट एक्सेस करना महत्वपूर्ण है, तो एक स्टाइल शीट रिफ्रेशिंग मजबूर करना सहायक है।