How to stop browser from caching web pages-CodePudding

I know this question has been asked many times and I've implemented what I've found online, but it doesn't seem to work.

The background: I'm generating html pages from Python (not using any libraries to help me, just writing raw html out to a text file) to present a processing status report and we keep on getting bit by not remembering to refresh the page. The "last updated" date is displayed prominently at the top but we still forget to refresh.

So is there some way to force the browser to automatically refresh the page each time we look at it without the users having to manually click on "refresh"? We use a variety of browsers on both Macs and Windows so a multi-platform solution would be ideal.

Thank you for any tips,

Catherine

A sample web page looks like the following:

<!--Label: OCO2_B11Forward3-->
<!--Completion status: Partial-->
<!--Has duplicates: False-->
<!--Has gaps: False-->
<!--L0Env_EPS: Percent complete 100-->
<!--L0Env_TPS: Percent complete 100-->
<!--Attde: Percent complete 100-->
<!--Ephem: Percent complete 100-->
<!--L1aEn: Percent complete 100-->
<!--L1aIn: Percent complete 100-->
<!--L1aSt: Percent complete 99-->
<!--GeoCl: Percent complete 100-->
<!--GeoSc: Percent complete 97-->
<!--L1bCl: Percent complete 97-->
<!--L1bSc: Percent complete 97-->
<!--L1bSt: Percent complete 97-->
<!--L2Met: Percent complete 97-->
<!--L2CPr: Percent complete 97-->
<!--L2ABP: Percent complete 97-->
<!--L2IDP: Percent complete 97-->
<!--L2Sel: Percent complete 97-->
<!--L2Lst: Percent complete 97-->
<!--L2Dia: Percent complete 97-->
<!--L2Std: Percent complete 97-->
<meta http-equiv="refresh" content="60"><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" />
<!DOCTYPE html>
<style>
th, td {
}
.column {
  float: left;
  width: 33.33%;
}

CodePudding user response：

Depending on what you mean by "each time we look at it", having your server send a cache-control: no-cache header might help.

If you want it to refresh when you switch to an existing tab with the page already loaded you could add some javascript that uses the Page Visibility API to trigger a refresh when visibilityState becomes "visible".

If you run the snippet below and then switch to another tab and come back, you'll see the refresh code run.

Appending a timestamp to the query string should force the browser to load it without caching.

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    const url = new URL(document.location.href);
    
    // update the timestamp query parameter to prevent browser caching
    url.searchParams.delete('x');
    url.searchParams.append('x', Date.now());
    
    console.log(url.href);
    
    // reload the page.
    // (commented out to avoid possible problems with reloading within stack overflow.)
    // document.location.replace(url.href);
  }
});

CodePudding user response：

If you can use JavaScript, try

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location   '#loaded';
        window.location.reload();
    }
}

CodePudding user response：

That is an incomplete page.

I suggest you fetch your python page and have it generate JSON

{
  "Label": "OCO2_B11Forward3",
  "Completion status": "Partial",
  "Has duplicates": "False",
  "Has gaps": "False",
  "L0Env_EPS": "Percent complete 100",
  "L0Env_TPS": "Percent complete 100",
  "Attde": "Percent complete 100",
  "Ephem": "Percent complete 100",
  "L1aEn": "Percent complete 100",
  "L1aIn": "Percent complete 100",
  "L1aSt": "Percent complete 99",
  "GeoCl": "Percent complete 100",
  "GeoSc": "Percent complete 97",
  "L1bCl": "Percent complete 97",
  "L1bSc": "Percent complete 97",
  "L1bSt": "Percent complete 97",
  "L2Met": "Percent complete 97",
  "L2CPr": "Percent complete 97",
  "L2ABP": "Percent complete 97",
  "L2IDP": "Percent complete 97",
  "L2Sel": "Percent complete 97",
  "L2Lst": "Percent complete 97",
  "L2Dia": "Percent complete 97",
  "L2Std": "Percent complete 97"
}

Then you can have this

If the cache object does not work, change

 fetch("status.py"

fetch(`status.py?rnd=${new Date().getTime()}`

to bust the cache the hard way

// test data
 const data = { "Label": "OCO2_B11Forward3", "Completion status": "Partial", "Has duplicates": "False", "Has gaps": "False", "L0Env_EPS": "Percent complete 100", "L0Env_TPS": "Percent complete 100", "Attde": "Percent complete 100", "Ephem": "Percent complete 100", "L1aEn": "Percent complete 100", "L1aIn": "Percent complete 100", "L1aSt": "Percent complete 99", "GeoCl": "Percent complete 100", "GeoSc": "Percent complete 97", "L1bCl": "Percent complete 97", "L1bSc": "Percent complete 97", "L1bSt": "Percent complete 97", "L2Met": "Percent complete 97", "L2CPr": "Percent complete 97", "L2ABP": "Percent complete 97", "L2IDP": "Percent complete 97", "L2Sel": "Percent complete 97", "L2Lst": "Percent complete 97", "L2Dia": "Percent complete 97", "L2Std": "Percent complete 97" }

<doctype html>
  <html>

  <head>
    <meta charset="utf-8" />
    <title>Status report</title>
    <style>
      th,
      td {
        ...
      }
      
      .column {
        float: left;
        width: 33.33%;
      }
    </style>
    <script>
      window.addEventListener("DOMContentLoaded", function() { // on page load
        let myHeaders = new Headers();
        myHeaders.append('pragma', 'no-cache');
        myHeaders.append('cache-control', 'no-cache');
        let myInit = { method: 'GET', headers: myHeaders };
        const process = data => document.getElementById("tb").innerHTML = Object.entries(data).map(([key, val]) => `<tr><td>${key}:</td><td>${val}</td></tr>`).join("");
        const getData = () => {
          process(data); // comment this out and uncomment below

          /*    fetch("status.py", myInit)
                .then((response) => response.json())
                .then((data) => process(data))
                .catch(function(err) {
                  // There was an error
                  console.warn('Something went wrong.', err);
                });
          */

        }
        let fetchInit = {
          method: 'GET',
          headers: myHeaders,
        };
        const tId = setInterval(getData, 60000);
        getData(); // first time

      });
    </script>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  </body>

  </html>