Search code examples
htmlcache-manifest

Html5 application cache: Unable to load JavaScript file from application cache when refresh page

I did some Html5 application cache tests on Android Chrome browser and desktop Chrome browser.

The manifest url
/appcachetest/Main/AppManifest:

CACHE MANIFEST

# Version: 3

NETWORK:
*

CACHE:
Main
Main/Page1
Main/Page2
Scripts/jquery-1.10.2.js
#FALLBACK:
@{
   Layout = null;
   Response.ContentType = "text/cache-manifest";
   Response.Cache.SetCacheability(HttpCacheability.NoCache);
   Response.Cache.SetExpires(DateTime.MinValue);
  Response.ContentEncoding = System.Text.Encoding.UTF8;
 }

The Main Index page:

<!DOCTYPE html>
<html manifest="/appcachetest/Main/AppManifest" type="text/cache-manifest">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - My ASP.NET Application</title>
    <script src="/AppCacheTest/Scripts/jquery-1.10.2.js"></script>
</head>
<body>


<iframe src="Main/Page1" style="border: 0; width: 100%; height: 100%">   </iframe>

</body>
</html>

I tried the steps shown below :

  1. Make browser online.
  2. Type the main index page Url at address bar, and hit enter
  3. The page are loaded properly, and all items are cached.
  4. Close browser and launch again.
  5. Make browser offline and enable cache.
  6. Type the main index page at address bar and hit enter key.
  7. The main index page and JavaScript file loaded from cache.
  8. Click browser refresh button, then JavaScript file is unable to load from cache.

Is there any working solution to load JavaScript file from application cache when refreshing page? How to make it work?

Thanks, Bo

Solution

  • I finally knew the issue which cause unable to load JavaScript file from Manifest Cache.

    It is the cached URL in Manifest file is case sensitive, I was not aware of this until spend two days time.