Adding a manifest file for offline usage.

We turn the example htmljQueryStorageBlog into an offline application. We create a manifest file that lists all the assets the browser must cache locally to allow offline usage of the web app.

We start by downloading locally all the assets that are required by the application, in this case the jQuery and jQuery Mobile files. We place the files in the public directory.

We update the layout html file to point to the local assets:

views/layout.haml
...
%link(rel="stylesheet" href="jquery.mobile-1.0.1.min.css")
%script(type="text/javascript" src="jquery-1.7.1.min.js")
%script(type="text/javascript" src="jquery.mobile-1.0.1.min.js")
...

Then, we create the manifest file and we place it the same path of the server.rb file

manifest.appcache
CACHE MANIFEST
jquery.mobile-1.0.1.min.css
jquery-1.7.1.min.js
jquery.mobile-1.0.1.min.js
error.png
/images/ajax-loader.png
/images/icons-18-black.png
/images/icons-18-white.png
/images/icons-36-black.png
/images/icons-36-white.png

The final step is to serve the manifest file with the correct mime type. We do this by adding one route to the Sinatra server

server.rb
get '/manifest.appcache' do
  headers 'Content-Type' => 'text/cache-manifest' # Must be served with this MIME type
  send_file 'manifest.appcache'
end

The first time you visit the web app, the browser will download all the assets listed in the manifest file and cache them localy.

You can try this example by starting the server and visiting the page http://localhost:4567 in your browser

terminal
ruby server.rb