एकल-पृष्ठ एप्लिकेशन में ब्राउज़र कैश के साथ व्यवहार करना

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि सिंगल पेज ऐप्स के लिए वेब ब्राउज़र कैश को ठीक से कैसे संभालना है।

मेरे पास काफी विशिष्ट डिजाइन है: एसपीए को लागू करने वाली कई HTML, JS और CSS फाइलें और SPA द्वारा खपत JSON डेटा का एक गुच्छा। समस्या तब उत्पन्न होती है जब मैं किसी अपडेट को पुश करना चाहता हूं: मैं साइट के स्थिर भाग और उस कोड को अपडेट करता हूं जो एक ही समय में JSON उत्पन्न करता है, लेकिन क्लाइंट ब्राउज़र में अक्सर स्थिर भाग कैश्ड होता है, इसलिए पुराना कोड नए डेटा को संसाधित करने की कोशिश करता है और हो सकता है (किए गए परिवर्तनों के आधार पर) समस्याओं में चले। (विशेष रूप से, IE बिना किसी अमान्य जेएस के उपयोग के बारे में क्रोम या फ़ायरफ़ॉक्स की तुलना में अधिक आक्रामक लगता है।

इससे निपटने का सबसे अच्छा तरीका क्या है?

1. सुनिश्चित करें कि मेरे JSON परिवर्तन पीछे-संगत हैं, और मान लें कि ब्राउज़र कैश एक उचित समय सीमा में समाप्त हो जाएगा।
2. स्थिर JS और JSON दोनों में किसी प्रकार के संस्करण संख्या को एम्बेड करें, फिर window.location.reload(true);वे मिलान न होने पर निष्पादित करें ।
3. हेडर ( must-revalidateया no-cacheजो कुछ भी हो, ) के उपयुक्त संयोजन का पता लगाएं ( यह कैसे करना है, इस पर स्रोत अलग-अलग होते हैं ) यह सुनिश्चित करने के लिए कि ब्राउज़र हमेशा हर लोड पर सभी संसाधनों को अमान्य करता है, भले ही इसका मतलब है कि साइट को लोड करने के लिए कुछ अतिरिक्त गोल यात्राएं।
4. मेरे कैश-नियंत्रण को माइक्रो-प्रबंधित करें और हेडर को समाप्त करें ताकि जब मैं अपडेट को पुश करना चाहता हूं तो स्थिर सामग्री समाप्त हो जाए।
5. कुछ और?

Comments

सुना है # 3 और # 4 अप्रत्याशित रूप से एम्बेडेड वेब ब्राउज़र नियंत्रणों में विफल रहता है अगर आपका पर्यावरण सहकर्मियों से बुराई ( खांसी आईओएस) है। # 1 और # 2 एक ऐप स्तर की पसंद हो सकती है लेकिन अभी भी (?) अन्य संसाधनों के लिए या आंशिक संसाधन लोड के लिए कैश समस्याओं का कारण हो सकती है। केवल एक चीज जिसे मैंने उत्पादन-तैयार कोड में मज़बूती से काम करते देखा है, वह है yoururl.html प्राप्त करना? <SomeTimeStamp> क्योंकि यह अधिकांश कैशिंग तंत्र को नकली बना देगा। बोनस: अपने पूरे वेब ऐप को एक फ़ाइल में रोल करें ताकि या तो परमाणु सफल हो या विफल हो। डाउनसाइड: एक स्थानीय लिंक पर सबसे अच्छा काम करता है। आपकी माइलेज भिन्न हो सकती है। सौभाग्य!

— जे ट्राना

संसाधनों के लिए URL पैरामीटर के रूप में एक संस्करण संख्या या टाइमस्टैम्प का उपयोग करने के लिए +1।

— 9000

Answer 1

आपको कैश बस्टिंग समाधान की आवश्यकता है । कैश बस्ट की भूमिका है:

1. अपनी सामग्री के आधार पर एक अद्वितीय नाम के लिए संसाधनों का नाम बदलें।
2. उन संसाधनों के लिए सभी संदर्भों को अपडेट करें।

ग्रंट-आधारित परियोजना में यह सुनिश्चित करने के लिए ग्रंट-रेव का उपयोग करना आम है कि यह सुनिश्चित करने के लिए कि सभी फ़ाइलों को ताज़ा करने की आवश्यकता है, उनकी सामग्री के आधार पर विशिष्ट नाम दिए गए हैं।

यदि आप यह सुनिश्चित करते हैं कि आपकी JSON फाइलों को आपके जावास्क्रिप्ट में उनके संदर्भ के साथ कैशबस्टिंग फाइलिंग मिले, तो क्लाइंट हमेशा JSON फ़ाइलों को लोड करेंगे जो जावास्क्रिप्ट की अपेक्षा करती है।

हैश-आधारित फ़ाइल नामकरण का लाभ यह है कि जो फाइलें नहीं बदली हैं, उन्हें कैश-बस्टिंग के बाद समान फ़ाइलनाम मिलेंगे, इसलिए ब्राउज़र्स सुरक्षित रूप से कैश्ड सामग्री का उपयोग करना जारी रख सकते हैं जब यह नहीं बदला है।

जाहिर है इस तरह की चीज है जिसे आप अपनी परियोजना के निर्माण के हिस्से के रूप में स्वचालित होना चाहते हैं, इसलिए आपको फ़ाइल नाम और संदर्भों को मैन्युअल रूप से बदलने की आवश्यकता नहीं है।

Comments

+1 इटैलिकाइज़्ड "कैश बस्टिंग" बिट के लिए, जो वास्तव में इस सामान को उत्पाद रूप से google करने के लिए द्वार खोलता है।

— ज़क कुस

@ टेड पेरिवल - योमन फ्रेमवर्क ऐसा करता है, जिसका मैं उपयोग करता हूं, लेकिन किसी समस्या को देखते हुए। जब मैं एक नया बिल्ड जारी करता हूं, तो ब्राउज़र में पुरानी फ़ाइलों के संदर्भ में अनुक्रमित कैश हो सकता है। ... और ब्राउज़र को एक त्रुटि मिलती है। मुझे यह कैसे तय करना चाहिए? (ए) नए (यह काम करता है) के लिए सभी पुराने फ़ाइल नामों से सहानुभूति रखते हैं। और आधार एक की खोज करें (अर्थात। 12345.main.js -> main.js)

— timh

Answer 2

आप उचित शीर्ष लेख के साथ if-modified-since + last-modifiedया if-none-match + etagहेडर का उपयोग कर सकते हैं cache-control। ( ब्राउज़र बग हो सकते हैं , लेकिन कुछ भी नहीं जो आप हाल के ब्राउज़रों में प्रबंधित नहीं कर सकते हैं।)

यदि फाइलें स्थिर हैं, तो मैं आपको उपयोग करने का सुझाव देता हूं if-modified-since, क्योंकि यह एक अच्छी तरह से कॉन्फ़िगर HTTP सर्वर के साथ स्वचालित रूप से किया जा सकता है। यदि अंतिम डाउनलोड के बाद फ़ाइल को संशोधित नहीं किया गया है तो उसे 304 वापस भेज देना चाहिए।

मुझे नहीं लगता कि आपका # 1 और # 2 दीर्घकालिक में काम करेगा। # 3 या # 4 काम कर सकते हैं। # 3 सरल है, लेकिन आपको यह सीखना होगा कि केवल एक बार इस समस्या से कैसे निपटें। इसलिए मैं # 4 का प्रयास करता हूं यदि मैं आप थे, लेकिन समाधान इस बात पर निर्भर हो सकता है कि आपके ग्राहक कौन से ब्राउज़र का उपयोग करते हैं ... उदाहरण के लिए IE8 में ajax कैश, आदि को अपडेट करने से समस्याएं हैं ...

Answer 3

यदि आप अपने एसपीए में जावा सर्वलेट फ़िल्टर को शामिल कर सकते हैं, तो यहां काम करने वाला समाधान है: CorrectBrowserCacheHandlerFilter.java

मूल रूप से, जब आपका ब्राउज़र स्थिर फ़ाइलों का अनुरोध करता है, तो सर्वर हर अनुरोध को उसी पर पुनर्निर्देशित करेगा लेकिन हैश क्वेरी पैरामीटर ( ?v=azErTउदाहरण के लिए) जो लक्ष्य स्थैतिक फ़ाइल की सामग्री पर निर्भर करता है।

ऐसा करने से, ब्राउज़र कभी भी आपके द्वारा घोषित स्थिर फ़ाइलों को कैश नहीं करेगा index.html(क्योंकि हमेशा प्राप्त किया जाएगा 302 Moved Temporarily), लेकिन केवल हैश संस्करण वाले लोगों को कैश करेगा (सर्वर 200उनके लिए जवाब देगा )। तो हैश संस्करण के साथ उन स्थिर फ़ाइलों के लिए कुशलतापूर्वक ब्राउज़र कैश का उपयोग किया जाएगा।

डिस्क्लेमर: मैं लेखक हूं CorrectBrowserCacheHandlerFilter.java।