Using a manifest for caching (Become an expert)

In the previous recipe, we looked at how you can know if your mobile device is offline—let's take this a step forward by telling your browser how to cache content using a manifest, in the event it is unable to connect to the Internet.

Getting ready

For this recipe, all you will need is your normal text editor, as well as a working installation of a local web server, such as WAMP (for PC) or MAMP (for Macs). For the purposes of this recipe, I will assume you are using WAMP. You will also need a copy of the code that is available with this book; it contains some of the files required for this task.

How to do it...

Perform the following steps, to use a manifest for caching:

  1. Let's make a start by downloading and extracting the manifest.html file from the code available with this book. Save a copy of the file into a folder on your PC.
  2. We need to create a manifest file. In the code available with this book, look for a file called cache.appcache, and save a copy in the same folder as manifest.html. Repeat the same process, but this time with a file called offline.html, which is available in the code download that accompanies this book.
  3. Our main file, manifest.html, will look a little ordinary. Let's fix that by adding in some styling:
    body { padding: 20px; font-family: Arial; font-size: 16px; }    
#details { border-radius: 4px; padding: 5px; background-color: purple;}
#supportdlg { border-radius: 4px; border: 1px solid black; padding: 5px; width: 500px; color: #fff; font-weight: bold; }    
#online { background-image:url('tick.png'), background-repeat: no-repeat; padding-left: 25px; background-color: purple; margin: 5px; }
  4. To make the manifest work, we need to alter WAMP. Add the following code at line 412, in C:wampinapacheapache2.2.22conf:
        AddType text/cache-manifest .appcache
</IfModule>
  5. If all is well, you should see something similar to the result shown in the following screenshot, when previewing the manifest in your browser:
    How to do it...

How it works...

In this recipe, we're using a manifest file to tell which content must be made available when our users are offline. Your browser will prompt you to confirm the acceptance that content can be stored offline, as outlined in the manifest file. Each file consists of three sections, not all of which are required. These sections are CACHE, NETWORK, and FALLBACK. CACHE contains those items that should be made available offline. NETWORK contains those items that must always be referenced from the server, even when offline. FALLBACK provides those items that will be used if the CACHE items are unavailable.

Note

Using cache manifest files can be very powerful, but tricky to debug; it is worth reading about them online to get a real feel of how they work, and how you can avoid some of the quirks that are associated with using cache files.

Once the site has been cached, we can confirm if the manifest has worked by viewing the cache details, as shown earlier in this book.

Now that we've covered some of the more basic aspects of Local Storage, it's time to move on and look at some more advanced aspects.In the next recipe, we'll take a look at how you can incorporate the Local Storage support into a website for the mobile platform.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset