Providing an Offline Web Experience for Public Services

Recently the R&D team has been looking at IoT (Internet of Things) and smart cities and I was challenged with trying to come up with a Smart City proof of concept that utilises the skills and technologies I've acquired over the last year. I decided to focus on a single use case for each of two personas - a tourist and a citizen.

A wee city break?

What do people visiting a new town, city or country need most? There are probably lots of answers but in my mind it's things to do, restaurants, access to travel information, maps and possibly shopping information. This sounds fairly obvious but how do they get that information?

There's an app for that.

Yes, there is and for clarity I'm taking native apps, so let's look at that: The good:

• Generally native apps have a better experience. Better experiences equate to engagement. Better engagement leads to conversion.
• Free Wi-Fi is fairly common.
• Mobile OSs are starting to choose the best connection for you.

The Bad:

• More often than not even these apps require connectivity to use them.
• It's expensive to build and maintain apps across multiple platforms.
• OS and version fragmentation amongst other factors lead to technical accessibility issues.
• GDS have a 'by default, no apps' policy for public services in the UK with a mandated cabinet office sign off.
• Delivering public and tourist services over a low quality connection and the cost of roaming means less user engagement and ultimately that affects the bottom line. (I can think back to my recent trip to the US where data was six pounds per megabyte).
• Free wifi is not completely ubiquitous, reliable or app friendly.

The Ugly:

• Something that tech savy people like us take for granted is that the native app install experience is horrible (I tried to get my grandmother to install whatsapp recently on her old school Android and it turned into a hour long technical adventure).
• Some businesses are recognising improved conversions with [native] vs web and explicitly dropping mobile web support (IMO they are asking the wrong questions).

An offline-first design solves most of these problems. But native apps still have the install friction and then we have the UK governments 'by default, no apps' policy - all while mobile usage growth is ferocious.

So, how about an offline web application?

This may sound like a paradoxical statement, but it's a powerful idea and it's the future. During the last few months, within the R&D team I have been researching and building some prototypes for the offline web.

A Smart Tourist.

In regards to our tourist use case we need three important things:

• A way to save the pages for viewing when there is no connectivity.
• A way to save data that can be retrieved when we are offline.
• A way of updating the locally saved data.

There are a number of ways to do all three requirements. I chose to use both the new service worker API and application cache at the same time so that it was possible to create some graceful degradation when using older browsers. With these technologies, it was able to download the data I needed the first time I visited the web application and store it within the browser using indexedDB. This meant that it could fetch this data from the local storage instead of making the perilous journey across the internet. Also by using both application cache and service worker I was able to make the actual pages available offline. The result was a nice web application that does not rely on an internet connection. This has a number of of advantages. For example, imagine you went up to the north coast where the internet connection is fairly poor and there are some places where you get no connection at all. It's a much nicer experience to be able to get the information than getting a grey error screen especially with offline maps (this hasn't been built yet). This with the inclusion of background sync to not leave the user with old data all the time is a really a powerful idea.

Allowing tourist to access content even when offline

A Good Citizen.

One thing that local councils are responsible for is public services e.g. bins, street lights and footpaths. Is it possible to provide a service that allows a citizen to 'report a problem' that works completely offline? Also is it possible to use some of the newest HTML5 technologies to take a photo of the problem and all the information would be submitted when the user's device went back online? The answer to these questions is yes and here is the (sped up) result:

Filing a form in offline including picture and which will sync when online again

If you have any questions or suggestions, please leave a comment below.