This is the post that explain how to create an offline web page.
Offline webpage is a webpage which shows the content of the page even though you are not connected to internet. To create a offline webpage we need to cache the files in the local system. Currently there is something called browser cache which caches the visited pages but not all. With the App cache one can cache the files he want.
Why to use offline?
The uses of offline manifesting are
These are the steps to create an offline page.
1) List out the resources you want to load when the user is offline
2) Create a manifest file which lists the above resources
3) Update the HTML with manifest attribute.
For example I have web app which have following files
Now
step 1:
List out the resources you want to load when the user is offline:
Generally you don't need that all files to be cached. From the example above i am listing my resources.
I want to cache :
Offline webpage is a webpage which shows the content of the page even though you are not connected to internet. To create a offline webpage we need to cache the files in the local system. Currently there is something called browser cache which caches the visited pages but not all. With the App cache one can cache the files he want.
Why to use offline?
The uses of offline manifesting are
- Offline browsing - users can use the application when they're offline
- Uninterrupted experience - user can browse through the pages uninterruptedly
- Speed - cached resources load faster
- Reduced server load - the browser will only download updated/changed resources from the server
These are the steps to create an offline page.
1) List out the resources you want to load when the user is offline
2) Create a manifest file which lists the above resources
3) Update the HTML with manifest attribute.
For example I have web app which have following files
- index.html (main page)
- style.css (a css file)
- actions.js (javascript file)
- logo.png (logo image)
- backgroung.png (background for page)
Now
step 1:
List out the resources you want to load when the user is offline:
Generally you don't need that all files to be cached. From the example above i am listing my resources.
I want to cache :
- style.css
- actions.js
- logo.png
Note: You don't need explicitly cache the 'index.html'.
Step2:
Create a manifest file which lists the above resources:
Before creating manifest file. Lets learn something about the manifest file
All manifest files have two possible extentions
The MIME type for manifest file is
Structure of manifest file is as follows:
The first and foremost line in the manifest file should be "
Lets create manifest for our example
Step3:
Update the HTML with manifest attribute:
Before updating html we need to know something about .htaccess .
I found some thing about htaccess on web like this :
"The htaccess file is a configuration file which is used on Apache based web servers to control many features of the server."
So, what is the relationship between
Validate your manifest file here
After you add a cache manifest the browser will show options like below
If you press on allow it will save the files listed in the manifest file in the local system.
Hope my language is understandable and this helps.
Thanks
it will be cached.Step2:
Create a manifest file which lists the above resources:
Before creating manifest file. Lets learn something about the manifest file
All manifest files have two possible extentions
.manifest or .appcache.The MIME type for manifest file is
cache-manifest.Structure of manifest file is as follows:
CACHE MANIFEST
# This is a comment
CACHE
# files need to be cached
FALLBACK :
# files to load in case of error fetching cache files
NETWORK:
# files to load from the network if network is there
The first and foremost line in the manifest file should be "
CACHE MANIFEST".Lets create manifest for our example
CACHE MANIFEST
# This is manifest file for our example
CACHE:
css/style.css
js/actions.js
images/logo.png
FALLBACK:
# for now, we dont have any fallback files. that means
# if any error occur will not redirect to any page.
NETWORK
*.*
# *.* to load all files.
# If network exists it will load files from network.
# Failing in providing this section leads to load files
# always from cache.
CACHE MANIFEST
CACHE:
css/style.css
js/actions.js
images/logo.png
NETWORK :
*.*
.manifest or .appcache. I am saving as mycache.manifest. (you can save as mycache.appcache also) Step3:
Update the HTML with manifest attribute:
Before updating html we need to know something about .htaccess .
I found some thing about htaccess on web like this :
"The htaccess file is a configuration file which is used on Apache based web servers to control many features of the server."
So, what is the relationship between
htaccess and offline cache ?
The relation is that htaccess contains information about the MIME types.
For Cache manifest there is a MIME type called text/cache-manifest
we need make sure that this mime type exist in the .htaccess file or not .
If not, we need to include thAddType text/cache-manifest .manifestAddType text/cache-manifest .appcache manifest="mycache.manifest" to the <html> tag.
The final code will be
<html manifest = "mycache.manifest">
...
</html>
Validate your manifest file here
After you add a cache manifest the browser will show options like below
If you press on allow it will save the files listed in the manifest file in the local system.
Hope my language is understandable and this helps.
Thanks
No comments:
Post a Comment