How to create an offline web app


#1

#INTRODUCTION


An offline web app, is like an application, it can load your website in offline mode.
It will display the basic html and php and css, but you cannot connect to the database while offline.

#BEFORE WE BEGIN


Make sure you do not have a normal web app created.

#THE TUTORIAL


Create a file called offline.manifest and add the the following code to it

CACHE MANIFEST
index.html
index.php
file-to-cache.html
/path/to/file.png

Everything under CACHE MANIFEST have to be replaced with the files you want to load offline.
You cannot cache a directory, you have to write every single file in that directory.

Now that we have created offline.manifest, create a file called jquery-1.4.min.js and add the following content to it

Click here to go to the code

Once you created that file, replace <html> by <html manifest="offline.manifest"> on every single html page you want to access in offline mode.
If your file is in a path, replace<html> with <html manifest="../offline.manifest"> if in 1 directory, <html manifest="../../offline.manifest"> if in 2 directories, etc…

#CONCLUSION


We created an offline web app that opens in offline mode and displayed the specified content.

In the end


Hope you enjoyed this tutorial, and if it worked for you, give it a thumbs up by clicking the like button.
If you need any more help, you can create a new topic here, and we will be happy to help you!