Versioned Clientlibs for Browser Cache

[MoiezMa]

Hello, 

We have bunch of VUE and React applications that are built as clientlibs and served through dispatcher etc.clientlibs folder. Issue is when we do deployment we do flush the cache and clear those files but user browser cache have older files. User only see updated clientlibs on "Hard Reload".

I have implemented versioned clientlibs using "ACS Version clientlibs" but to my understanding ACSHASH doesn't apply to Relative URIs, e.g. etc/clientlibs/mysite/styles.css or URIs including a scheme, e.g. http://example.com/etc/clientlibs/mysite/styles.css and //example.com/etc/clientlibs/mysite/styles.css

How can we update the files under etc.clientlibs path if they are cached in user browser? Do we have an option to put file version in this path "/etc.clientlibs/projectName/clientlibs/app.js"?

[arunpatidar]

Hi @MoiezMa 

The ACS Version Clientlibs has certain limitations, and the re-writer does not support the following:

• URIs embedded in CSS or Javascript: This includes background images, web fonts, and similar elements.
• Relative URIs: Such as "etc/clientlibs/mysite/styles.css."
• URIs with a scheme: Including "http://example.com/etc/clientlibs/mysite/styles.css" and "//example.com/etc/clientlibs/mysite/styles.css."
• URIs to non-AEM HtmlClientLibrary resources: For example, "/etc/designs/mysite.css."
• Conditional comments containing tags.
• ClientLibs included by Javascript: This is relevant when using property channels.

https://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs/index.html

A possible solution to ensure dispatcher caching is to use a query string for the version. As the query string bypasses the dispatcher, you will need an HTTPD Apache rewrite rule to remove it. Alternatively, you can add an ignoreParam rule at the dispatcher to cache with the queryString.

The version can be based on the last modification date of the home root page, bundle timestamp, or a configured value.

For example:

<script src="/etc/myproj/my-javascript.js?v=v4-11111111"></script>

In this code, the query string "?v=v4-11111111" is added to the JavaScript file path, providing a version identifier.

[sherinregi]

Hi @MoiezMa 

Can you try the approach given in the below URL with ACS commons appending the md5 value and adding the necessary redirects. 

https://medium.com/@satyambansal001/aem-versioned-clientlibs-for-longer-caching-css-and-js-3f189b0f6...

Although the post talks about keeping the cache longer , it will expire as soon as there is a change in file as the md5 value will change and a new version will be created.

You can also use packaging tools like webpack that will help in generating the chunks that can help in cache burst 

https://stackoverflow.com/questions/39238163/how-to-use-cache-busting-with-webpack

[Shashi_Mulugu]

@MoiezMa how are you building your clientlibs? If you ate using your ui.frontend module, in your build script you can generate md5hash for each file you generate and place it in filename, your Frontend engineer should be able help with this ask.

[Lokesh_Vajrala]

Hi @MoiezMa 

I would recommend setting Cache-Control header in Apache with a short expiry time (5 mins ~ 1hr) for other js and css files without unique hash value. Cache-Control header will be added to the Response Headers by Apache and passed to the browser, which will be honoured by browser and makes the file expired by the specified time. 

Please refer this document for understanding it better - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/con... 

Thanks,

Lokesh

[MoiezMa]

Thank you @arunpatidar @Shashi_Mulugu @Lokesh_Vajrala @sherinregi for replying. So I tried all the options you guys mentioned. One thing I noticed is our clientlibs are added to components and pages through Slightly categories. Regardless of if I put hash in file name or after extension. it's being removed when file is loading in browser. 

example, I added hash in clientlib through webpack cache burst. 

File added to page through Slightly categories

 

Here file is loaded 

[arunpatidar]

Hi @MoiezMa 

Could you check if the ACS Commons versioned clientlibs feature is active for your project? You can find the sample configuration here: ACS Commons Versioned Clientlibs.

If enabled, the clientlibs should load with a hash version.

I also noticed that the minification is also not enabled. Can you check the Adobe Granite HTML Library Manager : A Configuration for ClientLibs 

[MoiezMa]

@arunpatidar I have enabled the ACS Version Clientlib. it's working fine for rest of the scripts but it's only the files in clientlibs that are added to page through slightly categories that doesn't have hash in it. 

the screenshot I shared with you is from author/local. I have minifying setup in other env. and publisher.  

Example these clientlib are added to page through categories. 

Do you guys see this issue as well. if you add clientlib through slightly categories,  acsHash is not added when file load in page.

[arunpatidar]

Hi @MoiezMa 
What is the difference in above two clientlibs?

Can you share the HTL/Sightly code for both the case, working and non working?

[MoiezMa · Accepted solution]

so it turns out I had to change order in my rewrite, which was causing the issue. I had other rewrites from analytics which were taking priority. 

in anyone else have similar issue in future, please check if you have other rewrites setup with higher order.

Go to /system/console/status-slingrewriter and check if "versioned-clientlibs" is added and it has highest order value. example, I had to put my at 999.