jQuery Mobile app force browser to ignore cached pages

Question

I wrote a jQuery Mobile app which over 200 people are using heavily on daily basis and I have a following problem. Every time I change something in the app (either HTML, CCS or js) users are still working on old version. It's like their mobile browsers are not detecting that files have changed... They have to clear browser cache in order to get latest version. Is there a way for me to force browser to ignore cached version and re-download current ???

Answer 1

Under IIS (7+):

• The quick way:

In IIS Manager, select Your Website, double-click HTTP Response Headers and then choose the Action Set Common Headers.

This will open the dialog window Set Common HTTP Response Headers.

If You check Expire Web content and select Immediately, this will send the Cache-Control: no-cache to the browser for all files.

• Fine-tuning:

Download and install the URL Rewrite Extension for IIS. This will add the URL Rewrite feature.

Add a new Blank rule and set it as follows:

Name: ResponseNoCache (or whatever You like)
Match: Server Variable
Variable Name: RESPONSE_CACHE_CONTROL
Variable value: Matches the pattern 
Using: Wildcards 
Pattern: *

Action type: Rewrite
Value: no-cache, no-store, must-revalidate

Now, to get more granularity, You can set the preconditions.

Click on Precondition, select Create New Precondition...

Just for instance, I am fine with filtering by file extension:

Name: NoCacheRequestFiles (or whatever You like)
Using: Regular Expressions

Click on the Add.. button, the Add Condition dialog window will open.

Condition input: {REQUEST_FILENAME} 
Check if input string: Matches the pattern
Pattern: \.html|\.js|\.css

After that, You need to click the Apply action and restart the IIS.

The web.config then looks like this:

<rewrite>
  <outboundRules>
    <rule name="ResponseNoCache" preCondition="NoCacheRequestFiles" patternSyntax="Wildcard">
      <match serverVariable="RESPONSE_CACHE_CONTROL" pattern="*" />
      <action type="Rewrite" value="no-cache, no-store, must-revalidate" />
    </rule>
    <preConditions>
      <preCondition name="NoCacheRequestFiles">
        <add input="{REQUEST_FILENAME}" pattern="\.html|\.js|\.css" />
      </preCondition>
    </preConditions>
  </outboundRules>
</rewrite>

Now, You can check inside the Chrome Developer Tools (or whatever You prefer) that the IIS is effectively sending that Cache-Control: no-cache, no-store, must-revalidate response header.

---

Additional info:

I am using also Static and Dynamic Compression as well. So, I noticed that IIS is caching the g-zipped files depending on two additional parameters:

• frequentHitThreshold
• frequentHitTimePeriod

I didn't investigate further the interaction between compressed content and cache-control headers, because the whole is a fairly complex topic subject to frequent changes and hotfixes. But, it would be nice to hear a feedback from You, if this solutions works well also for mobile devices browsers.