Caching issue for JS/CSS in Media Library node

Question

We have one caching issues on live site. Actually we keep JS/CSS files in sitecore media library so after every prod deployment when we publish updates JS file we have to press Ctrl+F5 to load latest JS file updates. This is fine for Developers but not for visitors and we can't instruct every visitors to press Ctrl+F5.

<script src="/-/media/common/js/productlisting.js"></script>

To mitigate this issue we are planning to add time-stamp as a query string in src attribute in <script> element as described in below URL

https://css-tricks.com/can-we-prevent-css-caching/

and this looks like need modification in sitecore media pipelines. Any idea how can we do this.

OR

Any other suggestion much appreciated

Thanks

UPDATE 07/17/2017

Below Patch works for me

<mediaProvider>
        <patch:attribute name="type">MyProject.Pipelines.CacheBustingMediaProvider, MyProject</patch:attribute>
</mediaProvider>

I see very strange behavior see screenshot. While debugging I found code between line no. 16 and 34 is not getting executed. You can see when I tried to set debug at line no. 14 it throw exception. finally debug point come to line no. 12 and then directly goes to line no. 36 and goes out. Any idea on this.

Answer 1

If you're looking to continue storing these files in the media library (there are pros and cons to this approach), you'll need to subclass Sitecore.Resources.Media.MediaProvider, override GetMediaUrl(MediaItem item, MediaUrlOptions options), and patch it into your configuration.

The default Media Provider is set in Sitecore.config with <mediaProvider type="Sitecore.Resources.Media.MediaProvider, Sitecore.Kernel" />. You'll want to use a config file to patch this value to your custom MediaProvider class.

In GetMediaUrl(), you have access to the MediaItem object, you have access to the Extension field which you could use to determine if the item is JS/CSS. You'll also need to pull the updated date from the statistics of the Sitecore item.

Finally, you'll want to get the URL that the default MediaProvider returns, and modify that. The following is the basic jist of what I'm suggesting.

public class CacheBustingMediaProvider : Sitecore.Resources.Media.MediaProvider {
    public override string GetMediaUrl(MediaItem item, MediaUrlOptions options)
    {
        var requiredExtensions = new[] {"js", "css"};

        var baseURL = base.GetMediaUrl(item, options);

        if (requiredExtensions.Contains(item.Extension))
        {
            var rawItem = item.Database.GetItem(item.ID);
            var itemTimestamp = (rawItem.Statistics.Updated.Ticks - 621355968000000000) / 10000000;
            var urlComponents = baseURL.Split('?');

            Sitecore.Collections.SafeDictionary<string> queryString;

            if (urlComponents.Length > 1)
            {
                queryString = Sitecore.Web.WebUtil.ParseQueryString(urlComponents[1]);
            }
            else
            {
                queryString = new Sitecore.Collections.SafeDictionary<string>();
            }

            queryString["t"] = itemTimestamp.ToString();

            var finalQueryString = Sitecore.Web.WebUtil.BuildQueryString(queryString, true);

            return urlComponents[0] + "?" + finalQueryString;
        }

        return baseURL;
    }
}

There's another few examples of using a MediaProvider here: https://allthingssitecore.com/2014/03/26/integrating-a-cdn-into-your-sitecore-solution/