ผู้ใช้ไม่สามารถดูเว็บไซต์เชิงมุมที่อัปเดตโดยไม่ต้องล้างแคช

เป้าหมาย: เป้าหมายคือเพื่อให้ผู้ใช้เห็นเว็บไซต์ที่อัปเดตโดยไม่ต้องล้างแคชด้วยตนเอง

การตั้งค่า : ฝั่งไคลเอ็นต์ : ฝั่งเซิร์ฟเวอร์ Angular 1.4 : วิธีการปรับใช้ Azure Web Apps : Azure เชื่อมโยงไปยังสาขาในบัญชี bitbucket และตรวจพบการอัปเดตที่ส่งไปยังบัญชีนี้จาก git

ปัญหา : การประกันคุณภาพรายงานว่าเธอไม่เห็นการอัปเดต ฉันบอกว่านี่น่าจะเป็นแคชและเพื่อล้างแคชเพื่อดูการอัปเดตตามที่กล่าวไว้ในเว็บไซต์ต่อไปนี้:

https://pixpa.zendesk.com/hc/en-us/articles/201555604-My-website-changes-are-not-showing-up-How-can-I-clear-my-browser-s-cache-

เธอชี้ให้เห็นว่าผู้ใช้เว็บไซต์นี้ไม่ทราบเรื่องการล้างแคชเพื่อดูการอัปเดต (แม้จะทำได้ง่ายเพียงแค่กด ctrl+shift+r ก็ตาม)

การวิจัยและขั้นตอนที่ดำเนินการเพื่อแก้ไขปัญหา:

ฉันค้นคว้าหัวข้อนี้และเพิ่มเมตาแท็กต่อไปนี้ลงใน index.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" />

ฉันทดสอบการเปลี่ยนแปลงนี้โดยการอัปเดตชื่อเรื่องของหน้า และดูเหมือนว่าจะได้ผลในส่วนของเธอ โดยที่ชื่อของหน้าได้รับการอัปเดตโดยที่เธอไม่จำเป็นต้องล้างแคช อย่างไรก็ตาม วันนี้ QA ได้รายงานว่าหน้าเว็บแสดงไม่ถูกต้อง และเธอจำเป็นต้องรีเฟรชแคชเพื่อดูหน้าเว็บอย่างถูกต้อง มีการเปลี่ยนแปลงมากมายในโมเดล/มุมมอง/โครงสร้างใดก็ตาม ดังนั้นฉันจึงไม่สามารถระบุได้ว่าการเปลี่ยนแปลงที่แตกหักนี้จะเกิดขึ้นที่ใดในโครงสร้าง

สำหรับฉัน สิ่งนี้ดูเหมือนเป็นข้อกำหนดทั่วไปสำหรับผู้ใช้ในการดูการอัปเดตเว็บไซต์ แนวทางปฏิบัติที่ดีที่สุดสำหรับผู้ใช้ปลายทางในการดูการอัปเดตเว็บไซต์โดยอัตโนมัติคืออะไร คำแนะนำหรือขั้นตอนที่เป็นประโยชน์ใด ๆ ที่ฉันสามารถปฏิบัติตามจะได้รับการชื่นชมอย่างมาก


azure caching angularjs
person user2819911    schedule 03.12.2015    source แหล่งที่มา

คำตอบ (3)


arrow_upward
0
arrow_downward

นี่น่าจะแก้ปัญหาของคุณได้ ฉันพบมันที่นี่: https://www.reddit.com/r/angularjs/comments/3j77a2/prevent_browser_template_caching/

$httpProvider.interceptors.push(['constants', function(constants){
    return {
        request: function(config){
            if(config.url.indexOf('partials/') > -1){
                var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                config.url = config.url + separator + 'c=' + constants.cache;
            }

            return config;
        }
    };
}]);

สิ่งนี้จะเพิ่มพารามิเตอร์ป้องกันแคชให้กับคำขอของคุณเพื่อรับไฟล์เทมเพลต ตัวอย่างจะค้นหาการเรียกทั้งหมดไปยัง /partials แต่ฉันขอแนะนำให้เปลี่ยนสิ่งนี้เพื่อค้นหาคำขอที่ลงท้ายด้วย .html

