最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Prevent browser cache of angular templates - Stack Overflow

programmeradmin1浏览0评论

I've been researching back and fourth on this issue, which is quite simple: Modern browsers (chrome/ FF) are caching stuff, html pages among others.
When you release a new version, angular GETs these templates. However since the browser serve a cache version of these pages and not the new updated version.

I've read about 2000 article on how to achieve this.. None of the "meta" tags worked for me.. (for instance: Using <meta> tags to turn off caching in all browsers?) The only thing that works is manually manage the versions of the file by adding some param value . However this is really annoying and extremely tough to maintain if "clear caching" is only sometimes needed (mainly between versions).

Is there any chance browsers does not provide a simple, controlled way to manually "clear cache". Either on server or client way?

P.S. Angular template makes it even tougher to manage.

I've been researching back and fourth on this issue, which is quite simple: Modern browsers (chrome/ FF) are caching stuff, html pages among others.
When you release a new version, angular GETs these templates. However since the browser serve a cache version of these pages and not the new updated version.

I've read about 2000 article on how to achieve this.. None of the "meta" tags worked for me.. (for instance: Using <meta> tags to turn off caching in all browsers?) The only thing that works is manually manage the versions of the file by adding some param value http://bla.?random=39399339. However this is really annoying and extremely tough to maintain if "clear caching" is only sometimes needed (mainly between versions).

Is there any chance browsers does not provide a simple, controlled way to manually "clear cache". Either on server or client way?

P.S. Angular template makes it even tougher to manage.

Share Improve this question edited May 23, 2017 at 12:32 CommunityBot 11 silver badge asked Jun 30, 2014 at 18:40 TomerTomer 4,4815 gold badges40 silver badges50 bronze badges 3
  • Appending some random number / file hash / timestamp onto the end of the file is how I've been doing it and I agree that it is very annoying. Alternatively you could set the caching headers when your server serves up the files so that they are never cached – rob Commented Jun 30, 2014 at 18:49
  • What path did you choose to solve this problem? – Georgy Commented Dec 21, 2015 at 8:15
  • Using angularjs gulp templatecache package. Writing gulp rules to package the views directly in the code. Best upgrade ever, app loading in several ms. – anotherdev Commented Nov 25, 2019 at 8:22
Add a ment  | 

2 Answers 2

Reset to default 2

i am using interceptors. if request includes exact chunk of url(path to templates) i set header "Cache-Control": "no-cache, must-revalidate"

$httpProvider.interceptors.push(function($q,ngToast) {

        return {
            request: function(config){
                if(config.url.includes('some_url_to_your_template')){
                    Object.assign(config.headers,{"Cache-Control": "no-cache, must-revalidate"});

                }

                return config;
            }
        }
})

This is a question with so many answers, and it depends on your server, etc...

  • Normally HTML files are not cached
  • AngularJS caches templates after first calling them, using the $templateCache service (during application runtime)
  • You can use html2js with grunt or gulp to pile your templates in one JavaScript file
  • A lot of people don't rely on client caching, etags, etc... and add a version, hash, suffix and/or a prefix to static resources uri
发布评论

评论列表(0)

  1. 暂无评论