not compatible with ie 11 in some scenarios about react-tutorial

[ganchuhang]

IE 11, shame on you!

[bilus]

+1 I have exactly the same problem in my app using React 0.12.2 for state updated from a core.async go-loop. A huge issue for us here so if there are any workarounds, they'd be greatly appreciated.

[agundermann]

As far as I can tell, this is simply a http caching problem. The tutorial fetches the comments from the server on an interval and updates the DOM. Unlike other browsers, IE11 doesn't even attempt to contact the server, and use the local copy instead, so ETag doesn't help.

Since POST requests aren't cached, you'll get to see the latest comments for a brief moment after submitting a comment.

I'm not an expert at caching and best practices, but this seems to fix it:

  // server.js
  fs.readFile('_comments.json', function(err, data) {
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Cache-Control', 'max-age=0, private, must-revalidate'); // new header
    res.send(data);
  });

[bilus]

IE 11, shame on you! :) It seems that it may also be the case here so it's
probably a false alarm too. It's just that debugging with beeps (to keep
the Console off) does take more time. I'll post a confirmation as soon as I
know for sure that it indeed is the cause.

On Thu, Feb 26, 2015 at 7:37 PM, Alexander Gundermann <
[email protected]> wrote:

As far as I can tell, this is simply a caching problem. The example
fetches the comments from the server on an interval and updates the DOM.
Unlike other browsers, IE11 doesn't even attempt to contact the server, and
use the local copy instead, so ETag doesn't help.

Since POST requests aren't cached, you'll get to see the latest comments
for a brief moment after submitting a comment.

I'm not an expert at caching and best practices, but this seems to fix it:

// server.js
fs.readFile('_comments.json', function(err, data) {
res.setHeader('Content-Type', 'application/json');
res.setHeader('Cache-Control', 'max-age=0, private, must-revalidate'); // new header
res.send(data);
});

—
Reply to this email directly or view it on GitHub
#33 (comment)
.

[top2tech]

Thanks taurose, you're right, Adding cache control solved the problem. For the tube-tracker issue, it's another IE specific issue.

Hope IE's new brother: Spartan browser can do better.

I added a pull request, so other people won't get frustrated when running this tutorial with IE.

[bilus]

I confirm that it also solved the problem here. Good job!

On Fri, Feb 27, 2015 at 8:26 AM, top2tech [email protected] wrote:

Thanks taurose, you're right, Adding cache control solved the problem. For
the tube-tracker issue, it's another IE specific issue.

Hope IE's new brother: Spartan browser can do better.

I added a pull request, so other people won't get frustrated when running
this tutorial with IE.

—
Reply to this email directly or view it on GitHub
#33 (comment)
.

[ForeverPx]

add the no-cache header can solve the problem , thanks

[tmaiaroto]

Watch out for this as well: aurelia/framework#227 referencing chakra-core/ChakraCore#1415

I had a very similar issue as described here. It turned out not to be the caching (though the symptoms sure seemed to point to caching), it was actually this bug instead in IE Edge. Microsoft patched it, but it's still not released. The fix is relatively simple - you just add: <script> Function.prototype.call = function(t) { return this.apply(t, Array.prototype.slice.apply(arguments, [1])); } </script> to your head section or something. Could probably put it in your app too.

Strange bug that presents itself as a caching issue. Simple, if ugly, fix.