Offline Application Cache

Editor's Notes

• #2: Hi I’m Jonathan Stark. I’m a software consultant from Providence RI. I do mobile app strategy, design, and development.
• #3: There’s a feature of HTML5 called the offline application cache (aka AppCache) that allows users to run web apps even when they are not connected to the Internet. It works like this: when a user navigates to your web app, the browser downloads and stores all the files it needs to display the page (HTML, CSS, JavaScript, images, etc.). The next time the user navigates to your web app, the browser will recognize the URL and serve the files out of the local application cache instead of pulling them across the network.
• #4: You have to do three things to enable the app cache: - Creating a manifest file - Adding the manifest attribute to HTML open tags - Enabling the text/cache-manifest content type
• #5: The main component of the offline application cache is a cache manifest file. A manifest file is just a simple text document that lives on your web server and contains a list of files that a user’s device must download and save in order to function.
• #6: The paths in the manifest are relative to the location of the manifest file (similar to URLs in CSS files). You can also use absolute URLs if you prefer.
• #7: Now that the manifest file is created, you link to it by adding a manifest attribute to the HTML tag inside index.html.
• #8: You must serve the manifest file with the text/cache-manifest content type or the browser will not recognize it. If you are using the Apache web server or a compatible web server, you can accomplish this by adding an .htaccess file to your web directory.
• #9: Our offline application cache is now in working order. The next time a user browses to http://example.com/index.html, the page and its resources will load normally over the network. In the background, all the files listed in the manifest will be downloaded locally to the user’s device. Once the download completes and the user refreshes the page, she’ll be accessing the local files only. She can now disconnect from the Internet and continue to access the web app.
• #10: So now that the user is accessing our files locally on her device, we have a new problem: how does she get updates when changes are made to the website? When the user does have access to the Internet and navigates to the URL of our web app, her browser checks the manifest file on our site to see if it still matches the local copy. If the remote manifest has changed, the browser downloads all the files listed in it. It downloads these in the background to a temporary cache. The comparison between the local manifest and the remote manifest is a byte-by-byte comparison of the file contents (including comments and blank lines). The file modification timestamp and changes to any of the resources themselves are irrelevant when determining whether or not changes have been made. If something goes wrong during the download (e.g., the user loses her Internet connection), then the partially downloaded cache is automatically discarded and the previous one remains in effect. If the download is successful, the new local files will be used the next time the user launches the app.
• #11: Sometimes, you don’t want certain files to be cached. Fortunately, app cache offers the option to force the browser to always access certain resources over the network. This means that the browser will not cache those resources locally, and that they will not be available when the user is offline.
• #12: To specify a resource as online only, you use the NETWORK: keyword (the trailing : is essential) in the manifest file. Here, I’ve whitelisted logo.jpg by moving it into the NETWORK section of the manifest file. When the user is offline, the image will show up as a broken image link. When he is online, it will appear normally.
• #13: If you don’t want offline users to see the broken image, you can use the FALLBACK keyword to specify a fallback resource.
• #14: Now, when the user is offline, he’ll see offline.jpg, and when he’s online he’ll see logo.jpg.
• #15: You can also specify a single fallback image for multiple resources by using a partial path. Let’s say I add an images directory to my website and put some files in it. I can then tell the browser to fall back to offline.jpg for anything contained in the images directory. Now, when the user is offline, he’ll see offline.jpg, and when he’s online he’ll see the actual online images.
• #16: The manifest file is pretty finicky. If you have a single typo, invalid path, etc... it won’t work at all. If you have a lot of files in your app, it might make sense to build a manifest file dynamically.
• #17: You can use a scripting language like PHP to traverse your directory structure to generate a list of files in your app. Theoretically, you could use this file as your manifest, but in practice this would cause place an unnecessary load on your server. I recommend using the PHP file to help you create a static manifest rather than serving it directly.
• #18: It can be tough to debug apps that use the offline application cache because there’s very little visibility into what is going on. You find yourself constantly wondering if your files have downloaded, or if you are viewing remote or local resources. Plus, switching your device between online and offline modes is not the snappiest procedure and can really slow down the development cycle.
• #19: The best way to ensure that you know what is actually being requested from you web server is to monitor your server logs while interacting with your app. If your manifest is working correctly, you should only see requests for your manifest file and any files listed in the network or fallback sections of the manifest.