Cache Manifest loses page after "Refresh Page"

Question

We have a cache manifest in our MVC C# application. At the moment its caching .js .css and some HTML files.

This works great initially, but on returning to the Index page - and triggering a Refresh in Safari whilst offline, the browser will show an offline screen.

We wish for this application to be available offline if cached, even if a refresh is triggered. We would also like to allow the page to be available when a user enters the browser and types the URL in the address bar whilst offline.

Here is our manifest page:

CACHE MANIFEST
# version 1

CACHE:
~/
~/Content/style.css
~/Scripts/modernizr-2.6.2.js
~/Scripts/jquery-1.10.2.min.js
~/events.html
~/index.html

FALLBACK:
/events /events.html


NETWORK:
*

@{
    Layout = null;
}

Please assist us by letting us know if:

1. This is possible?
2. What needs to change in our configuration/manifest.
3. Alternative methods/resources to look at.

Thank you.

Answer 1

This wasn't much of a fix but I'll post it as a possible solution incase someone lands on this page.

So basically we disabled 'pull down to refresh' and preloaded our pages on the index page. Using jquery mobile to change page between them. (as JQuery mobile basically treats this as a single page application after that.)

We disabled refresh by doing this:

chrome://flags/#disable-pull-to-refresh-effect documented here: https://stackoverflow.com/a/29171474/1800668

preloading pages:

<div style="display:none;">
        <a href="/Rou/Rou" data-prefetch>Prefeched</a>
        <a href="/Li/RoLif" data-prefetch>Prefeched</a>
        <a href="/Li/Sint" data-prefetch>Prefeched</a>
        <a href="/Sig/Signature" data-prefetch>Prefeched</a>
        <a href="/Home/Logout" data-prefetch>Prefeched</a>
    </div>