Backoffice ZK and corrupted classWebResources

[Former Member]

Hello community.

We just added the Backoffice product cockpit to our system to get rid of the old product cockpit. However when deploying we noticed that the interface was broken and it had a problem loading the components because of JS and CSS problems in the browser in one environment. Please note that we have three environments, DEV, QA and PROD. In QA we got this problem not in DEV and it doesn't matter if we do a reset everything or restart the server because the problem seems to be that the users of Backoffice have cached the resources in their browsers.

If you reset the caches in the browser then Backoffice works flawlessly without any problems. We as developers have no problem with this but our users of Backoffice don't like this inconvenience and forget that things like this can happen. That for some reason their browser, be it firefox, IE or Chrome just messes up the resource cache and doesn't understand when new things were added to Backoffice.

I tried searching for this ZK problem. Because I believe this is a problem with ZK more than the Backoffice application, please correct me if I am incorrect making that assumption. What I found was this:

https://www.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_Library_Properties/org.zkoss.web.cl...

Which sounds like it would fix our problem with corrupted web resources in Backoffice that keeps happening but that would affect performance. Though right now I don't see any other option than to disable the resource cache because it is very annoying that we cannot guarantee the quality of our releases because our users browsers may screw up with the local web resources which we don't see and don't have a way to resolve for them automatically to give a good user experience.

Sadly I cannot specify when and how this happens because everything seems correct on the server and we have not found a way to recreate this because it can work in my browser but in user X it doesn't and then they look at their colleague and there is works as well using the same company provided internet explorer browser version automatically updated by the IT operations team. The only solution we know is to reset the caches in the browser and then everything works again as if nothing happened.

I attach an image of the state of the browser when opening dev tools:

[Former Member]

Our current solution we tell our users when they contact us with problems like this is to do a CTRL SHIFT R. That always solves the problem. We have had this problem btw since Backoffice was introduced but we've never been able to reliably reproduce it and we've always had more important issues so we just ignored it. Now at least it is documented here.

[Former Member]

When looking at this quickly I see that is complains about a widget we made in a module extension of Backoffice:

In the css of this file we have:

 @import "cockpitng-globals.scss";
 
 .yw-catalogTree  .z-treerow{
   background-color: #eaedf1;
 }

So it might actually be our mistake as well. This was made two years ago so it very well may be. However, why does it then just start to work if you reset the browser cache? Is the import of the cockpitng-global.scss wrong? Does it have to be an absolute path because when I look at the explorer tree scss it specifies an absolute path: @import 'XXX/bin/ext-backoffice/backoffice/resources/backoffice/generated/backoffice/scss/backoffice-variables.scss';

[Former Member]

Exploring this a bit further I see that the cockpitng style import is not related to the problem. It is the stale javascript. The HTML changed because we added the product cockpit but the javascript didn't update. It was cached i the browser. We also figured out why it broke for user X and not user Y. User X used Backoffice before the cache expired so user X had the cached JS. User Y had not used Backoffice in a while so the JS had expired so the user got the fresh JS right away. Then the user gets no problems.

[Former Member]

I have more about this now. ZK by default hashes all javascript using the setup here: org.zkoss.zk.ui.http.SimpleWebApp. It is the following method that's the base for the hash created by ZK: org.zkoss.zk.ui.impl.AbstractWebApp#getBuild.

Hybris provides two ZK library jars. One "patched" and one standard ZK. Both supply a class like this. I have no idea which one loads. In any way. In the patched version from Hybris there it reads this file XXX/bin/ext-cockpit/cockpit/lib/zk-3.6.4-hybris-patched.jar!/metainfo/zk/build

It uses the content in that file as the base for the resource hashes. According to the ZK documentation in case you want to always on a server restart make the client reload all the web resources you have to in every deployment change this hash number to make the browser notified of the resource changes. For me it doesn't change on an ant clean all. Hence resources are cached across deployments.

I haven't really figured out more than this but if I can extend the aforementioned class with my own build method that will on each build or deploy recalculate the resource hashes then everything will start to work and our users will never have to face this problem again.

[Former Member]

I just thought about something. If it is this file that Hybris Backoffice ZK uses in order to create the resource hashes than maybe we can in a preconditional build step just flip a digit in it and then the hashes will change instead of trying to add our own extended class.

It would be nice with someone with actual implementation experience for the Backoffice ZK framework could give some feedback on this and what the original idea is. Hybris people obviously changed from the default ZK hash build file where it only says the release date of that ZK version while it in the Hybris patched version says something totally different. Maybe a Hybris build number.

In any case here is the official ZK documetation: https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Performance_Tips/Control_resource_caching

Worth noting. My experience with ZK is limited since I have more of a (spartacus) / angular background experience. So I really don't know much else than what the documentation tells me.