Offline HTML5, Chrome, and infinite regress

I am using HTML5’s offline mode as part of the Tiree Mobile Archive project.

This is, in principle, a lovely way of creating web sites that behave pretty much like native apps on mobile devices.  However, things, as you can guess, do not always go as smoothly as the press releases and blogs suggest!

PhotobucketSome time I must write at length on various useful lessons, but, for now, just one – the potential for an endless cycle of caches, rather like Jörmungandr, the Norse world serpent, that wraps around the world swallowing its own tail.

My problem started when I had a file (which I will call ‘shared.prob’ below, but was actually ‘place_data.js’), which I had updated on the web server, but kept showing an old version on Chrome no matter how many times I hit refresh and even after I went to the history settings and asked chrome to empty its cache.

I eventually got to the bottom of this and it turned out to be this Jörmungandr, cache-eats-cache, problem (browser bug!), but I should start at the beginning …

To make a web site work off-line in HTML5 you simply include a link to an application cache manifest file in the main file’s <html> tag.  The browser then pre-loads all of the files mentioned in the manifest to create the application cache (appCache for short). The site is then viewable off-line.  If this is combined with off-line storage using the built-in SQLite database, you can have highly functional applications, which can sync to central services using AJAX when connected.

Of course sometimes you have updated files in the site and you would like browsers to pick up the new version.  To do this you simply update the files, but then also update the manifest file in some way (often updating a version number or date in a comment).  The browser periodically checks the manifest file when it is next connected (or at least some browsers check themselves, for some you need to add Javascript code to do it), and then when it notices the manifest has changed it invalidates the appCache and rechecks all the files mentioned in the manifest, downloading the new versions.

Great, your web site becomes an off-line app and gets automatically updated 🙂

Of course as you work on your site you are likely to end up with different versions of it.  Each version has its own main html file and manifest giving a different appCache for each.  This is fine, you can update the versions separately, and then invalidate just the one you updated – particularly useful if you want a frozen release version and a development version.

Of course there may be some files, for example icons and images, that are relatively static between versions, so you end up having both manifest files mentioning the same file.  This is fine so long as the file never changes, but, if you ever do update that shared file, things get very odd indeed!

I will describe Chrome’s behaviour as it seems particularly ‘aggressive’ at caching, maybe because Google are trying to make their own web apps more efficient.

First you update the shared file (let’s call it shared.prob), then invalidate the two manifest files by updating them.

Next time you visit the site for appCache_1 Chrome notices that manifest_1 has been invalidated, so decides to check whether the files in the manifest need updating. When it gets to shared.prob it is about to go to the web to check it, then notices it is in appCache_2 – so uses that (old version).

Now it has the old version in appCache_1, but thinks it is up-to-date.

Next you visit the site associated with appCache_2, it notices manifest_2 is invalidated, checks files … and, you guessed it, when it gets to shared.prob, it takes the same old version from appCacche_1 🙁 🙁

They seem to keep playing catch like that for ever!

The only way out is to navigate to the pseudo-url ‘chrome://appcache-internals/’, which lets you remove caches entirely … wonderful.

But don’t know if there is an equivalent to this on Android browser as it certainly seems to have odd caching behaviour, but does seem to ‘sort itself out’ after a time!  Other browsers seem to temporarily have problems like this, but a few forced refreshes seems to work!

For future versions I plan to use some Apache ‘Rewrite’ rules to make it look to the browser that the shared files are in fact to completely different files:

RewriteRule  ^version_3/shared/(.*)$   /shared_place/$1 [L]

To be fair the cache cycle more of a problem during development rather than deployment, but still … so confusing.

Useful sites:

These are some sites I found useful for the application cache, but none sorted everything … and none mentioned Chrome’s infinite cache cycle!

  • http://www.w3.org/TR/2008/WD-html5-20080122/#appcache
    The W3C specification – of course this tell you how appCache is supposed to work, not necessarily what it does on actual browsers!
  • http://www.html5rocks.com/en/tutorials/appcache/beginner/
    It is called “A Beginner’s Guide to using the Application Cache”, but is actually pretty complete.
  • http://appcachefacts.info
    Really useful quick reference, but:  “FACT: Any changes made to the manifest file will cause the browser to update the application cache.” – don’t you believe it!  For some browsers (Chrome, Android) you have to add your own checks in the code (See “Updating the cache” section in “A Beginner’s Guide …”).).
  • http://manifest-validator.com/
    Wonderful on-line manifest file validator checks both syntax and also whether all the referenced files download OK.  Of course it cannot tell whether you have included all the files you need to.

