Minimal HTML5 iPad Offline Cache Test

I just pushed a HTML5 template called “Minimal HTML5 iPad Offline Cache Test” to github:

Basically it’s a demo of a simple webpage that can be cached offline on an iPad. It also contains the meta tags required to make it work as a so-called “webclip”, that is you can add it to the homescreen on an iPad and it will open in fullscreen without the URL bar at top and without any other safari elements.

You can try out a demo here:

Testing the demo

To test it on your iPad navigate to the demo and click the icon with the arrow to the left of the URL bar and then click “Add to Home Screen” in the menu:

After that you should see the icon on your homescreen:

The Minimal HTML5 Offline Cache Test added to homescreen

Click the icon and it should look like this:

Sweet. No trace of Safari – it looks like a native app (or it could if we just styled it).

Now, let’s test it offline. Set your iPad in “Airplane mode” and click the icon again to test. You should see this:

Don’t worry, that popup means that everything works. You’re in offline mode, so Safari is not able to cache anything. You’ll find the code for listening to these window.applicationCache errors in offlinetest.js .. you do not have to load that file if you do not want to.

If you’re not able to use the page linked above offline on your iPad the problem is most likely with your iPad.

Troubleshooting – what if it does not work

The template above should work, if it doesn’t work something is most likely wrong with either your iPad or your webserver (or your files..)

Here’s some quick troubleshooting pointers:

  • If the demo page does not work for you, try upgrading your iPad software. I was running 4.2.2 and had problems getting offline caching to work but after upgrading to 4.3.5 everything worked perfectly.
  • If the demo works, but it does not work when you upload on your own server, it might be that the .htaccess does not work on your server so that the cache.manifest file isn’t getting sent to the browser with the “text/manifest” mime-type. Try out the manifest validator.

Also, note this (from “Dive Into HTML5”):

The first is something you just read, but I bet it didn’t really sink in, so here it is again: if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail. Your browser will fire the error event, but there is no indication of what the actual problem was.

Download the files from github:

Good luck! :-)

Changes in this blog

It’s probably about time to let my subscribers know that I’ve started blogging over at the AddonBakery Blog – so all posts which relate to my ExpressionEngine Addons will end up there (instead of here).

If you have an interest in getting the latest news about SEO Lite, Simple Registration, et al. you should subscribe to this feed.

This blog will be reserved for all non-addon specific ramblings. Who knows, I might also put up a portfolio here. I probably should, I am after all a freelance developer… I’ll do it when I get the time ;)

Anyway, subscribe here.

Is Automattic pulling old tricks on EllisLab?

For those who don’t quite understand the title; Automattic is the company behind the world’s favourite blogging engine1 – WordPress, and EllisLab are creators of fine products such as CodeIgniter – and, the commercial CMS ExpressionEngine. Now that you have the basics, the title will make sense later.

MacDailyNews moves from EE to WP

The latest blogpost on the WordPress Publisher Blog tells the news of the high profile migration of MacDailyNews from ExpressionEngine to WordPress VIP:

MacDailyNews migrates from EE to WP


To quote the blogpost:

“With an archive dating back to 2002 and over 750,000 comments, this is the largest Expression Engine2 migration to date. MacDailyNews brings with them a very active community and an ever-burning desire to publish.”

It made me think of a specific moment last friday. I was eating breakfast in a cabin in the mountains of Norway, listening to the radio – the breaking news being the Nokia & Microsoft partnership, but – and isn’t technology beautiful – I was also reading this blogpost on my mobile:

In it, Byrne Reese the former Product Manager of Movable Type and TypePad at Six Apart lays out specific reasons he thinks contributed to WordPress winning the “blog wars” over MovableType.

Tactic: Migrate, then blog the hell out of it

Here’s one of the main reasons he lists:

One thing rarely cited by the outside world, probably because it was not visible or apparent to anyone, was the systematic targeting of high profile brands to switch from using any competing platform to using WordPress. In fact, in the four years I was at Six Apart, if I had a dollar every time a significant and loyal TypePad and Movable Type customer confided in me that an employee of Automattic cold called them to encourage and entice them to switch to WordPress I would have quit a rich man. Automattic would extend whatever services it could, at no expense to the customer, getting them to switch. They would give away hosting services. They would freely dedicate engineers to the task of migrating customers’ data from one system to another. They would do whatever it took to move people to WordPress.

And once a migration was complete they did the single most important thing: they blogged the hell out of it.

(emphasis mine)

Read the entire blogpost here, it’s quite interesting (and well written).

So, it could seem that Automattic is pulling old tricks on EllisLab. However, a quick google shows that there hasn’t been much mention of ExpressionEngine on the publisher blog until now. Also, it’s not the same situation as back in the days when MovableType and WordPress were equally popular.

Nonetheless …

What do you think?

  • Is Automattic using the same tactics on EllisLab that they were using earlier on Six Apart?
  • Will we see more of these blogposts from Automattic as ExpressionEngine grows in popularity?
  • Or is ExpressionEngine simply too small for them to even bother?
  • Will ExpressionEngine suffer the same “fate” as MovableType?

  1. Ok, WordPress does more than blogs, I know. 

  2. (sic) We all know that should be ExpressionEngine, no space in there.