Building an All-Offline Web App

If you want things to work well across different devices and browsers, don’t make your app dependent on offline capability; use it sparingly. On the other hand, if you really need deep functionality (i.e., you want your app to work completely offline), be prepared to be very specific about the devices you’re targeting, and very limited in functionality.

In this client’s case, the app we built was a prototype. They wanted full offline functionality, but we only had to cater toward iOS 8 (specifically on a full-sized iPad) and Internet Explorer 10/11 on desktop.

There are too many database technologies. Local storage has size limits. If you want to store data beyond a few MB, you’ll have to rely on the browser’s offline database technology, which is different from browser to browser. IndexedDB isn’t well supported in iOS; WebSQL isn’t supported in IE or Firefox, and is being phased out entirely. Solutions like PouchDB are great attempts at working around this, but may not work in some cases and still have cross-browser problems.

In this last project we used several of apple’s Safari features for running a web app like a native app. We ran into surprises.

This at the previous insight are reminiscent of what I’ve seen in front-end development throughout my whole career: as long as browsers are made by different manufacturers, front-end development will remain challenging.

Once you put your iOS device into Airplane Mode, you can’t debug from your laptop anymore. And since “full screen mode” apps (i.e., mobile web apps) behave a little differently than apps you view directly with the browser (see the last bullet), this makes developers unable to test offline apps completely reliably, and therefore our finished product may be unpredictable.

Application manifests (the document that tells the app which files to save offline) also have many complexities that make it challenging both to develop and debug. Application Cache is a D-bag talks about some of them without pulling any punches.

An offline web app has as many moving pieces as a normal web app, with a few more related to connectivity and the state of the data that is on the user’s device. You have to plan out how the app will look and behave under a few situations that you don’t have to consider with a more traditional app.

For example, should you store just the html offline, or images and javascript as well? If the app runs offline, and makes an AJAX request to something that isn’t cached, is the JS set to fail gracefully? If the content manifest downloads in the background while we’re online, should we swap it out, even though the page is already rendered? If so, do we need to update the DOM based on the manifest’s contents?