“lost in hyperspace” – do we care?

I have rarely heard the phrase “lost in hyperspace” in the last 10 years, although it used to be a recurrent theme in hypertext and HCI literature.  For some time this has bothered me.  We don’t seem less lost, so maybe we are just more laid back about control, or maybe we are simply relinquishing it?

Recently Lisa Tweedie posted a Pintrest link on Facebook to Angela Morelli‘s dynamic infographic on water.  This is a lovely vertically scrolling page showing how the majority of the water we use is indirectly consumed via the food we eat … especially if you are a meat eater (1 kilo beef = 15,400 litres of water!).  The graphic was great, except it took me ages to actually get to it.  In fact the first time I found a single large graphic produced by Angela as a download, it was only when I returned to it that I found the full dynamic info graphic.

Every time I go to Pintrest I feel like I’ve been dropped into a random part of Hampton Court Maze, so hard to find the actual source … this is why a lot of artists get annoyed at Pintrest!  Now for Pintrest this is probably part of their design philosophy … after all they want people to stay on their site.  What is amazing is that this kind of design is so acceptable to users … Facebook is slightly less random, but still it takes me ages to find pages I’ve liked, each time I start the search through my profile afresh.

In the early days of hypertext everyone used to talk about the “lost in hyperspace” problem … now we are more lost … but don’t care anymore.  In the Mediaeval world you put your trust in your ‘betters’ lords, kings, and priests and assumed they knew best … now we put our trust in Pintrest and Facebook.

Walking Wales

As some of you already know, next year I will be walking all around Wales: from May to July covering just over 1000 miles in total.

Earlier this year the Welsh Government announced the opening of the Wales Coastal Path a new long distance footpath around the whole coast of Wales. There were several existing long distance paths covering parts of the coastline, as well as numerous stretches of public footpaths at or near the coast. However, these have now been linked, mapped and waymarked creating for the first time, a continuous single route. In addition, the existing Offa’s Dyke long distance path cuts very closely along the Welsh–English border, so that it is possible to make a complete circuit of Wales on the two paths combined.

As soon as I heard the announcement, I knew it was something I had to do, and gradually, as I discussed it with more and more people, the idea has become solid.

This will not be the first complete periplus along these paths; this summer there have been at least two sponsored walkers taking on the route. However, I will be doing the walk with a technology focus, which will, I believe, be unique.

The walk has four main aspects:

personal — I am Welsh, was born and brought up in Cardiff, but have not lived in Wales for over 30 years. The walk will be a form of homecoming, reconnecting with the land and its people that I have been away from for so long. The act of encircling can symbolically ‘encompass’ a thing, as if knowing the periphery one knows the whole. Of course life is not like this, the edge is just that, not the core, not the heart. As a long term ex-pat, a foreigner in my own land, maybe all I can hope to do is scratch the surface, nibble at the edges. However, also I always feel most comfortable as an outsider, as one at the margins, so in some ways I am going to the places where I most feel at home. I will blog, audio blog, tweet and generally share this experience to the extent the tenuous mobile signal allows, but also looking forward to periods of solitude between sea and mountain.

practical — As I walk I will be looking at the IT experience of the walker and also discuss with local communities the IT needs and problems for those at the edges, at the margins. Not least will be issues due to the paucity of network access both patchy mobile signal whilst walking and low-capacity ‘broadband’ at the limits of wind-beaten copper telephone wires — none of the mega-capacity fibre optic of the cities. This will not simply be fact-finding, but actively building prototypes and solutions, both myself (in evenings and ‘days off’) and with others who are part of the project remotely or joining me for legs of the journey1. Geolocation and mobile based applications will be a core part of this, particularly for the walkers experience, but local community needs likely to be far more diverse.

philosophical — Mixed with personal reflections will be an exploration of the meanings of place, of path, of walking, of nomadicity and of locality. Aristotle’s school of philosophy was called the Peripatetic School because discussion took place while walking; over two thousand years later Wordsworth’s poetry was nearly all composed while walking; and for time immemorial routes of pilgrimage have been a focus of both spiritual service and personal enlightenment. This will build on some of my own previous writings in particular past keynotes2 on human understanding of space, and also wider literature such as Rebecca Solnit’s wonderful “Wanderlust“.  This reflection will inform the personal blogging, and after I finish I will edit this into a book or account of the journey.