วิธีง่ายๆ ในการทำเช่นนี้คือเพียงใช้ +new Date() แทน constants.cache ด้วยวิธีนี้จะดึงไฟล์เทมเพลตเวอร์ชันล่าสุดเสมอ หากคุณไม่สนใจเรื่องการแคชไฟล์เทมเพลตทั้งๆ ที่ไฟล์เหล่านั้นยังไม่มีการเปลี่ยนแปลง นี่คือวิธีแก้ปัญหาง่ายๆ

$httpProvider.interceptors.push([function(){
    function endsWith(str, suffix) {
       return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    return {
        request: function(config){
            if(!endsWith(config.url, '.html')) return config;

            config.url = config.url + '?c=' +new Date();

            return config;
        }
    };
}]);
person DerekMT12    schedule 03.12.2015
comment
ขอบคุณเดเร็ก ฉันกำลังเพิ่มตัวสกัดกั้นนี้ และจะแจ้งให้คุณทราบว่าฉันจะดำเนินการต่อได้อย่างไร - person user2819911; 03.12.2015

arrow_upward
0
arrow_downward

เบราว์เซอร์ควรแคชเพียงบางส่วนหากไฟล์ .html ที่ให้บริการมีส่วนหัวควบคุมแคชที่บอกให้แคชเท่านั้น

คำตอบนี้แสดงส่วนหัวที่จำเป็นเพื่อป้องกันการแคชใด ๆ: จะควบคุมการแคชหน้าเว็บในทุกเบราว์เซอร์ได้อย่างไร

สิ่งนี้จะมีผลบังคับต่อจากนี้ไปแน่นอน ผู้ใช้ที่แคชไว้บางส่วนแล้วจะต้องรีเฟรช

เพื่อลดภาระบนเซิร์ฟเวอร์ของคุณ คุณอาจต้องการแก้ไขส่วนหัว เช่น เพื่อแคชเป็นเวลาหนึ่งวันหรือ 1 ชั่วโมง หรืออะไรก็ตามที่ตรงตามวงจรการเผยแพร่/ข้อกำหนดผู้ใช้ของคุณ

ฉันไม่คิดว่าแนวทางการใช้เมตาแท็ก HTML ของคุณจะได้ผลในกรณีนี้ เนื่องจากเบราว์เซอร์ไม่ได้โหลด/แสดงผลบางส่วนเป็นหน้า html โดยเป็นส่วนหนึ่งของไปป์ไลน์หน้าปกติ โหลดแบบอะซิงโครนัสและคอมไพล์โดย Angular ดังนั้นคุณต้องได้รับการควบคุมแคชในระดับที่ต่ำกว่า (เช่น ที่ส่วนหัว) นี่อาจเป็นเบราว์เซอร์เฉพาะ แต่ถ้ามันใช้งานไม่ได้ฉันก็คาดหวังนั่นคือสาเหตุ

person James Gaunt    schedule 03.12.2015

arrow_upward
0
arrow_downward

หากมุมมองไม่แสดงอย่างถูกต้อง นี่เป็นปัญหา CSS และ/หรือ JavaScript (เบราว์เซอร์แคช CSS และ Js) วิธีแก้ไขที่ง่ายที่สุดคือการใส่ตัวเลขสุ่ม หรือในกรณีของฉัน ฉันใส่เวอร์ชันเว็บของฉันลงในไฟล์ css และ js และเปลี่ยนมันเมื่อฉันอัปเดตเว็บไซต์ เป็นต้น

example.com/style.css?v=11009

ด้วยเหตุนี้ เบราว์เซอร์ไคลเอ็นต์ของคุณจะดึงข้อมูล css ของเว็บไซต์ของคุณเสมอหากเวอร์ชันมีการเปลี่ยนแปลง (เนื่องจากเบราว์เซอร์จะถือว่าไฟล์เหล่านี้เป็นไฟล์สองไฟล์ที่แตกต่างกัน)

person Ansel    schedule 05.12.2015
comment
อย่าลืมยอมรับสิ่งนี้เป็นคำตอบหากได้ผล จะได้ช่วยเหลือผู้ที่มีปัญหาเดียวกันด้วย - person Ansel; 27.12.2015