How to reference static resources from a Community HTML header in a cache-compatible way?

Question

Communities allow you to specify an HTML document as a header. However, it's just static HTML – no VisualForce. Therefore, you can't use URLFOR() to generate cache busting URLs to static resources, and you're stuck using the "cache forever" URLs, .e.g.:

/community-name/resource/MyStaticResource/js/some-code.js

I currently use a build step that generates cache busting URLs and merges them into the HTML document any time the static resource zip is built, but I'm wondering if there's a simpler way.

Answer 1

If its just a single file (so there are no issues with order of loading as this code loads the JavaScript asynchronously) you can work out the URL in JavaScript like this:

<script>
(function() {
    var script = document.createElement('script');
    script.src = '/community-name/resource/'
            + Date.now()
            + '/MyStaticResource/js/some-code.js';
    document.head.appendChild(script);
})();
</script>

Using the current date timestamp ensures the latest version of the static resource is obtained. That is the technique used in this sample AngularJs app, though there the JavaScript would only be requested, cached and used once per application session. But for your use, the JavaScript would be requested and cached every time a page is opened.

If your present system works well, probably better to stick to it than use the above.