-1

We have a javascript installed in our client website (sdk.js , sort of like Google Analytics tracking code), and the javascript file has 30 days cache time(max-age) for bandwidth saving purpose. Every time we have released a new javascript, how can we make the script refresh it self?

Here is what I thought: First, the client has installed our javascript file:

<script type="text/javascript" src="https://cdn.exampleAPI.com/js/sdk.js" async></script>

In the script, it will fetch our backend API, then the API response with a 'latest_sdk' field, and the cached script will compare it with current local sdk.js version and decide to refresh the cached js or not, will this work? Or any other solution?

const LOCAL_SDK_VERSION = '0.1';
fetch('https://exampleAPI.com')
    .then(response => response.json())
    .then(data => {
        var latestSDK = data.info[0].latest_sdk;
        if (LOCAL_SDK_VERSION < latestSDK) {
        console.log('New version SDK available: ' + latestSDK);
        var newSDK = document.createElement('script');
        newSDK.src = 'https://cdn.exampleAPI.com/js/sdk.js?v=' + latestSDK;
        document.head.appendChild(newSDK);
    })
    .catch(error => console.error('catch error:', error));

P.S. Since the script was installed in our client website, we can Not force to refresh/or modify the page.

tvvocold
  • 49
  • 1
  • 9
  • There can be multiple options to achieve this. What you are proposing is a correct solution, but it will require you to write your own logic. You can use the hash mechanism or add a version in the JS file. Check this [link](https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files) – Apoorva Chikara Aug 08 '22 at 04:58

2 Answers2

1

If you're willing to hit an API on your server in order for the API to inform the client of the latest version number of the script, it's probably more performant to just use the HTTP cache headers to tell the client to revalidate the freshness of the resource on every page load. This can be done by getting rid of the max-age, and just sending the response header:

Cache-Control: no-cache

along with a correct Last-Modified header indicating the modification timestamp of the js file. (This will happen out of the box assuming the file is just hosted on a static web server)

This will cause the client to send an If-Modified-Since header with the timestamp of the version it currently has in cache, and if this matches the current version, the server will simply give a 304 Not Modified response with no body, thus having a low bandwidth consumption.

Have a look at the MDN documentation about HTTP caching for more details: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

Jonas Høgh
  • 10,358
  • 1
  • 26
  • 46
-1

Just do a hard refresh after you prompt the user with a new version available message: window.location.href = window.location.href or window.location.reload(true)

Adiat Hasan
  • 372
  • 3
  • 12
  • thx for the answer, but we can't force to refresh the page, since its our client's website. we need update the JS file using the sdk.js it self. – tvvocold Aug 08 '22 at 04:46