research3 — the practical outcomes will intersect with various personal research interests including social empowerment, interaction design and algorithmics4.  For the walker’s experience, I will be effectively doing a form of action research!.  This will certainly include how to incorporate local maps (such as tourists town plans) effectively into more large-scale experiences, how ‘crowdsourced’ route knowledge can augment more formal digital and paper resources, data synchonisation to deal with disconnection, and data integration between diverse sources.  In addition I am offering myself as a living lab so that others can use my trip as a place to try out their own sensors and instrumentation5, information systems, content authoring, ethnographic practices, community workshops, etc.  This may involve simply asking me to use things, coming for a single meeting or day, or joining me for parts of the walk.

If any of this interests you, do get in touch.  As well as research collaborations (living lab or supporting direct IT goals) any help in managing logistics, PR, or finding sources of funding/sponsorship for basic costs, most welcome.

I’ll get a dedicated website, Facebook page, twitter account, and charity sponsorship set up soon … watch this space!

  1. Coding whilst walking is something I have thought about (but not done!) for many years, but definitely inspired more recently by Nick the amazing cycling programmer who came to the Spring Tiree Tech Wave.[back]
  2. Welsh Mathematician Walks in Cyberspace“, and “Paths and Patches: patterns of geognosy and gnosis“.[back]
  3. I tried to think of a word beginning with ‘p’ for research, but failed![back]
  4. As I tagged this post I found I was using nearly all my my most common tags — I hadn’t realised quite how much this project cuts across so many areas of interest.[back]
  5. But with the “no blood rule”: if I get sensor sores, the sensors go in the bin 😉 [back]

logo design competition – final days

The first entries are in for the logo design competition for the open HCI course I’m presenting in the autumn.  Arunn @ Talis has posted them on the wall in the office.  One is a very good cartoon style illustration, but I’m sure I don’t really look like that :-/

Final entries due by tomorrow midnight … and then Arunn is going to post them up for popular vote … and whichever gets most votes I end up wearing on a T-shirt at the HCI conference in a few weeks time.  There are times when democracy just feels wrong!

Tiree Touchtable – the photos

At last, the photos from the week making and installing the Tiree Touchtable.  You can see all the photos on Flickr, but here is small selection:

The main components – projector, Kinect (on top of projector) and mini-Mac:

The Kinect disassembled:

Platform to attach to roof beams and support projector and mini-Mac:

Add mirror:

Andrea adjusting the mirror:

It works!

Alan gently centre-punches location for screws on Kinect frame:

note the tool … after this the Kinect didn’t work … can’t think why?  But happily there was a second Kinect 🙂

Then Andrea screws Kinect to timber support:

Testing on the workbench:

Moment of truth — on the way to the Rural centre to install … second Kinect carefully cradled in Alan’s old jumper:

       

Parts laid out, ready to go:

Steve fits mounting brackets, Alan looks on:

Alan thinks, “platform looks secure”.  Fiona thinks, “Alan doesn’t”.

Gets boring standing at the bottom of the ladder

Andrea fitting Kinect drop arm:

Andrea fitting the mini-Mac:

“Yep, that seems to be OK”

Let there be light:

Looking down — behold, Tiree Touchfloor:

The secret of true engineering … if the table is too low for the sensors, lift it higher:

Holiday Reading

Early in the summer Fiona and I took 10 days holiday, first touring on the West Coast of Scotlad, south from Ullapool and then over the Skye Road Bridge to spend a few days on Skye.  As well as visiting various wool-related shops on the way and a spectacular drive over the pass from Applecross, I managed a little writing, some work on regret modelling1. And, as well as writing and regret modelling, quite a lot of reading.

This was my holiday reading:

The Talking Ape: How Language Evolved, Robbins Burling (see my booknotes and review)

In Praise of the Garrulous, Allan Cameron (see my booknotes)

A Mind So Rare, Merlin Donald (see my booknotes and review)

Wanderlust, Rebecca Solnit (see my booknotes)

  1. At last!  It has been something like 6 years since I first did initial, and very promising, computational regret modelling, and have at last got back to it, writing driver code so that I have got data from a systematic spread of different parameters.  Happily this verified the early evidence that the cognitive model of regret I wrote about first in 2003 really does seem to aid learning.  However, the value of more comprehensive simulation was proved as early indications that positive regret (grass is greener feeling) was more powerful than negative regret do not seem to have been borne out.[back]

Tiree Touchtable installed

It is there!

Suspended high in the ceiling of Tiree Rural centre, a slightly Heath Robinson structure (pictures to come) that powers Tiree’s first public touchtable.

It was a long day, starting at 9:30 in the morning and not finishing until after 9pm in the evening.

