AngularJS Cache Busting for Scripts and CSS

[Rajaram]

I am developing AngularJS application.

I applied cache busting for HTML views by appending a "random" value to the URL query string.

How can implement cache busting for Script files and CSS?

Please let me the best practice for cache busting in AngularJS application.

[Mark Phillips]

I would using grunt which has a few cache busting tasks which you can add to your build process. Search for grunt cache bust on google and a few will come up. If you aren't using grunt i suggest you take a look as there are many tasks available that help builds for javascript apps such as minification etc.

[Eric Eslinger]

Yeah, I do all my cache busting work with gulp, similar to grunt. In production, my main.css and main.js both get a hash string injected into their filename based on their contents, so main-149af3d.css or whatever. I think I use gulp-rev for that. Gulp-inject is configured to modify index.html to reflect the filename changes.

E

On Sep 30, 2014 11:17 PM, "Mark Phillips" <mphil...@gmail.com> wrote:
>
> I would using grunt which has a few cache busting tasks which you can add to your build process. Search for grunt cache bust on google and a few will come up. If you aren't using grunt i suggest you take a look as there are many tasks available that help builds for javascript apps such as minification etc.
>

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.

[Daniel Lidström]

I'm using IIS and it will handle cache busting for me. As long as I serve my scripts as files (i.e. no magic) IIS will send along an ETag. This is respected by modern browsers and acts as a cache buster.

[Mark Volkmann]

I see how this prevents issues with CSS and JavaScript being cached, but don't you still have an issue with HTML files being cached?

On Wed, Oct 1, 2014 at 8:29 AM, Eric Eslinger <eric.e...@gmail.com> wrote:

Yeah, I do all my cache busting work with gulp, similar to grunt. In production, my main.css and main.js both get a hash string injected into their filename based on their contents, so main-149af3d.css or whatever. I think I use gulp-rev for that. Gulp-inject is configured to modify index.html to reflect the filename changes.

--
R. Mark Volkmann
Object Computing, Inc.

[Daniel Lidström]

Actually, even the html partials are cached correctly by IIS (not IIS express mind you). From what I can tell it all works fine.

—
Daniel

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/zjyXjjk_Fq8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Eric Eslinger]

for me, i use gulp-angular-templatecache, which shoves all my partials into a big JS file so i can pre-load all the templates at load time. That resultant templates.js file gets shoved through the same gulp-rev plugin, so it ends up with an md5-based cache busting filename.

e

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Rob Koberg]

I was following this thread for what I think is the same issue Mark
Volkman mentions. If the user never fully reloads the the HTML page
none of the changes would come down. I was thinking server side
requests would need to send down an app version. If the version sent
from the server does not match the currently loaded version, reload
the page. Something like:

$window.location.reload(true);

[Eric Eslinger]

I'm actually running into that top-level issue myself lately. My system uses websockets to push realtime updates out to the user, and the attached clients all ping every 30 seconds with a "here I am" for the purposes of having user-presence indicators on the site. I was thinking I could respond to that ping with some information about the current build number, and if there was a build number mismatch, call window.reload.

Set the build number in index.html, because the way my system works, at least, the frontend gets rebuilt every time the backend does, and restarting the backend server would increment the build number. That increment would go out in the next ping response (once the websocket connection is re-established), and users who keep a tab open on the screen would get a refresh. 

The big issue I want to solve first is letting connected users have a chance to close out their current session first. I don't want to refresh them midway through an edit, even if I do have autosave and stuff, random screen refreshes can be annoying.

e

[Alessandro Ghidini]

I'm using gulp too for bundling, minificating and versioning the css and js files. My angular html partials are also minified into a js file who is then versioned too.

Gulp inject will update my main file with the current script version.

The folder containing the versioned files is configured to serve static content with an expiration date set to 30 days.

The html is not configured to be cached: i'm ok if the client doesn't cache the main page (it's small and in a SPA it's downloaded only during full browser refreshes). The html partials ideally aren't used because they're contained into the minified js so i don't care if they're not cached.

Alessandro Ghidini