Tutorial: Enabling static files to work offline using Gears
Any static HTML files, such as documentation, can be enabled for viewing offline by following these steps. This tutorial shows you how to create a manifest file, and make your files available offline, using Gears. (Time estimate: 15 minutes.)
You will need:
* Ability to edit basic JavaScript
* Ability to publish files to the HTTP server that hosts your files
* The static files that you want to enable for offline viewing
* For a list of supported browsers and platforms, see gears.google.com.
Files to download for this tutorial:
* tutorial_manifest.json
* go_offline.html
* go_offline.js
* gears_init.js
1. Edit the sample manifest file
Save this tutorial manifest file to your computer.
* Rename it "manifest.json".
* Open your manifest.json in an editor.
Edit the version value
The manifest file contains a series of attribute-value pairs.
* Replace "my_version_string" value with a version string that is meaningful to you. This value represents the version of your documents. Example: "version 1.0".
You will update this version string in the future to indicate that there is a change in any of your documents.
Edit the URLs
The "entries" attribute contains an array of URLs that you wish to capture and have available offline.
* For every file and image that you wish to capture, add a "url" entry into the "entries" array. Follow the format in the sample manifest file.
* Check that each entry except for the last one is followed by a comma.
* To have the tutorial's "go_offline" files available offline too, include them in the manifest.
For example, if your documentation consists of an index.html page, a stylesheet style.css, and a logo in the file resources/logo.gif in addition to the tutorial's files, you will have the following "url" entries:
"entries": [
{ "url": "index.html" },
{ "url": "style.css" },
{ "url": "resources/logo.gif" },
{ "url": "gears_init.js"},
{ "url": "go_offline.html"},
{ "url": "go_offline.js"}
]
Note: The URLs can be fully-qualified, for example "http://www.example.com/index.html", or they can be relative to the manifest file's location.
2. Add some User Interface
Some basic user interface is needed to provide a way for your user to request the offline functionality.
Download and save these files to your computer:
go_offline.html - user interface sample
go_offline.js
gears_init.js - provides access to Google Gears.
Special note: To keep this tutorial simple, the go_offline.html file is provided to act as the user interface.
You are not limited to using the provided file; you can integrate the functionality provided in the go_offline.js JavaScript file into your application in other ways.
Keep in mind that the user will need to:
* Install Gears
* Allow your website to use Gears (a permissions dialog appears automatically)
* Enable the offline version of your documents
3. Upload files to your HTTP server
Upload all the files and your documents to your HTTP server.
* go_offline.html
* go_offline.js
* gears_init.js
* manifest.json
* All the files listed in your manifest.json file.
Important: Be sure all the files listed in the manifest file are available and accessible as listed.
4. Test: capture the files locally
In the testing steps, you act as the user.
* If you haven't already, install Gears on your computer.
* In your browser, type the URL of the go_offline.html page on your HTTP server
o For example: http://www.example.com/go_offline.html
* Click Capture. A status message appears when the file capture is complete.
5. Test: access the captured files
* Take your browser offline. Select File > Work Offline.
* Clear your browser cache. In Firefox, select Tools > Clear Private Data..., check Cache, and click the "Clear Private Data Now" button.
* Type the URL of your document.
o If the offline capture is in effect, you will see your stored document.
o If the offline capture is not in effect, you will see a browser error message
Clear your browser cache often while testing, to prevent seeing cached (but not necessarily offline-enabled) content.
Troubleshooting
* Make sure you have installed Google Gears.
* All the URLs in the manifest file must be correct, and reachable from the directory that the manifest resides in. The manifest file and the URLs it references must be located in the same domain.
* Check that there aren't any typos or extraneous files listed in the manifest.
* The code in go_offline.js expects that the manifest file is named "manifest.json" and that it resides in the same directory. Update the manifest.json references in go_offline.js as needed.
* Use a JavaScript debugger to see any errors that may be returned from the Gears API calls.
6. Publish it to your users
Your users can now access your documents offline by following the instructions in Step 4 above.
7. Future changes: maintaining the manifest
Whenever you update the contents in the static HTML files, or if you add or remove files, you must update the manifest file. When Google Gears detects a new manifest version string, the updated contents are automatically copied to your user's local machine when they next view any of your files.
* Always update the version string in the manifest file to indicate any changes.
* Update the manifest entries to correspond to any added or removed files.
* If you change just the content in the files, you need only to update the version string in the manifest file.
For more information on the manifest file or the APIs used in this tutorial, see the
LocalServer API Reference.
Google Pack is a free collection of essential software from Google and other companies. The software in the Google Pack helps you browse the web faster, remove spyware and viruses, organise your photos and more. 
