Browser caching with Firefox

Topics: Core, Customizing Orchard
Jun 27, 2013 at 2:43 PM
I have a shopping cart widget that is rendered on most pages of a website. This shows the number of products in a customer's cart and the total value of the cart. When ever a product is added this updates.

I've noticed that on Firefox (on my MAC at least) after I add a product to the cart, the cart widget updates to show the new item. However if I then visit a page that I had previously been to, the cart shows the previous state. If I press Shift-F5 to force a local cache bypass, the cart widget renders correctly.

I've used the browser network loggers on each browser and noted that on Safari, when navigating to pages on my site the Cache-Control header in the response is always "no-cache, no-store, must-revalidate", however on Firefox the Cache-Control header has the value "private" unless I press Shift-F5 in which case the returned header has "no-cache, no-store, must-revalidate".

I'm using both the SysCache and Cache modules. This behaviour doesn't occur on Safari or Chrome.

Is it possible that Orchard is returning a different cache header to Firefox due to some difference in the way the requests are being made? I first thought that Firefox must be caching the request locally, however the network display in firebug is showing a get request to the server.
Jun 28, 2013 at 12:37 AM
For now I've disabled the Orchard Cache module as this was what was causing me the grief. The difference I was seeing between safari and firefox was because in Safari I was logged into the website, thus the cache module was always bypassing the cache. In Firefox, since I wasn't logged in, the Cache module was always returning the cached page. All standard behaviour.

What is the best practice for implementing a shopping cart style widget on a website, that is visible on every page of the website, but should always be up to date and is unique per user AND you still want to be able to use the Orchard Cache module?

Can caching in Orchard operate at a more granular level (eg. shapes) than the page? Is it possible to have the individual shapes for the main content cached, then when the page is built these shapes are all gathered from cache, but somehow indicate that a particular widget is not cacheable, such that it is always regenerated?

Alternatively, the other approach I'm thinking is that the shopping cart widget should be just returned as a static empty placeholder element, and each time a page is loaded a subsequent ajax call would populate the cart widget?
Jun 28, 2013 at 1:17 AM
This was discussed during last week's conference. The idea is to use javascript to load the cart from the client side, thus you can still use the cache module and at the same time have the cart being dynamic.

You can use WebApi and local templating engine to do that really easily.

Bertrand must have a better explanation. And maybe we can ask him to write a blog post ;)
Jul 1, 2013 at 12:33 AM
Yes, the shopping cart should be added from an Ajax call after the page has been rendered. Check out Nwazet.Commerce for an example implementation: That one also can restore a cart from local storage after the browser has been closed.