कोणीय कैश के साथ पेज सक्षम

Question

मैं एक कोणीय वेबसाइट एक "जोड़ें" और एक "हटाएँ" प्रपत्र एक ही पृष्ठ पर एक मेज पर डेटा हेरफेर करने के लिए होता है जो बना अपडेट नहीं होता।

जब मैंने इसे स्थानीय रूप से या Chrome डेवलपर कंसोल (विकलांग कैश) के साथ परीक्षण, जब मैं एक नया आइटम जोड़ सकते हैं या एक को हटाने, टेबल ही अपने आप ताज़ा। जब मैं उत्पादन सर्वर मेरे मुवक्किल की (आईआईएस सर्वर) पर उसकी जांच, यह केवल के साथ क्रोम देव कंसोल खोला काम करता है। अन्यथा, वे Ctrl + F5 का उपयोग करने के लिए कैश ताज़ा करें और पृष्ठ पर परिवर्तन को दिखाने के लिए है।

यह घटकों पर कोड है:

addProduct() { 
    this._productsService.addProduct(this.addFormProductItem) 
     .subscribe(v => { 
     this._productsService.getProducts().subscribe( 
      products => {this.products = products, this.onChangeTable(this.config)} 
    ); 
    }); 
    this.addmodalWindow.hide(); 
    return; 
    } 


    onChangeTable(config: any, page: any = { 
    page: this.page, 
    itemsPerPage: this.itemsPerPage 
    }): any { 
    if (config.filtering) { 
     Object.assign(this.config.filtering, config.filtering); 
    } 
    if (config.sorting) { 
     Object.assign(this.config.sorting, config.sorting); 
    } 
    this.ng2TableData = this.products; 
    this.length = this.ng2TableData.length; 
    let filteredData = this.changeFilter(this.ng2TableData, this.config); 
    let sortedData = this.changeSort(filteredData, this.config); 
    this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData; 
    this.length = sortedData.length; 
    } 

मेरा अनुमान है कि यह या तो कुछ सर्वर विन्यास करने के लिए या webpack कोड से संबंधित है। हालांकि, मैं बाद वाले से परिचित नहीं हूं और मैंने इसे अभी छोड़ दिया क्योंकि यह मेरे द्वारा उपयोग किए जाने वाले शुरुआती पैकेज पर था।

मैं a gist with the webpack बनाई गई है, क्योंकि यह एक लंबे फ़ाइल

संपादित करें 1: कुछ अतिरिक्त अनुसंधान के बाद, मैं अनुप्रयोग के रूट फ़ोल्डर पर एक web.config फ़ाइल पर निम्नलिखित जोड़ने की कोशिश की।

<caching enabled="false" enableKernelCache="false"> 
     <profiles> 
     <add extension=".css" policy="DontCache" kernelCachePolicy="DontCache" /> 
     <add extension=".html" policy="DontCache" kernelCachePolicy="DontCache" /> 
     <add extension=".js" policy="DontCache" kernelCachePolicy="DontCache" /> 
     </profiles> 
</caching> 

हालांकि, मैं अब भी वही व्यवहार किया है। देव कंसोल के साथ एक आइटम जोड़ना बंद है, यह तालिका अद्यतन नहीं करता है। लेकिन अगर मैं डेव कंसोल खोला और विकलांग कैश है, तो यह है कि यह एक ताज़ा की आवश्यकता के बिना अद्यतन करता है।

संपादित करें 2: गुप्त विंडो पर कार्य करना समस्या को ठीक नहीं करता है।

संपादित करें 3: index.html पर मेटा टैग जोड़ना फिर से समस्या हल नहीं होती,।

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate"> 
<meta http-equiv="Pragma" content="no-cache"> 

संपादित 4:

getProducts() { 
    return this._http.get(this.API + '/products/all') 
     .map((response: Response) => <Product[]>response.json().products); 
    } 

    addProduct(product:Product) { 
    if (this._loggedInGuard.isLoggedIn()) { 
     let token = localStorage.getItem('my.token'); 
     let body = JSON.stringify(product); 
     let headers = new Headers(
     { 'Content-Type': 'application/json', 
     'Authorization': 'Bearer ' + token}); 
     return this._http 
     .post(this.API + "/products/store", body, {headers: headers}) 
     .map(res => res.json()) 
     .catch(this._responseService.catchBadResponse) 
     .do(() => this._responseService.success('Success. You added a product!')); 

    } 
    } 

संपादित 5

एकमात्र समाधान मैं पा सकते हैं खिड़की हर बार जब मैं location.reload(true) साथ डेटा पर एक अद्यतन कर फिर से लोड करने के लिए है। लेकिन फिर, यह केवल फ़ायरफ़ॉक्स पर काम करता है, न कि क्रोम पर। और मैं स्वीकार नहीं करूंगा कि आपको यह काम करने के लिए एकल पृष्ठ ऐप रखने का एकमात्र कारण छोड़ना होगा।

