An offline web application revolves around a cache manifest file. What’s a manifest file? It’s a list of all of the resources that your web application might need to access while it’s disconnected from the network. In order to bootstrap the process of downloading and caching these resources, you need to point to the manifest file, using a manifest attribute on your <html> element.
<!DOCTYPE HTML>
-<html manifest="/cache.manifest">
+<html manifest="/cache.appcache">
<body>
...
</body>
@@ -44,9 +44,9 @@ The Cache Manifest
Your cache manifest file can be located anywhere on your web server, but it must be served with the content type text/cache-manifest. If you are running an Apache-based web server, you can probably just put an AddType directive in the .htaccess file at the root of your web directory:
-
AddType text/cache-manifest .manifest
+AddType text/cache-manifest .appcache
-Then make sure that the name of your cache manifest file ends with .manifest. If you use a different web server or a different configuration of Apache, consult your server’s documentation on controlling the Content-Type header.
+
Then make sure that the name of your cache manifest file ends with .appcache. If you use a different web server or a different configuration of Apache, consult your server’s documentation on controlling the Content-Type header.
Ask Professor Markup
@@ -206,15 +206,15 @@ Let’s Build One!
/examples/localstorage-halma.html
/examples/halma-localstorage.js
-/examples/offline/halma.manifest
+/examples/offline/halma.appcache
/examples/offline/halma.html
-In the cache manifest file (/examples/offline/halma.manifest), we want to reference two files. First, the offline version of the HTML file (/examples/offline/halma.html). Since these two files are in the same directory, it is listed in the manifest file without any path prefix. Second, the JavaScript file which lives in the parent directory (/examples/halma-localstorage.js). This is listed in the manifest file using relative URL notation: ../halma-localstorage.js. This is just like you might use a relative URL in an <img src> attribute. As you’ll see in the next example, you can also use absolute paths (that start at the root of the current domain) or even absolute URLs (that point to resources on other domains).
+
In the cache manifest file (/examples/offline/halma.appcache), we want to reference two files. First, the offline version of the HTML file (/examples/offline/halma.html). Since these two files are in the same directory, it is listed in the manifest file without any path prefix. Second, the JavaScript file which lives in the parent directory (/examples/halma-localstorage.js). This is listed in the manifest file using relative URL notation: ../halma-localstorage.js. This is just like you might use a relative URL in an <img src> attribute. As you’ll see in the next example, you can also use absolute paths (that start at the root of the current domain) or even absolute URLs (that point to resources on other domains).
Now, in the HTML file, we need to add the manifest attribute that points to the cache manifest file.
<!DOCTYPE html>
-<html lang="en" manifest="halma.manifest">
+<html lang="en" manifest="halma.appcache">
And that’s it! When an offline-capable browser first loads the offline-enabled HTML page, it will download the linked cache manifest file and start downloading all the referenced resources and storing them in the offline application cache. From then on, the offline application algorithm takes over whenever you revisit the page. You can play the game offline, and since it remembers its state locally, you can leave and come back as often as you like.