Offline First: Cellular versus cable-bound web solutions
Student
Alexander Junger, 1210601010
Assistant
Julian Stadon
Salzburg, January 30h 2013
Abstract
While traditional Internet services like cable or DSL are slowly enhancing user experience,
cellular-powered services have improved significantly in the last couple of years and the pool
of all sorts of mobile applications is growing. Satisfactory user experience with said
applications, is, however, limited to certain areas where high bandwidth cellular coverage is
available. This paper will elaborate on 'Offline First' as a new approach to designing
responsive, context-aware web applications.
Keywords: Offline First, Cellular Coverage, Responsive Design, Network Awareness
Index
1. Introduction .........................................................................................................................................4
1.1. The term “Responsive Design” .....................................................................................................4
2. Techniques for “Offline First” ...........................................................................................................5
2.1. General approach .........................................................................................................................5
2.2. Approaches to offline caching ......................................................................................................5
2.3. Concerns for Backend Development ...........................................................................................6
2.4. Concerns for UI Design ................................................................................................................6
3
4
1. Introduction
A large portion of the increasing usage of the WWW, both in a quantitative way, in terms of
traffic, but also a qualitative way, in terms of it conquering every aspect of our daily lives, can
be attributed to the rise of mobile applications that happened in recent years. There are two
different types of mobile applications, native and web-based. While the first have to be
installed on a device and are implemented to make best possible use of that device's
specifics, web-based applications offer more options for adaptability. However, the approach
is so different to what web makers used to do some years ago, that the realization of highly
context-aware web applications is hardly feasible for smaller organizations and companies
and is usually limited to big players like Google.
1.1. The term “Responsive Design”
One key step in the right direction, that has reached most professionals over the last three
years is responsive design and the more radical call for mobile first. The point is made that,
with mobile devices being used more and more often to access content on the web, it
becomes necessary to focus development on those devices. It is evident, that this school of
thought made the web more accessible for mobile users, by moving it away from clumsy web
pages that were hard to use and hardly ever useful on small screens. At the same time
though, a shift of focus became apparent, where web makers seemed to spend most of their
attention on catering for all sorts of screen sizes, while the holistic idea of responsive design
didn't play the role it needs to play.
There is reason to believe that the main aspect besides form factor, that contributes to an
application's responsiveness is how it deals with the device's internet connection. As can be
seen in Figure 1, it has been shown that the majority of users are disappointed by how
mobile applications perform in regards to loading their content. This is of grave importance,
seeing as how the recent trend for retina-optimization will, inevitably, inflate page load. Since
high-speed cellular coverage is mostly restricted to urban regions and, as mobiThinking
(2013) found out, flat rate data plans are the exception rather tan the rule, contributing 29%
to US and only 8% to European data plans, compensating for page load with high bandwidth
is not an ideal option. Consequently, new solutions have to be found, evaluated and
employed that help to compensate for connection speed variances, ultimately leading to
higher usability and minimum loading time while not compromising on the benefits of high
resolution displays and the like. In this paper I want to introduce some of these techniques,
which can be summarized as bandwidth-responsive design, with “offline first” being what
“mobile first” is to responsive design.
A
5
Fig. 1. This graphic shows the gap between user expectations and reality in
regards to load time of m-commerce sites.
2. Techniques for “Offline First”
2.1. General approach
While “offline first” sounds paradox at first (an online application cannot work without being
online), the actual message is to start with the assumption that mobile data connection is
inexistent or very slow and ensuring that the application is still available under these
circumstances. The implicated concerns are manifold, including primarily the need for very
efficient client side caching mechanisms, heavy reliance on asynchronous refreshing and a
new way of approaching user interface design that resembles that of native apps. While the
second and third part are comparably trivial due to the fact that they are already in widespread use today, the first and foremost problem to be solved is that of semi-permanently
storing a website in a browser, so that it is available to users when they have no sufficient
connection.
2.2. Approaches to offline caching
The HTML5 specification, section 5.7, provides a mechanism for caching pages on the client
machine, which is called Application Cache (W3C, 2012) and localStorage, which is a
JavaScript oriented API (W3C, 2013). While the latter also has it's shortcomings, it is
certainly preferred over HTML5's App. Cache, where the manifests file often causes
problems in practice. With localStorage, Applications can store key-value pairs on client
browsers, which reside there – even as the browser is closed – and can be reused later.
A
6
Values of localStorage data are always stored in string form, which requires commonly
available “stringify”/parse methods. A counterintuitive – thus interesting – fact is that
localStorage reading operations are significantly slower than reading from normal JavaScript
objects, however the actual size of said data is not of significant relevance. (Zakas 2011) It
would therefore seem appropriate to minimize the amount of reading operations and query
larger bits of data at once.
A technique that is already very common at this time is to make use of a HTTP request's
header data to let browsers know how to handle client side caching. “Expires”-Headers
provide a useful tool to make a browser only load what it needs to load, however this is a
general caching principle rather than specifically applying to offline caching.
2.3. Concerns for Backend Development
The aforementioned asynchronous refreshing via AJAX is most likely the most crucial part of
emulating the feel of native applications, as it doesn't re-render a whole page but limits the
refresh to specific parts of it. In regards to offline first, the backend needs to provide
thoroughly thought out RESTful interfaces, as ideally only the bare essentials of what is
required would be replied after an AJAX-Request (given that this doesn't unnecessarily
increase request frequency). If, however, the response to such a request is simply sending
the entire page, the user might not immediately feel it (if implemented decently), but in terms
of page load there is no real difference to conventionally refreshing the entire page.
2.4. Concerns for UI Design
The mentioned concern about changes in User Interface Design stem from the fact, that an
application will have to know if a cellular connection is currently available and then present
itself in a way that doesn't cause user friction. This is especially of importance with uploading
respectively posting data to a server, as downloading data in most cases means that the user
is actively waiting for the process to finish. If, however, the user writes a blog post and
presses a submit button, he will usually expect the post to be available to others instantly,
while the application might not be able to send the actual POST-Request due to lack of
coverage. As this would cause unnecessary confusion, it is important to find ways and
communicate the state of the application to the user. Naturally, lots of knowledge should be
obtainable from the field of native mobile applications.
A
7
3. Results
As Charland and Leroux (2011) put it, “As much as native and Web are pitted against one
another in this debate, the likely outcome is a hybrid solution. “ Mobile first is starting to
develop from a new, emerging trend to a commonly followed best practice. It should be the
next consequence in the realization of a responsive web experience for all users, to design
and develop in full awareness of the possibilities and limitations that different cellular
contexts imply. As has been shown, the technological foundations for this to take place are
widely implemented and useable, and it is the next big step for web engineers to come up
with design patterns that assemble these technologies and put them to use most effectively.
A
8
4. References
Charland A., Leroux B. (2001). Mobile Application Development: Web vs. Native. Communications of
the ACM, 54(5), 49-53. doi: http://doi.acm.org/10.1145/1941487.1941504
mobiThinking (Oct. 2013). Latest mobile stats. http://mobithinking.com/mobile-marketingtools/latest-mobile-stats/b#unlimiteddata
Mobile load time vs user expectations. [Image] (n.d.).
http://www.strangeloopnetworks.com/resources/infographics/mobile-infographics/mobileload-time-vs-user-expectations/
W3C. (Aug 2012). Offline Web Applications. http://dev.w3.org/html5/spec-preview/offline.html
W3C. (Jul 2013). Web Storage. http://www.w3.org/TR/webstorage/#the-localstorage-attribute
Wroblewski, L. (2011). Mobile First. New York: A Book Apart.
Zachas, N. (Dec 2011). LocalStorage read performance.
http://calendar.perfplanet.com/2011/localstorage-read-performance/
5. Bibliography
Feyerke A. (2013). Say Hello To Offline First. http://blog.hood.ie/2013/11/say-hello-to-offline-first/
Prasad A. (2011). Offline Support is Valuable, and You Can’t Add it Later.
http://aanandprasad.com/articles/offline/
A
9