Website page cache causing problems

Wappler General
#1

Current set-up : SPA Pages, Windows 10, MySQL, PHP

Some users are looking at my pages and seeing old, cached pages. By old I mean pages from a day ago, or an hour ago, and the page has been updated since then.

An example from today… a client is in Corfu, on his iPad he has updated some information but cannot see the changes on a separate page nor see the changes in a PDF that is generated. It seems he is still looking at pages from yesterday. I looked and I can see the changes from here in the UK.

Could this be a simple caching problem?
How do I force any browser to always disregard cached pages?
I don’t know if this is worse on iPads/iPhones or tablets. Maybe it’s worse when in a different region from that of the server.

If anyone one could make some suggestions or educate me on this matter I would much appreciate it.

@Hyperbytes made this suggestion in another post some time ago…

     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
     <meta http-equiv="Pragma" content="no-cache"/>
     <meta http-equiv="Expires" content="0"/>

But should this be on every page? Parent pages? Child pages?

And would this be enough?

I don’t suppose there is anything to change within the server control panel to help matters.

The site will only ever have low volumes of traffic.

#2

Every parent page that you do not want to cache

#3

Although thinking about it more, forcing no-cache kind of defeats the concept of an SPA as it will force a full reload every time

Sorry forgot CTRL+F5 should force reload

#4

Yeah, that makes sense.

Can’t do a Ctrl-F5 on an iPad though, can you?

Just out of curiosity, is there any difference between Ctrl-F5 and Ctrl-Shift-R ?

#5

Can you put these on the Child pages? Will that work?

     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
     <meta http-equiv="Pragma" content="no-cache"/>
     <meta http-equiv="Expires" content="0"/>
#6

I think the main refresh methods are

  • Hold the Ctrl key and press the F5 key.
  • Hold the ⇧ Shift key and press the F5 key.
  • Hold the ⇧ Shift key and click the Reload button on the navigation toolbar.
  • Hold the Ctrl key and click the Reload button on the navigation toolbar.
    Basically the F5 versions are key only, the others involve a click

On iPad you could try Apple + R or command + R (don’t do iPads so cant test)

As to adding to an SPA page, i really don’t know.

#7

What we do is add random (or datetime) values to the page URL in the dmx-route definition of the SPA on the index page.
So the dmx-route tag would have url as “spa_mypage1.html?v=333”.
Then, when we wish to release a change to prod, we just change it to say “v=334”.
A regular reload should just get the latest index page, with the “NEW” SPA URL, causing the SPA route to reload.

2 Likes
#8

Wow!
Sorry for this long post :wink:

I had a problem. When a user generated a replacement diagram (showing the damaged area on a car), the replacement diagram would not show when recreating a PDF.

What I needed was to add a dynamically changing parameter to the URL for the diagram, something like this '?v=123'. After lots of faffing around, trial and error etc I found that the PHP PDF Conversion Library I was using (html2pdf) would not process a URL parameter inside the template, nor would it accept any of these meta tags.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

This was a major problem and I had to think outside of the box (for me anyway :smile: )

Initially I had the diagram saved with each job, so in this case 'damagedarea.png' was saved under job number '15'. This made it easy to reference and keep for future use.
'admin/repository/reports/15/damagedarea.png'

I now knew I could not use URL parameters like this
'admin/repository/reports/15/damagedarea.png?v=1600251135'

I thought of putting the dynamic reference as part of the file name, but this would be a nightmare to reference in the future as I would have to store this info in a database etc, adding more complexity. And if the user kept making more and more changes, then the number of diagrams would build up, and this would be uncontrollable ie
'admin/repository/reports/15/damagedarea1600251135.png'
'admin/repository/reports/15/damagedarea1606587546.png'
'admin/repository/reports/15/damagedarea1573548444.png'
etc. We only ever need the last diagram created.

My solution

Because the PDF was generated in one instance using a Server Action, I thought of saving and keeping the PNG file as originally planned
'admin/repository/reports/15/damagedarea.png'

but then to create a temporary copy

  1. create a 'temp' folder within the job folder
  2. inside which I create a dynamically referenced folder using TIMESTAMP ie '1600251135'
  3. inside which I put a copy of the PNG file

like this
'admin/repository/reports/15/temp/1600251135/damagedarea.png'

I could then set a session variable 'for_PDF_img' and use this dynamic file link in the PDF Template and it would work, it linked to the newly created PNG file.

If the user kept making changes and updating the diagram, it would always overwrite the original
'admin/repository/reports/15/damagedarea.png'

To prevent a built up of files in the 'temp' folder, this folder would be emptied at the beginning of each process. Not at the end of the Server Action because the file was yet to be referenced in the PDF Template and so was still required after the Server Action had finished processing.

My simple Server Action

image
image437×663 25.9 KB

And here are each of the Server Action components…

image

image

image

image

image
image442×513 14.7 KB

image

image

This is how part of the process looks to the user

Here the user puts arrows and crosses on a diagram of a car using HTML5 Canvas and Saves.

image
image416×893 62.4 KB

That diagram is then saved as a PNG file and used in various parts of the website.

image

They can then create a fresh PDF when changes have been made.

There is a link to the newly created PDF

image

And here is part of the PDF Report showing the inserted diagram which cam from
'admin/repository/reports/15/temp/1600251135/damagedarea.png'

image

Conclusion

That’s my experience and my solution. It works well but I would certainly welcome any comments or even alternative solutions.

1 Like
#9

Hello :slight_smile:

Can it be done to a regular static BS5 page, not SPA ?
Also how to access “dmx-route” within Wappler ?

It would be an elegant solution to add versions of website.

Now, I’ve just disabled cache with @Hyperbytes suggestion in the client’s website with this:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

Before that I was a bore that always ask client to clear cache in his browser before reloading the page :sweat_smile: