Creating Offline HTML5 Apps with AppCache
Key Takeaways
- AppCache, or Application Cache, is a technique for implementing offline HTML5 web applications. It allows pages to be downloaded when the user is online and then cached for subsequent usage in offline mode.
- The caching process starts with a Cache Manifest file, which stores all the resources that need to be downloaded and cached for offline access. This manifest file can be pointed to by adding an attribute called ‘manifest’ to the tag in the web page that needs to be cached.
- A manifest file has four optional sections: CACHE, NETWORK, FALLBACK, and SETTINGS. CACHE lists all the resources that should be downloaded and stored locally, NETWORK lists the URLs that should never be cached, FALLBACK specifies the page to display if any resource is not found in the app cache, and SETTINGS includes settings for app cache behavior.
- AppCache can be used to create apps that run offline on both desktop and mobile browsers. These offline web apps can even be packaged to work as Android or iOS apps.
The Fundamentals:
You might be thinking how the whole process works and how the browser decides which pages to cache. Well, let’s find out. It all starts with a simple Cache Manifest file. A Cache Manifest file stores all the resources that need to be downloaded and cached for offline access. The file should end with an extension.manifest
but you are free to choose the extension of your choice.
In order to start the process of caching you just need to point the browser to this manifest file. How is it done? Simply add an attribute called manifest
to the <html>
tag in the web page that needs to be cached.
For instance, if you want the index.html
page to be cached you can create a manifest file called mycache.manifest
and add an attribute manifest
that points to this file.
<html manifest="mycache.manifest">
<head>
<title>Offline Page</title>
</head>
</html>
Inside the manifest file you can add a list of resources that need to be cached. As the page index.html
points to the manifest file it’s implicitly added to the list of resources that should be cached.
Note: The manifest file should be served by the server with mime type text/cache-manifest
. If you are using Apache, it is just a matter of putting a .htaccess
in the root with following content:
AddType text/cache-manifest .manifest
What Goes Inside The Manifest?
We have already discussed the manifest file lists all the resources that should be available offline. But how? What’s the format? Well, a manifest file has four optional sections which are:- CACHE
- NETWORK
- FALLBACK
- SETTINGS
CACHE MANIFEST
In the next lines you can add the resources that need to be cached. The following example adds 3 resources scripts.js
, style.css
and picture.jpg
to the manifest file. As no section name has been specified these resources are implicitly in CACHE
section.
CACHE MANIFEST
scripts.js
style.css
picture.jpg
Now let’s assume index.html
points to this manifest file through the attribute manifest
. When the browser first accesses this page, it finds out that there is manifest file associated with this page. So, the browser goes through the list of resources present in the manifest and starts downloading them in the background. Note that the page index.html
which points to this manifest will also be downloaded and made available offline.
The above snippet is sufficient for any app that has a single page. But what do you do if you have multiple pages? In that case you just need to add the name of each of the pages that should be cached to the manifest file. If you don’t do this the browser will have no way to know there are other pages in the web app that should be available offline. There is one more way to achieve this. You can make each of the pages in the app point to the manifest file. When the browser will access the pages, it will automatically start downloading them.
Now that you know the basics of manifest, let’s get to the different sections available in the file.
CACHE:
This section lists all the resources that should be downloaded and stored locally. As soon as the page is loaded, the browser will start downloading these resources in the background. However, if some of the resources are already in the cache, then those won’t be re downloaded.NETWORK:
This section lists the urls that should never be cached. For example, your page may include a call to a script that loads stock quotes dynamically. So, this type of resource will not be cached and made offline. Instead the data will be retrieved from the original source provided you have internet connection.CACHE MANIFEST
FALLBACK:
/ /offline-message.html
The ‘/’ has a special meaning in FALLBACK section. It means if any page is not found in app cache instead of showing an error the offline-message.html
will be displayed.
SETTINGS:
This includes settings for app cache behavior. PresentlyCache Mode
is the only available setting. It can be set to prefer-online
which indicates that the cached data should be disregarded if an active internet connection is present.
The Overall Flow of Events:
While the whole process works, a chain of events are fired. To summarize the whole thing let me give a clear picture of these events fired during the caching process.- When the browser finds a
manifest
attribute of the<html>
element that points to a manifest file, achecking event
is fired. - If the manifest file is entirely new for the browser it will do the following:
- The browser will start downloading the resources mentioned in the manifest after firing a
downloading
event. While downloading the browser will fireprogress
events periodically to notify about the number of files downloaded. - After the resources are downloaded a
cached
event is finally fired.
- If the browser has already come across the manifest file, it will do one of the following:
- If the manifest has not been changed, it does nothing.
- If the manifest file has been changed the browser will fire a
downloading
event and start downloading the resources mentioned in the manifest. As usual while downloading the filesprogress
events will also be fired. - Once the downloading is finished
updateready
event is fired.
Let’s Create an Offline App:
In my last tutorial I explained how to create a notepad app using indexedDB. Now let’s make it work offline! First try out a demo of the app here. It’s basically a note taking app which works using a little bit of JavaScript and indexedDB api. Just access the page. Disconnect the internet and visit the page again. You will still be able to access the web app because of App Cache. If you download the whole app you will find the following files inside the root directory of the app.- add.png
- back.png
- bullet.png
- delete.png
- notebook.png
- index.html
- style.css
First Step:
Create a.htaccess
file with the following content and place it in the root directory.
AddType text/cache-manifest .manifest
Second Step:
Create the manifest file that will list the resources that should be cached. Name itmycache.manifest
. Then add all of the resources to the file.
CACHE MANIFEST
add.png
back.png
bullet.png
delete.png
notebook.jpg
style.css
Third Step:
Add attributemanifest
to the <html>
element of index.html
. The value of the attribute should be mycache.manifest
.
Now, we are done! We have a brand new HTML5 app that works amazingly well offline.
The code sample for the offline notepad app is attached for download.
Conclusion:
Well, bringing web apps offline is truly revolutionary. AppCache opens the door to many possibilities. Using it you can create apps that run offline starting from desktop browsers to mobile browsers. You can even package these offline web apps to work as Android or iOS apps. What you do with it depends on your creativity. So, just play around with App Cache, experiment and start developing amazing offline apps.Frequently Asked Questions (FAQs) about Creating Offline HTML5 Apps with AppCache
What is the primary function of AppCache in HTML5?
AppCache, also known as Application Cache, is a feature in HTML5 that allows developers to specify which files the browser should cache and make available to users offline. This is particularly useful for applications that require certain files to function correctly even when the user is not connected to the internet. AppCache ensures that these files are stored locally on the user’s device, allowing the application to run smoothly offline.
How does AppCache improve the performance of web applications?
AppCache can significantly enhance the performance of web applications by reducing the load time. When a user visits a web application, the browser typically fetches all the necessary files from the server. However, with AppCache, the browser can retrieve these files from the local cache, which is much faster than fetching them from the server. This results in a quicker, more responsive user experience.
How do I create a manifest file for AppCache?
A manifest file is a simple text file that lists the resources the browser should cache for offline access. To create a manifest file, you need to define it with the .appcache extension and specify it in the HTML tag of your web page using the manifest attribute. The manifest file should include three sections: CACHE, NETWORK, and FALLBACK. The CACHE section lists the files to be cached, the NETWORK section lists the files that require a network connection, and the FALLBACK section specifies fallback pages for when a particular resource is not available.
What are the limitations of using AppCache?
While AppCache is a powerful tool, it does have some limitations. For instance, it can be challenging to manage because once a file is cached, it remains in the cache until the manifest file is changed. This can lead to outdated content being displayed to the user. Additionally, AppCache does not provide granular control over the caching process, and it can be difficult to debug issues related to caching.
Is AppCache supported by all browsers?
AppCache is supported by most modern browsers, including Chrome, Firefox, Safari, and Internet Explorer 9 and above. However, it’s worth noting that the HTML5 specification recommends using Service Workers for offline caching instead of AppCache, as Service Workers provide more control and flexibility.
How can I debug issues with AppCache?
Debugging AppCache can be tricky, but most browsers provide tools to help with this. For example, in Chrome, you can use the Application panel in the Developer Tools to inspect the AppCache. This panel shows all the cached resources and their status, and allows you to update or delete the cache.
Can I use AppCache for mobile applications?
Yes, AppCache can be used for mobile applications. It allows you to store necessary files locally on the user’s device, enabling the application to function offline. This is particularly useful for mobile applications, as users often have intermittent or slow internet connections.
How can I update the cache with AppCache?
To update the cache with AppCache, you need to make a change to the manifest file. This can be as simple as adding a comment with a timestamp or version number. When the browser sees that the manifest file has changed, it will download and cache all the files listed in the manifest file again.
What is the difference between AppCache and Service Workers?
Both AppCache and Service Workers allow you to provide offline functionality to your web applications. However, Service Workers offer more control and flexibility. With Service Workers, you can control the caching process programmatically, which allows for more complex caching strategies. Additionally, Service Workers can intercept network requests and modify responses, which is not possible with AppCache.
Are there any security concerns with using AppCache?
AppCache does not introduce any new security concerns. However, like any other web technology, it should be used responsibly. For example, you should ensure that only the necessary files are cached and that the manifest file is kept secure and up-to-date to prevent serving outdated or malicious content to users.
Sandeep is the Co-Founder of Hashnode. He loves startups and web technologies.