Search code examples
html5-appcache

Run offline web app when user is offline

I'm making my web app to run offline. I have made an offline version. Now, I want to let the user know some kind of link to click to go offline page.

How I can cache the offline page whereas user is browsing online pages ??

Update:

here is the code I'm using on online version.

setInterval(function () {
if(!navigator.onLine){
$('.status').html('<a href="offline.html">Click here to run offline version</a>'); 
}
}, 250);

and offline.html contains an html file and manifest file as well.

<html lang="en" manifest="app.manifest">

UPDATE # 2 I got the solution myself. What you have to do is, put the following iframe in the online version like this 

<body>
<iframe src="http://site.com/index.php/m/m_offline/" width="0" height="0"></iframe>

It will cache the offline version. Remember to add the manifest file in your offline version. hope this helps to someone else as well.

Thanks

Solution

  • I got the solution myself. What you have to do is, put the following iframe in the online version like this

    <body>
<iframe src="http://site.com/index.php/m/m_offline/" width="0" height="0"></iframe>

    It will cache the offline version. Remember to add the manifest file in your offline version. hope this helps to someone else as well.