topic Re: How to force a browser cache refresh after updating WAB app in ArcGIS Web AppBuilder Questions

How to force a browser cache refresh after updating WAB app

AdrianWelsh — Sun, 12 Dec 2021 02:28:20 GMT

Hi, I am hoping there is a 'simple' answer for this as I have seen a few complicated answers. Long story short, I have a Web AppBuilder app that I built through the Developer edition (2.1) and it is hosted on my website. After it is posted and loaded, if I update certain aspects of the app and change them on the web, they do not reflect due to the browser cache (as far as I am aware).

Robert Scheitlin, GISP‌ pointed me to a couple of very helpful threads but I feel like I need just a little more help so I am posting a new question (sorry GeoNet).

In this thread,

Refreshing Web Appbuilder

Stan McShinsky‌ asks how to refresh WAB. His conclusion was to edit that last few lines of the main index.html file to reflect this:

<script src="env.js?ver=1.1"></script>  
<script type="text/javascript" src="simpleLoader.js?ver=1.1"></script>  
<script type="text/javascript" src="init.js?ver=1.1"></script> ‍‍‍

He indicated he had little success with this, so I'm a little hesitant on making these changes. Question, what does adding "ver=1.1" do and what can improve this?

In this thread,

Automate Cache Clearing - Web App Builder

Sam Libby‌ linked back to a stacked overflow post that mentions how to 'control web page caching' here:

http - How to control web page caching, across all browsers? - Stack Overflow

This sounds like a good answer but I am not sure how to make the changes suggested in the SO post. There are many ways to "set" the change (including using PHP, node.js, ASP, Ruby, etc etc) but I am not skilled enough to know what change I need to make in my app. Question, can someone point me in the right direction on which change I need to make to my Developer Edition WAB application, based on the link above, on how to 'control web browser cache'?

Since that thread was written eight years ago, would it be safe-ish to assume that changing the HTML4 code section would be the right answer?

<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" />‍‍‍

Thanks in advance and sorry for the long post!

Re: How to force a browser cache refresh after updating WAB app

StanMcShinsky — Thu, 08 Dec 2016 23:14:11 GMT

Adding text after the "?" like "?ver1.1" is suppose to tell the browser that there is a new version of the file and should grab it. If is is the same file name the browser keeps a local copy to make things faster. You could set up some code to add a time value after the ? so every time you open the web page it will be a new file name for the javascript file. By adding the ver1.1 it just allows you to control when you want the browser to update the needed files. This sounds like it should work, but like I said before I have not got this to work for WAB yet. unless someone knows how to do it.

Re: How to force a browser cache refresh after updating WAB app

RebeccaStrauch__GISP — Thu, 08 Dec 2016 23:57:54 GMT

When posting a link to this discussion on the resource list, I noticed I had a link to this site

Refreshyourcache.com - The Guide to Clear your Browser Cache!

That is more for manually refreshing I believe, but good to include in your discussion.

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Fri, 09 Dec 2016 16:05:27 GMT

Stan,

This makes sense. I have not tried it but I suppose it won't really hurt so I will try it soon. I too would like to know of someone who might have had success with something like this.

Thanks,

Adrian

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Fri, 09 Dec 2016 16:07:01 GMT

Becky,

I agree, it is a little too manual for what I am looking for, but still it's a great resource that delivers easy info all in one space. Thanks for sharing this!

~Adrian

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Sun, 12 Dec 2021 02:28:23 GMT

Ok, I tried putting in Stan's code AND that HTML4 code block both into my index.html file. Neither one appeared to have forced the browser cache refresh. Does that mean virtually nothing can be done? Or maybe wait a day or so and see if refreshes happen on their own?

Robert Scheitlin, GISP‌ or Sam Libby‌, any ideas?

I am guessing I need something more robust in my index.html file than 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" />‍‍‍

Re: How to force a browser cache refresh after updating WAB app

RobertScheitlin__GISP — Mon, 12 Dec 2016 19:42:29 GMT

Adrian,

The issue is that the meta tags are not used in most modern browser in lieu of the response header from the server:

