This mini series about “Offline Web Applications” shows you how to build a web application that your users can use while they are offline. I will give a session about this topic at Herbstcampus 2012.
- Part 1 showed you the web application that should be available offline - but isn't yet.
- You are reading part two, where we will use the HTML 5 application cache to make all resources available offline.
- Part 3 shows you how to develop the application logic using JavaScript
- Part 4 will make the application logic available offline using IndexedDB and the IndexedDB JQuery plugin.
No server side components
In the first example we used several server side components: A page class (written in Java) with buttons and text fields. This class was also responsible for loading/storing data. Because we want to implement offline mode, we can not use these server side components. We have to render a simple HTML page. This page is empty right now, we just want to have it available offline. We will implement the new dictionary functionality in part 3 of this series.
I have moved the file “style.css” to the “WebContent” folder of my web application. In this folder I also added a file called “dictionary.html”:
dictionary.html
<!DOCTYPE html> <html manifest="offline.manifest"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="content"> <h1>German - English dictionary</h1> <div class="block grey"> <h2>Add word</h2> <form id="addForm"> <div class="left"> <h3>German</h3> <input type="text" id="german"/> </div> <div class="right"> <h3>English</h3> <input type="text" id="english"/> </div> <div class="clear"></div> <input type="submit" value="Add"/> </form> </div> <div class="block green"> <h2>Words</h2> <div class="left"> <h3>German</h3> </div> <div class="right"> <h3>English</h3> </div> <div class="clear"></div> <div id="wordsList"> <div class="left" id="listEntryGerman">German word</div> <div class="right" id="listEntryEnglish">English word</div> <div class="clear"></div> </div> </div> </div> </body> </html>
Wicket
We don’t need the DictionaryPage anymore, so I deleted the java class and the HTML file. I have also removed the home page form the application class:
DictionaryApplication.java
@Override public Class<? extends Page> getHomePage() { return null; }
Cache-Manifest for offline mode
Notice that the “html” tag has a “manifest” attribute? We need this manifest to make resources available offline. So let’s add the file offline.manifest to the folder “WebContent”:
offline.manifest
CACHE MANIFEST # Offline cache manifest for the dictionary application CACHE: dictionary.html style.css
And that’s it: Our dictionary page is available offline! Just… it doesn’t work anymore, because all the logic was on the server side, encoded in a wicket page. Stay tuned for part 3, where we’ll implement the new logic for creating and displaying translations!