Fetch: Default caching is different in IE11 compared with other browsers

[jslegers]

I would expect that the default behavior of IE11 (that means without touching cache settings) is the same as that of other browsers when I use fetch. It is not.

Consider my use case :

Up until yesterday, the sample code of LuciadRIA still made use of dojo/request for XHR requests. When replacing dojo/request with a fetch based implementation, I've looked into this polyfill for dealing with IE11.

After replacing dojo/request with fetch, the server correctly updates the data in all browsers whenever I send a PUT request to my rest store. But when I refresh my browser, all browsers show the updated data... except IE11. IE11 still shows the original data loaded, unless I first cleared my cache. It took me many hours of frustrated head scratching to figure out why IE11 didn't behave the same as other browsers and realize that there was a caching issue.

Cache busting does solve this problem, but it feels like a hack... and I feel like it kind of defeats the purpose of using a polyfill when I have to use hacks like this to make every browser have the same default behavior. This, especially considering I did not need to use this sort of black magic when using dojo/request.

[mislav]

Thanks for explaining. This polyfill is at the mercy of the browsers native implementation of XMLHttpRequest. What are you suggesting that we do here?

Note that our polyfill is _by design_ less ambitious in feature set than dojo/request.

[jslegers]

What are you suggesting that we do here?

I'm not sure.
Are there other ways besides cache busting to prevent caching with XMLHttpRequest?
Any idea how dojo/request addresses this issue?

[mislav]

Any idea how dojo/request addresses this issue?

I think they just append a cache busting parameter.

I'm not sure.

You've opened a duplicate issue of one already closed, we had hoped that you have a concrete suggestion. 😉

[nguyenxuanduc]

Hxhx

[ConradSollitt]

Greetings, I’ve actually followed this issue for well over a year after switching a project that used XHR with cache busting to the fetch Polyfill.

Basically IE 11 uses very aggressive caching - much more than any other browser so it causes issues when IE users use it on apps that need to display real-time data on each page refresh.

I was hoping someone would resolve this by known but seems like it might not ever be added so I just updated my project to use Cache Busting. It’s based on jQuery logic and I used it successfully for years with IE users.

You can see what jQuery does here: https://github.com/jquery/jquery/blob/master/src/ajax.js

And the project I use it on is here (related code in this comment):
https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js

var isIE = (navigator.userAgent.indexOf('Trident/') !== -1);
if (isIE && (options.method === undefined || options.method === 'GET' || options.method === 'HEAD')) {
    if (options.cache === 'no-store' || options.cache === 'no-cache') {
        // Search for a '_' parameter in the query string
        var reParamSearch = /([?&])_=[^&]*/;
        if (reParamSearch.test(url)) {
            // If it already exists then set the value with the current time
            url = url.replace(reParamSearch, '$1_=' + (new Date()).getTime());
        } else {
            // Otherwise add a new '_' parameter to the end with the current time
            var reQueryString = /\?/;
            url += (reQueryString.test(url) ? '&' : '?') + '_=' + (new Date()).getTime();
        }
    }
}

I'm posting this here is case other developers have a similar issue when using the polyfill with IE. It would be nice cache busting was added to the polyfill but of course I'm sure everyone has bigger priorities and can better spend time on other stuff.