Important to know is that when a HTML page is served over a HTTP connection, and a header is present in both the HTTP response headers and the HTML <meta http-equiv> tags, then the one specified in the HTTP response header will get precedence over the HTML meta tag. The HTML meta tag will only be used when the page is viewed from local disk file system via a file:// URL. See also W3 HTML spec chapter 5.2.2. Take care with this when you don't specify them programmatically, because the webserver can namely include some default values.

I have never found a good answer to this issue and the need for it has always been far and in between for me, so loosing the cached resource ability for my site is not an answer for the few times I need to ensure the latest is received by my users.

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Tue, 13 Dec 2016 15:03:37 GMT

Hmm,

I guess there is a lot that I do not understand and maybe you're right, there isn't a strong need for this. The next paragraph even goes on to say:

Generally, you'd better just not specify the HTML meta tags to avoid confusion by starters, and rely on hard HTTP response headers. Moreover, specifically those <meta http-equiv> tags are invalid in HTML5. Only the http-equiv values listed in HTML5 specification are allowed.

...if I was paying attention.

Plus, further down the thread someone points out:

(hey, everyone: please don't just mindlessly copy&paste all headers you can find)

Well, I suppose I will leave the defaults in and just deal with it (though, I am secretly sort of still looking into it... I keep finding almost answers, or solutions that work for some but not for all; it's just one big giant tease...).

One weird thing - my browsers are inconsistent in terms of when they will show the updated content. Sometimes it's instant, sometimes it's hours later, but, it seems that over time the browser will show the updated stuff. Weird...

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Tue, 13 Dec 2016 23:03:37 GMT

Ok, so no more beating the dead horse. Here is what I learned with my testing and limited knowledge.

A) Sometimes the web browser will refresh automatically to where the user does not need to do anything.

2) When the browser does not refresh automatically, it will eventually refresh (give it a day max, then it should be where it needs to be).

D) I have been successful in forcing FireFox to clear its cache (I am not sure why it isn't working in Chrome and I don't look at other browsers). I used this thread: No caching in HTML5 - Stack Overflow ... and followed these directions to create an appcache manifest file and throw it into the index.html file:

Here is an example of your-manifest-file to force updates to all resources.
CACHE MANIFEST NETWORK:*
and append manifest attribute to <html> element.
<html manifest="your-manifest-file">
Required for all HTML files you want to disable cache.
Can not be avoided because it is specification of HTML5.

- (there is also decent info here: HTML5 Application Cache )

Either way, I am finished looking into this and appreciate everyone's help with this!

(did anyone catch the reference in the 'numbering' above to a certain holiday movie?)

Re: How to force a browser cache refresh after updating WAB app

SebastienPelletier — Fri, 03 Mar 2017 13:39:38 GMT

I have the same problem with Chrome does anybody found a solution?

Re: How to force a browser cache refresh after updating WAB app

JunshanLiu — Tue, 07 Mar 2017 07:03:06 GMT

Now, there is a variable (deployVersion) in env.js to avoid cache.

Whenever you update your app, you can change this variable to avoid browser cache.

But there are still some limitations:

* The images and fonts in the css files may still be cached.

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Thu, 09 Mar 2017 07:26:08 GMT

This sounds very promising. I haven't tested it yet but not sure I am doing this right.

I found the env.js file in the root folder of one of my apps. On line 81, this is written:

deployVersion = '2.2';‍

I currently have WAB 2.2. Does that mean I just need to change this variable (to anything or to something like 2.3 or 3) in order to make the app avoid browser cache?

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Sun, 12 Dec 2021 02:28:26 GMT

Looking at this further, that deployVersion variable is used towards the end of the script in a function called 'appendDeployVersion' (and that function is used twice above it) as indicated here:

global.avoidRequireCache = function(require){
 var dojoInject = require.injectUrl;
 require.injectUrl = function(url, callback, owner){
 url = appendDeployVersion(url);
 dojoInject(url, callback, owner);
 };
 };
global.avoidRequestCache = function (aspect, requestUtil){
 aspect.after(requestUtil, 'parseArgs', function(args){
 args.url = appendDeployVersion(args.url);
 return args;
 });
 };