Answer 1

वहाँ इसका सही कारण चीजें हैं जो आप की कोशिश की है में से कोई भी बातें तय कर दी है कर रहे हैं।

सबसे पहले, web.config में <caching> तत्व का उपयोग करके प्रतिक्रिया को कैश करने के तरीके पर ब्राउज़र को निर्देश नहीं दिया जाता है। इसका उपयोग यह कॉन्फ़िगर करने के लिए किया जाता है कि IIS सर्वर प्रतिक्रिया कैश करता है ताकि भविष्य के अनुरोधों में इसका पुन: उपयोग किया जा सके। Here वह दस्तावेज है जो बताता है।

अगला, आपके <meta> टैग। आम तौर पर, कैश नियंत्रण वास्तविक http शीर्षलेख द्वारा किया जाता है। जबकि आप <meta> टैग्स का उपयोग हेडर सेट करने के लिए कर सकते हैं जो आपके http प्रतिक्रिया शीर्षलेख में निर्दिष्ट नहीं हैं, वे नहीं पहले से सेट किए जा रहे http शीर्षकों को ओवरराइड कर देंगे।आईआईएस में प्रतिक्रिया शीर्षकों में कैशिंग के लिए डिफ़ॉल्ट मान हैं, आपके <meta> टैग वास्तव में कुछ भी नहीं करेंगे। <meta> टैग वास्तव में केवल विश्वसनीय रूप से उपयोगी होते हैं जब आप file:/// यूआरएल पर लोड हो रहे हैं।

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

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <location path="."> 
    <system.webServer> 
     <staticContent> 
     <clientCache cacheControlMode="DisableCache" /> 
     </staticContent> 
    </system.webServer> 
    </location> 
</configuration> 

हालांकि, पहली बात करना चाहिए वर्तमान प्रतिक्रिया हेडर आईआईएस है कि आप भेज रहा है की जांच है! यह क्रोम डेवलपर्स टूल का उपयोग करके आसानी से किया जा सकता है। यदि आप प्रतिक्रिया में Cache-Control: शीर्षलेख देख रहे हैं, तो यह आपके तर्क की पुष्टि करेगा कि आपके <meta> टैग क्यों काम नहीं कर रहे हैं।

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

Response.Cache.SetCacheability(HttpCacheability.NoCache); 

आप बहुत पुराना है या टूट ब्राउज़रों का समर्थन करना चाहते हैं, वहाँ अन्य संसाधनों से बताएं कि अतिरिक्त हेडर आप जोड़ना है, जो फिर से web.config या ASP.NET कोड का उपयोग किया जा सकता है की आवश्यकता होगी रहे हैं। मैं बस फिर से पुन: प्रयास करना चाहता हूं: यदि आपको अभी भी समस्याएं आ रही हैं तो आप सर्वर द्वारा भेजे गए प्रतिक्रिया शीर्षलेख देख रहे हैं।

Answer 2

ASP.NET पृष्ठों आप कहीं भी कैश किया जाना नहीं चाहते हैं के लिए,

HttpContext.Current.Response.Cache.SetCacheability 
          (HttpCacheability.Server); 
HttpContext.Current.Response.Cache.SetNoStore(); 
Response.Cache.SetExpires(DateTime.Now); 
Response.Cache.SetValidUntilExpires(true); 

यह किसी भी कैशिंग प्रॉक्सी सर्वर है कि केवल सर्वर पेज को कैश करने की अनुमति दी और सर्वर बताता है यह कैश करने के लिए नहीं है बताता है। कोड की बाद की दो पंक्तियां ब्राउज़र से पूछती हैं कि इसे कैश न करें। कोड ऊपर इन तीन शीर्ष लेख की ओर जाता है:

Cache-Control:no-cache, no-store 
Pragma:no-cache 
Expires:-1 

तुम भी ब्राउज़र कैशिंग को रोकने के लिए कुछ क्वेरी स्ट्रिंग के लिए अद्वितीय जोड़ सकते हैं।

.post(this.API + "/products/store?unique=milliseconds", body, {headers: headers}) 

Answer 3

एक पूर्णकालिक टिकट या हर http कॉल है कि आप कैश नहीं करना चाहते करने के लिए एक विशिष्ट आईडी के साथ एक पैरामीटर जोड़ें। एक चैंप की तरह काम करता है। मैं कोणीय में टेम्पलेट का उपयोग कर एक ही मुद्दा था। मैंने अभी एक http इंटरसेप्टर जोड़ा और प्रत्येक कॉल में टाइमस्टैम्प लगाया और समस्या गायब हो गई।