Refreshing Xara Resources

Dear Xara...

Over the years, TG has advised users of the need to purge the local browser cache so recent page changes can be seen by all. Clearly, a lot of the time this only affects the designer but, unfortunately, impacts keen clients too just at the time of closing the design. The experience of pressing Ctrl+F5 is blatantly not a solution. Meta headers are also not the way ahead either.

With the recent discourse in https://www.talkgraphics.com/showthr...er-browsers-OK, it is apparent that caching can be outwith the control of the designer; not just server caching but CDN and other hosting services. Your Xara developers have the ability to configure their development environment and therefore do not encounter these bugbears as frequently.

The major snafu is around cached CSS/JS assets; (jquery.js, prs4.js, roe.js, ani.css) are probably static. The ones that probably matter the most are (replaceMobileFonts.js, custom_styles.css, xr_all.css, xr_fonts.css, xr_text.css, xr_main.css).

My proposal is the latter clutch are uniquely timestamped (e.g., xr_fonts.css?1572007718266).
In the header of the index page, we would then have:

Code:

---

<link rel="stylesheet" href="index_htm_files/xr_main.css?1572007718266"/>
 <link rel="stylesheet" href="index_htm_files/custom_styles.css?1572007718266"/>
 <link rel="stylesheet" href="index_htm_files/xr_text.css?1572007718266"/>
 <link rel="shortcut icon" type="image/ico" href="index_htm_files/favicon.ico"/>
 <link rel="icon" type="image/ico" href="index_htm_files/favicon.ico"/>
 <meta name="msapplication-TileImage" content="index_htm_files/tileicon.png"/>
 <link rel="apple-touch-icon" href="index_htm_files/tileicon.png"/>
 <script src="index_htm_files/roe.js"></script>
 <script src="index_htm_files/replaceMobileFonts.js?1572007718266"></script>
 <link rel="stylesheet" href="index_htm_files/xr_all.css?1572007718266" id="xr_mvcss"/>

---

This would result in an additional 128kB download for each new update but caching kicks in inbetween.

Could you implement this or a similar stratagem into your Xara HTML filer as a matter of high priority?

Thanks,
Acorn

I can't say I follow that exactly Acorn but I guess what you're asking is that js & css files are exported with unique file names (date stamped) every time to ensure they are not cached? Sounds like a very sensible & easy solution to me.

So +1

Quote:

---

Originally Posted by Egg Bramhill

I can't say I follow that exactly Acorn but I guess what you're asking is that js & css files are exported with unique file names (date stamped) every time to ensure they are not cached? Sounds like a very sensible & easy solution to me.
So +1

---

Thank you Egg, almost but not quite. The filename remains the same but the browser is conned into believing it is different with the query term (? + event.timeStamp) and therefore fetches it from the server, bypassing caching. The local cache then has
filename?event.timeStamp cached so a second and subsequent fetches use the cache.

Acorn

I'll take a look and raise this in our next feature set meeting.

Thanks
Rob

Rob, grateful,
Acorn

Thanks for the clarification Acorn.

Here is a work-in-progress: Attachment 125463.

Look at if as if you are going to each external CSS and JS file's address and separately pressing Ctrl+F5.

Only the code in Web Properties > Page > HTML Code Insertion > HTML Code (head) needs to be copied into your first page head (index).

Code:

---

<script>
var markTime = Date.parse(document.lastModified) / 1000;
document.write("<script src='index_htm_files/replaceMobileFonts.js?" + markTime + "'><\/script>");
document.write("<script src='index_htm_files/roe.js?" + markTime + "'><\/script>");
document.write("<link rel='stylesheet' href='index_htm_files/xr_main.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/custom_styles.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/xr_all.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/xr_text.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/xr_fonts.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/xr_fonties.css?" + markTime + "'\/>");
document.write("<link rel='stylesheet' href='index_htm_files/ani.css?" + markTime + "'\/>");
</script>

---

Use // at a line start to prevent the file being refreshed with a query call to a published timestamp.

I do not guarantee its use in your production site; it is a discussion topic on a possible way ahead.

Acorn

Hello,

Did Xara ever do anything to fulfill this request? It is a big problem when you make changes to your website and visitors are seeing an outdated version or a site that is corrupted due to clashes with cached and non-cached CSS.

UPDATE

Not a hint of any movement on this from Xara.

Cloudflare advises is reverts fred.css?anything to fred.css so this approach is no work pursuing.
The good news is fred.hash.css will work.

'hash' above is a hash of the file contents of fred.css.

Take the current ani.css, unchanged since 2015 in the xara offering.
An MD6 hash (Size 24 / Level 16) returns 0d4e71, so ani.css becomes ani.0d4e71.css.
Say now just the Copyright year was changed from 2015 to 2020 , the file published would be ani.6b9288.css.

The point is ani.css would never be fetched from the server until is hash is different. Such a file could be set for a max-age of a year and be taken as immutable.

The files that change more frequently and are currently server-cached, like roe.js and the settings for the fonts used, are handled the same way; there would just be more hashed versions on the server but they are fairly small and when development is done, purged.

A great read is https://csswizardry.com/2019/03/cach...for-civilians/.

This article, https://css-irl.info/troubleshooting-caching/, is more for Xara to suggest how it could be introduced into its coding environment.

Acorn