The first few hours were simply getting the physical supports in place — with special thanks to Steve Nagy, who fixed the major elements, in particular the awkward tasks of suspending a two foot square (60cx x 60cm) platform that had to be positioned to lock into four steel rods, all while standing on a ladder 20 foot in the air.  Then a long task up and down ladders, huddled over computer screens, adjusting extending, puzzling over strange banding effects that we eventually concluded were artefacts of low level processing with the Konect’s image depth algorithms.

A squadron of flies constantly circled in the projector beam, their shadows suggesting maybe a virtual ‘squat the fly’ game could be developed!   There had been a sale in the cattle ring on Friday, so the flies presumably a remnant of that … but curiously, in the absence of cows or sheep, it was the Konect sensor itself that was their focus of attention, occasionally landing on one of the lenses — maybe they were attracted by the Infra-Red transmitter – a whole new area for etymological research.

The team cleaning the cattle ring, watched and chatted, and then returned with a spotlessly cleaned (it had been covered by ‘you know what’!) sheet of white wood to act as a table cover.

And now, well there is still work to do: permanent electric supply up into the rafters (to replace the temporary tangle of strung together extension cables, that hung from the ceiling during testing), improvements to the algorithms to extend the range to allow the sensors to be as high as possible (to avoid being hit by the next passing ladder), and of course applications to run in the space.

But we feel the back has been broken and a good weeks work.

D-Day for Tiree Touchable

This is it, D-Day — installing the projected touch table in Tiree Rural Centre (see “microwave — Tiree Touchtable“).  Everything made up and ready on the ground after a week of sawing, screwing, drilling and gluing.  So now just (!) climbing up ladders and bolting it all onto the beams, 5 metres up, then seeing if it all works!

A few minor problems along the way, lost one Kinect due to (Alan’s) over-enthusiastic use of a centre punch when drilling holes.  One broken mirror — oops, don’t I remember something about those?  And tetchy projector that doesn’t want to talk to its remote control (helpful manufacturers online FAQ says, “if the remote doesn’t work, use the control panel”).

If we manage the day without dropping a computer 20 foot, we will probably be happy.

Full report and photos later today …

microwave – Tiree touchtable

To compliment the biannual Tiree Tech Wave weekends, this week is a microwave!  Andrea Bellucci is here for the week and by the end of the week the table in the Rural Centre, where Tech Wave runs, will be a giant touchtable.

We have 3500 lumens projector, mini-mac and a Kinect to be mounted high in the ceiling.  Andrea’s software will then use the Kinect distance sensing to be able to pick up movements over and on the table-top and hence enable the kinds of touch interactions we are familiar with on mobile phone or pads.

This week we will be happy if we get all the equipment working in situ (visions of us all teetering 20ft up ladders), and maybe some test.  However, once in place we hope it will be a great resource for innovate applications for future Tech Waves and a means to run long term applications for tourists and locals.  In particular, we will soon have geocoded data for the ‘On the Ground‘ project (making island heritage archives available through mobile phones) — using this same data we cshould be able to create a classic tourist map projected on the table so that visitors can select locations and look at images and information about them, all by simply touching and dragging on the table.

Alt-HCI open reviews – please join in

Papers are online for the Alt-HCI trcak of British HCI conference in September.

These are papers that are trying in various ways to push the limits of HCI, and we would like as many people as possible to join in discussion around them … and this discussion will be part of process for deciding which papers are presented at the conference, and possibly how long we give them!

Here are the papers  — please visit the site, comment, discuss, Tweet/Facebook about them.

paper #154 — How good is this conference? Evaluating conference reviewing and selectivity
        do conference reviews get it right? is it possible to measure this?

paper #165 — Hackinars: tinkering with academic practice
        doing vs talking – would you swop seminars for hack days?

paper #170 — Deriving Global Navigation from Taxonomic Lexical Relations
        website design – can you find perfect words and structure for everyone?

paper #181 — User Experience Study of Multiple Photo Streams Visualization
        lots of photos, devices, people – how to see them all?

paper #186 — You Only Live Twice or The Years We Wasted Caring about Shoulder-Surfing
        are people peeking at your passwords? what’s the real security problem?

paper #191 — Constructing the Cool Wall: A Tool to Explore Teen Meanings of Cool
        do you want to make thing teens think cool?  find out how!

paper #201 — A computer for the mature: what might it look like, and can we get there from here?
        over 50s have 80% of wealth, do you design well for them?

paper #222 — Remediation of the wearable space at the intersection of wearable technologies and interactive architecture
        wearable technology meets interactive architecture

paper #223 — Designing Blended Spaces
        where real and digital worlds collide