HTML5 Cache Manifest Links are Broken when Offline

Question

I've successfully implemented a HTML5 cache manifest file to store locally the pages and resources of my web app so that portions of it may be viewed while the user is offline.

The problem I'm running into, is that if the user starts on www.example.com/ and then navigates from there to www.example.com/products/, the links on the www.example.com/products/ page are broken (are missing part of the URL path) and revert to my FALLBACK offline page, indicating that they are not stored in the CACHE, although I explicitly told them to be stored.

Here's a section of my cache.manifest file:

CACHE MANIFEST
# Version 0.0.1

http://www.example.com/
http://www.example.com/products/
http://www.example.com/products/item-page/

FALLBACK:
/ http://www.example.com/offline.php

When I navigate to the products page from the home page, everything works as expected. When I then click the link to navigate to the item-page, the browser shows my offline.php page, indicating that http://www.example.com/products/item-page/ is not stored in the cache.

Am I missing something? Or why is this not working? Please help, and provide code/explanation :)

EDIT - I have .htaccess files redirecting my index.php pages to directory/ (to remove index.php from the URL). This seems to be causing the problem with the cache, because when I change my links in my HTML from item-page/index.php to item-page/ it works. Any ideas??

Answer 1

Your server redirects item-page/ to item-page/index.php, and redirects are not automatically cached.

You should

1. Add item-page/index.php to your manifest, in addition to item-page (they are actually two pages), or
2. Make item-page/ load the content you have for index.php, without the redirect

Answer 2

If you add this section to your manifest file it should work

NETWORK:
*