What is fallback in Application cache ?
Last Updated :
29 Nov, 2022
In this article, we will discuss what is a fallback in the Application Cache! Fallback is a session in the Manifest file so before moving directly to the fallback, let’s first see a brief description of the Application cache and Manifest file.
Introduction: The Application Cache allows developers to make their web-browsers work online as well as offline mode. The webpage which contains Application Cache reduces bandwidth consumption and also loads the webpage faster than a normal web page. It provides a facility for developers to select which data to store as a cache or not. Normally, These web pages are loaded from local storage instead server.
One more advantage of the application cache is that it loads fast and displays data in offline mode even if the user is offline and trying to refresh the web page.
To create an Application Cache, the user needs to create the first Cache Manifest File. So let us understand the concept of the manifest file.
Cache Manifest File: The Application Cache Manifest is a text file that contains a different section that suggests to the browsers which resources to store as cache. This file must contain .appcache or .manifest extension. This file always starts with the CACHE MANIFEST header.
To allow .appcache files on the server user must include the correct media type MIME Type in the .htaccess file
You can declare Media type like this:
AddType text/cache-manifest appcache
Syntax:
<html manifest=”file_name extension_of_file”>
...
</html>
Implementation: Create an HTML file and add the manifest attribute in the document tag of the HTML file. The manifest file contains the extension as .appcache.
<html manifest="demo.appcache">
...
</html>
There are three sections of this file:
- CACHE
- NETWORK
- FALLBACK
CACHE: The cache is the default session in the application cache. It contains a list of resources like webpages, stylesheets, JavaScript, images, and gifs. This resource will be cached immediately after its first download.
This section always starts with the CACHE MANIFEST header along with the resource file. As follows
CACHE MANIFEST
images/logo.png
scripts/myscripts.js
gif
/main.js
When the CACHE section is loaded, the browser downloads the files under the CACHE MANIFEST header. These files are accessible even if a user is offline.
In the above example, the file under the CACHE MANIFEST header will be cached. If the manifest files or resource specified in the above list, fail to download the resource then the entire process of the cache will fail.
Example: Create an HTML file and name it cache.html. Then, add this file to the CACHE section of the demo.appcache file, so it can cache data in offline mode.
This file will load or display data even in offline mode.
HTML
<!DOCTYPE html>
<html manifest="demo.appcache">
<body>
<h3>GeekforGeek!</h3>
<h3>Cache Session Will Display
Data in Offline Mode.</h3>
</body>
</html>
|
Output:
NETWORK: It contains files that are whitelisted that required the network to load or display its data. If the network is not present then data will not be displayed. if any file is not mentioned in the manifest then it will not display its data. Cause the files which are not mentioned have high priority than not mentioned files. for this developer need to add * in the network section to instruct the web browser to load all other resources which are not explicitly mentioned in the file.
Note: Here * can be used once.
NETWORK:
*
Example: Create an HTML file and name it network.html. add this file into the NETWORK section of the demo. appcache file so it will cache data that will only be available in online mode.
This file will load or display data in online mode.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p>Network Session will not
work in offline mode</p>
</body>
</html>
|
Output:
Fallback: It specifies fallback pages if a resource is inaccessible. It contains two URLs.
- Resource.
- Fallback
These two URLs must be from the same origin and relative.
Developers can capture specific URLs and URL prefixes. for example:
“images/photos/” will capture failures from URLs that are “images/photos/kitten/img.jpg”.
CACHE MANIFEST
FALLBACK:
/ /offline.html
Here, a single character / before ‘offline.html’ will match any URL pattern on one’s site.
If browsers fail this process, then the application displays the page /offline.html. It specifies the fallback page web-browsers should use if the resource is inaccessible.
Example: Create an HTML file and save it as offline.html and add this file into the FALLBACK section of the demo. appcache file with fallback.html.In the offline mode, the offline.html file will be replaced with the fallback.html file.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks
<p>User is online mode</p>
</h1>
</body>
</html>
|
Output:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<p>User is in Offline mode.</p>
</body>
</html>
|
Output:
Advantage:
- Android App: Useful in mobile apps as mobile networks provide low bandwidth.
- Offline Mode: Users can use applications without the internet or offline.
- Less Space: Web pages are already cached so they occupy less space.
- Increase Speed: Web pages contain cached data. cached data are local so they load fast
- Reduced server load: The web browser will only download data if it is updated on the server. It also decreases HTTP requests.
- Modern browser: The HTML 5 feature Cache feature is available in all modern web browsers.
Disadvantage:
- Old version browser: Not useful in the old version browser.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...