Offline First: What’s in a name?
It’s also “Performance First.” Twitter Lite and others are already doing it.
I recently returned from Offline Camp Berlin, our third Offline Camp. A funny thing has happened at every Offline Camp to date. Inevitably someone will see the stream of tweets coming out of Offline Camp and get very confused as to how and why we are online at Offline Camp.
Offline, online, and somewhere in between
We call it Offline First for a reason, not just “Offline” or “Offline Only.” With an Offline First approach you design your app for the most resource-constrained environments first, and then apply progressive enhancement techniques to make your app work better and better as it has access to more and more resources.
Using an Offline First approach means that your app will not only work offline, but your app will work better when it has access to only a flaky network connection, and your app will even work better when it has a great network connection. Without this intent to design your app for the progression from offline to limited connectivity to great connectivity, there would be no reason to call it Offline First.
“Performance First”
Interestingly, one of the biggest benefits of an Offline First approach has nothing to do with being offline. Offline First apps are faster and more responsive than their cloud-dependent counterparts. An Offline First app stores most (if not all) of its content and data directly on the local device. This makes create, read, update, and delete operations extremely fast as all of your data access happens locally on the device. Your Offline First app can then get updated content, sync its data, or enable features that aren’t practical to make work offline when the app is connected. However, your users can still interact with your app even when there’s no reliable connection available.
What Offline First looks like today
Offline First is a concept that is applicable to any type of app that would typically depend on a network connection. This includes Progressive Web Apps, native mobile apps, hybrid mobile apps (apps built using web technologies that are packaged up as native apps), desktop apps, and even Internet of Things (IoT) apps. Many native apps, to some extent, already take an Offline First approach (though some are still quite dependent on a constant connection to a mobile backend).
Progressive Web Apps
Web apps, especially, can benefit from an Offline First approach, as web apps have traditionally been built as client/server applications. Progressive Web Apps are beginning to help developers make this shift in mindset.
The basic idea of Progressive Web Apps is to combine the discoverability of web apps with the power of native mobile apps. As an end user, you browse to a Progressive Web App just like you would browse to any other website. As you use the app more and more, it gains additional native-app-like capabilities, such as a home screen icon or the ability to send you alerts and notifications. Offline First is an important characteristic of Progressive Web Apps, as it ensures that the app will be available and responsive regardless of the device’s current level of connectivity.
You may have heard of some of these high-profile examples of Offline First apps recently:
Twitter Lite
Twitter just rolled out Twitter Lite last month, an Offline First Progressive Web App:
Every day, millions of people around the world use Twitter to see what’s happening right now. However, there are several barriers to using Twitter, including slow mobile networks, expensive data plans, or lack of storage on mobile devices. While smartphone adoption grew to 3.8 billion connections by the end of 2016, 45% of mobile connections are still on slower 2G networks, according to GSMA.
Today, we are rolling out Twitter Lite, a new mobile web experience which minimizes data usage, loads quickly on slower connections, is resilient on unreliable mobile networks, and takes up less than 1MB on your device. We also optimized it for speed, with up to 30% faster launch times as well as quicker navigation throughout Twitter. Twitter Lite provides the key features of Twitter — your timeline, Tweets, Direct Messages, trends, profiles, media uploads, notifications, and more. With Twitter Lite, we are making Twitter more accessible to millions of people — all you need is a smartphone or tablet with a browser.
Facebook recently announced that the Android version of Instagram is getting offline functionality:
Facebook announced at its F8 developer conference that the Android version of Instagram is getting offline functionality. In fact, the features are already rolling out in certain parts of the world. (I was able to get some of it to work in New York on a phone running Android Nougat, for example.) Offline mode could eventually make it to iOS as well, according to TechCrunch.
The offline mode features go beyond just saving a draft or queueing up a photo at the top of the feed, which the app already let users do when they tried to post with poor service. You can now like or comment on other users’ photos, or even follow and unfollow accounts, without any data connection. The next time your phone accesses the internet, Instagram will go back through this history and complete each of those actions.
Dropbox Paper
Dropbox Paper For iOS recently gained an offline mode as well:
The new offline feature was introduced to allow users to create new documents, or access, edit, and comment on documents stored in the cloud even if they lost their internet connection. When the connection is restored, changes are automatically synced to the Paper service.
YouTube Go
YouTube Go is an app that allows for offline viewing and sharing of videos:
Google has announced YouTube Go, a new app designed to broaden the accessibility of the behemoth video-sharing service. Designed and developed with Indian users in mind, who will be able to test the app first before a broader rollout, YouTube Go is intended to work more effectively in areas where connectivity is more limited.
YouTube Go allows users to save videos for offline viewing, giving options over quality and file size so it’s clear how much data a download will use. The app also allows for local sharing with nearby users without using any data. YouTube Go builds upon the Smart Offline feature that YouTube launched first in India earlier this year.
You may have noticed that all of these examples address not only what happens when the app is offline, but what happens when the app has limited connectivity or is re-connected after being offline for a period of time. I hope this post has cleared up some confusion about what Offline First is and is not. If you want to learn more about the Offline First movement, check out the Offline Camp Medium publication and the Offline First Resources page. You can also join the Offline First community Slack team to talk with others who are working on Offline First apps.
If you enjoyed this article, please ♡ it to recommend it to other Medium readers. Thanks for reading!
