Search code examples
androidhtmlgoogle-chromemobile-safarioffline-caching

How to check if the Offline Manifest is loaded on mobile devices

This is my first time coding for HTML5 with offline capabilities using MVC 3. Although I have a problem where mobile devices doesn't seem to cache and fails to load from cache when offline.

I have my header setup:

<!DOCTYPE html>
<html manifest="@Url.Content("~/offline.manifest")">

With my offline.manifest file located at the root of the application. Since my app has a /Account/Login/Index route, I added it to my manifest file:

CACHE MANIFEST
#version 0.0452
CACHE:

#Pages
Account/Login

also tried ~/Account/Login for the pages.

The good news is, my manifest file works on Chrome. All files are loaded and are cached. However, this is not the same for my mobile devices.

My iPhone running 5.1.1 and Nexus S running Chrome on ICS doesn't seem to load from the cache when offline. I just turn off the Wifi radio and refresh the page, but Safari and Chrome doesn't load from cache.

Am I missing something here? Any clues would be appreciated. Thank you

Solution

  • Thanks to the iPhone's built-in console log, I found out that my IIS is serving the manifest file on an incompatible MIME type.

    I changed a few things. First, I renamed the cache file to cache.appcache and added a new MIME type in IIS, for the extension .appcache with type text/cache-manifest.

    After I made those changes and reloaded my page, Mobile Safari cached my page. Chrome for Android is also now working well.