How to force a browser cache refresh after updating WAB app

[AdrianWelsh]

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!

[StanMcShinsky]

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.

[AdrianWelsh]

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

[RebeccaStrauch__GISP]

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.

[AdrianWelsh]

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

[AdrianWelsh]

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

[RobertScheitlin__GISP]

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.

[AdrianWelsh]

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...

[AdrianWelsh]

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?)

[SebastienPelletier]

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