function appendDeployVersion(url){
 if(/^http(s)?:\/\//.test(url) || /^\/proxy\.js/.test(url) || /^\/\//.test(url)){
 return url;
 }
 if(url.indexOf('?') > -1){
 url = url + '&wab_dv=' + deployVersion;
 }else{
 url = url + '?wab_dv=' + deployVersion;
 }
 return url;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But, I assume the only place that the variable should change would be in line 81 that says deployVersion is '2.2'.

Re: How to force a browser cache refresh after updating WAB app

MichaelRobb — Fri, 11 Aug 2017 20:16:03 GMT

using deployVersion does not work.

This 'deployVersion' is for appending the version to the URL, but in no way does this help if one deploys a web application to a web server (e.g. IIS), the users use their browsers and then you upgrade the app and re-point the IIS web application to the new (upgraded version) app.

The user would type in the same URL... but this mentioned deployVersion doesnt force a browser refresh.

I also tested this to validate... result was, users still loaded prior web app and had to force using browser manually.

Re: How to force a browser cache refresh after updating WAB app

MichaelRobb — Fri, 11 Aug 2017 20:16:44 GMT

Does that mean I just need to change this variable (to anything or to something like 2.3 or 3) in order to make the app avoid browser cache?

I could never validate that this worked.

Re: How to force a browser cache refresh after updating WAB app

pfoppe — Fri, 08 Jun 2018 19:32:58 GMT

We were experiencing css files being cached in chrome (from disk). It appears that chrome was not checking the ETag, cache-control, expires, or last-modified headers to determine if the .css files should be re-cached (as described here and here). we tried manually adding headers in our IIS server and still no success getting chrome to re-load the .css files. Forcing all the anonymous users to clear the cache or force refresh is not an option.

Bottom Line:

We updated the env.js deployVersion value and that did add the new value to the URI which does require chrome to load a new .css file (since it looks like a new resource). Our plan is to update this deployVersion variable on deployment time to avoid the cache. So far its working well...

Here was the URL being loaded from the cache:

And when updating the deployVersion variable, the browser does "reload" the css file since it sees it as a new URL:

Re: How to force a browser cache refresh after updating WAB app

AdrianWelsh — Mon, 11 Jun 2018 18:01:18 GMT

Thanks Patrick, this is helpful. I'll have to check this out when I get back to this application!

Re: How to force a browser cache refresh after updating WAB app

MichaelRobb — Fri, 12 Oct 2018 16:53:41 GMT

For reference, the best approach I have found to work without ever having an issue is to do the following:

Add a clientCache control (in the web.config) and set the controlMaxAge to your desired time.

e.g.

<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00"/>

Re: How to force a browser cache refresh after updating WAB app

daveostrander — Tue, 08 Jan 2019 22:09:55 GMT

Hi Michael, just tried editing the web.config file using your supplied code. The only thing I changed was to change the time frame from 1 day to 5 minutes, and didn't seem to have any luck when using Chrome. It's possible I put the code in the wrong spot, in this case, within the staticContent tags. I tried a couple of other places, but that ended up breaking the application entirely. Since there is not that many spots to put it, is there something I am missing?

Re: How to force a browser cache refresh after updating WAB app

daveostrander — Wed, 09 Jan 2019 19:52:57 GMT

False Alarm. I believe that my Chrome browser just went to lunch. As is typical for me, I have a billion open tabs at all times, and usually they remain open for days on end. I believe that the browser just needed to be completely closed and that would have solved the issues I was seeing in Chrome. However, for those of you looking for a complete listing of the myriad of ways to control user caches (in IIS at least) this documentation lists them all.

My plan going forward will be to use the "Set Common HTTP Response Headers" in IIS manager and set the "Expire Web Content" to immediately (A.K.A. No Cache) on an individual application or on all of them depending on what has been updated, and then leave that in place for at least a few weeks to ensure that most if not all users will get the refresh. Once satisfied that everyone is now pointing at the newest version then I will simply flip the IIS setting back to once again improve application performance.

Hope that helps