How do I always serve returning customers the newest html, css and js?

Hi!

First I’d like you to know that I did search the forum for solution and basic answers that could answer my question. Unfortunately they were to advanced for so I’m here to to ask for help.

I want to make sure that the returning visitor always sees the newest version of my website.

I don’t do anything special aside from using the Dropbox integration for content. How do I always serve returning customers the newest html, css and js.

I can understand there are different approaches, I would like the most simple one.

Thanks!!

So you probably found this thread while you where searching - what I do is this (same thing for js):

<?= css('assets/dist/css/main.min.css' . (filemtime('assets/dist/css/main.min.css') ? '?' . filemtime('assets/dist/css/main.min.css') : '')) ?>

filemtime — Gets file modification time

1 Like

“Kirby asset refresh” was not along my search terms :slight_smile: Thanks for your reply though!


Current code:
<?php echo css(array( 'assets/css/main.css' )) ?>

Results in:
href="https://www.domain.com/assets/css/main.css"


So as per your suggestion I would use:
<?= css('assets/dist/css/main.min.css' . (filemtime('assets/dist/css/main.min.css') ? '?' . filemtime('assets/dist/css/main.min.css') : '')) ?>

Questions 1:
<?= css> is this correct? Shouldn’t this be <?php ?

Question 2:
I don’t have a minimised version, can I just remove the ‘min’ part?

Question 3:
Why do you repeat the filetime(‘asset/dist/css/main.min.css’) 3 times?

Question 1:

<?= css() ?> is just a short form of <?php echo css() ?>. Many devs prefer the shorthand version, makes it easier to see echo statements in the code, less typing …

Question 2:

Yes, of course.

Question 3:

That is a short if statement using the ternary operator. It checks for filemtime()first, before adding it to the file.

Question 1: OK!
Question 2: OK!
Question 3: OK! read the ternary operator faq. So if there is a css file main.css then print that file or print the same file? I don’t see any difference in the string “filemtime(‘assets/dist/css/main.min.css’)”

Thanks!

No, it does not check if the file exists but if filemtime('assets/dist/css/main.min.css') returns true, if so, the modification date is added to the css file, in case it returns false, nothing is added. It’s a security measure to prevent errors.

I see, the timestamp is appended to the filename after the ?. Thanks for explaining! I’ll give it a try.

Update: seems to be working fine! Thank you :smile: