Eclipse Appcache Generator - auto-generate HTML5 appcache files

-


HTML5 Appache

I won't go into a full explanation here (if you want a tutorial the HTML5 Rocks website) but HTML5 appache is a method of caching web content so that, when offline, it can still be accessed

One method of doing this is to add a meta tag to each page specifying an appcache file, which will tell the browser to cache that page. But what if you want to tell the browser to cache everything when the site is first accessed? Well HTML5 has a way of doing that too - you still add the meta tag but also specify the files to be cached in the file. When it is accessed, those files will be cached. This though leaves you with a problem - how do you make sure you locate every file to be cached and add them to the file? This is where this plugin can help

Plugin

The Appcache Eclipse Plugin is a plugin for the Eclipse IDE that will check all your files for your site and add all html, image, css and javascript files to the appcache. Once the plugin is installed, all you need to do is add the click the menu button and add the meta tag to your page(s)

At the moment it will create an appcache file for the folder selected and all subfolders. This will be improved over time to add additional useful features

Download

As this is a plugin, you need to download the Eclipse IDE. Using Eclipse is beyond the scope of these instructions

Often there are 2 methods of installing an Eclipse plugin - direct download or update site. Our update site is coming soon, so direct download of the jar file is the only option for now

Installation

Once you have download the jar file, simple copy it into the plugins folder of Eclipse install folder. The path should be <ECLIPSE HOME> - plugins

Now restart Eclipse if it was already running. The plugin should now be installed

Generate an appcache file

Inside Eclipse, in either the Project Explorer or Navigator, right click on root folder of your website. By default this will be called WebContent. You should see a menu option called Generate Appcache

Clicking this menu option will generate an appcache folder in your web root folder called appcache.appcache. You can rename it to whatever you like, but the rest of the instructions will assume you leave it as appcache.appcache

Link to your pages

On each html page you will need to add an HTML5 appcache argument. This goes in the <html> tag like this:

<html manifest="appcache.appcache">

This is all you need to do except ensure your web server serves the appcache file correctly. There are some good instructions on the HTML5 Rocks site

Enjoy

This should make generating full-website appcache a whole lot easier.  The plugin is open source so if you have any feature requests, or want to contribute, head over to the appcache pages on the website

Comments

Post a Comment

Popular posts from this blog

Launch a website as a mobile app using PhoneGap/Apache Cordova

-
How to launch a website as a mobile app using PhoneGap/Apache Cordova I spent some time recently trying to find out how to launch my website as a mobile app.  The information was available around the internet but since it took me a while, I thought I'd collate it here in one simple post for anyone who wants to do the same I decided to use Apache Cordova since it gave me the framework for developing an HTML5 site as a mobile app already, meaning all I really needed to do was plug my website into it.  Their getting started guide has good information on how to create a Cordova project - I used Android but you can use whatever means you wish A basic Cordova app gives you a way to launch the app with an HTML page that you use to display your app contents.  The trick then is make the page load your website which you can do in one of 3 ways: 1. Package your site inside the app. This means it loads fast and without an internet connection.  The downside is you have to update and
Read more

Installing and using mobilize.js to transform a desktop site to a mobile site

-
Image
Installing and using mobilize.js to transform a desktop site to a mobile site mobilize.js offers a neat and simple method of creating a mobile optimised website with very little change to the main desktop site. With a few lines of javascript and some css you can create a mobile optimised site without having to maintain 2 different sets of content. However the instructions on the official site aren't the best. So with some digging I managed to transform - From this (Firefox on my laptop): To this (Android browser on my Samsung Galaxy Nexus): with no html changes other than adding some <script> tags to the <head> element.  Plus automatic browser detection to display either site depending on the browser used - mobile, or desktop Here are some step-by-step instructions on getting it working. Why would you want to? So going back to the beginning, these were my requirements:  I wanted to create a mobile optimised site but, as I already had a
Read more

How to manually add Cordova plugins to your app

-
I have recently been trying to add a plugin to an existing Cordova app (using Cordova 3.7.0).  Since I didn't create my app using the CLI I had 2 options: Create a new app using the CLI and copy my source files over Add the plugin files to my existing app For some reason I don't really like the idea of the CLI and wanted to do do this manually into an existing Android app, using Cordova, rather than use the CLI.  Don't ask me why, I just like doing things manually so I know what's going on under-the-hood I guess If you are like me and want to add a plugin manually, this is how to do it.  These instructions, though written for Android, will work for any any supported platform.  I will call out any differences between platforms that I know of Get the plugin source files You need the source code files for your platform (so .java for Android, .m .h for iPhone etc) as well as the plugin javascript files.  You might be able to get the source files from the inte
Read more