Offline-first is a fairly straightforward concept on the surface, yet implementation of Offline-first apps canpresentmany challenges. Fortunately, there are a variety of tools available to helpdevelopers build offline-first apps.
Before we get into the tools available to developers, however, here's a bitof background on the offline-first movement.Thefirst major introduction of offline-first was ina 2013 A List Apart article by Alex Feyerke :
When it comes to building apps, we often assume our users are very much like us. We picture them with the latest devices, the most recent software, and the fastest connections. And while we may maintain a veritable zoo of older devices and browsers for testing, we spend most of our time building from the comfort of our modern, always-online desktop devices.
As Jeffrey Zeldmanhassaid , "Offline-first is the new progressive enhancement." The basic idea ofprogressive enhancement is to startwith anassumption of base-level capabilities and then takeadvantage of more device capabilities as they become available. The traditional approach to progressive enhancement for web apps has been to allowa web page to work, to some base-level standard, with solelyHTML and then progressivelylayeron functionality using CSS and then javascript.
With offline-first, we assume that, as a baseline,your app will not have a working network connection.Then, your app can be progressively enhanced to take advantage of network connectivity when available. This takes a shift in mindset to not assume that lack of connectivity is an error condition. Build your app to work without a connection. Get updated content, sync your data, or enable features that aren’t practical to make work offline when the app is connected. Let users still interact with your app when there’s no reliable connection available. Let's now take a look at both some high-level and low-level offline-first tools available to developers today.
The Mobile Analytics Playbook: A guide to better testing
Get the Book
High-Level Tools & Frameworks Progressive Web AppsIf you're a web developer then you'll want to take a look at Progressive Web Apps if you haven't already.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. For example, installation to your home screen or the ability to send you alerts and notifications. Google is the biggest proponent of Progressive Web Apps , and there are growingnumber of Progressive Web Apps being built .
Progressive Web Apps are an opportunity for web developers to rethink how we approach building web apps. People haveclearly demonstrated that they likethe interaction model of native apps. There’s a lot that we can learn from how native apps are built.Don’t get me wrong, I’m a huge believer in the power of the open web.
I don’t think we should just turn web apps into native apps and call it done. I do think that we can incorporate some of the best parts of native apps into how we build web apps while not losing the soul of the open web.
Polymer App ToolboxReady to start building your first Progressive Web App? Then check out Polymer App Toolbox , "a collection of components, tools and templates for building Progressive Web Apps with Polymer."Polymer App Toolbox is part of Google's Polymer Project and features"offline caching as a progressive enhancement, using service workers."
HoodieThe open source Hoodie project was probably the first framework to embrace the offline-first moniker and approach. Hoodie is "a complete backend for your apps: develop your frontend code, plug it into our API and your app is ready," which uses an"offline-first, no-backend architecture."
IonicIonic is a tool that allows you to create hybrid mobile apps using Angular . Ionic can deploy to native platforms (including iOS and Android) using Apache Cordova or PhoneGap , or you can deploy an Ionic appto the browser as a Progressive Web App. The Ionic blog has a poston Building an Ionic App with Offline Support . You can also extend the offline-first capabilities of your Ionic app byadding PouchDB to the mix (more on PouchDBfurther in this article).
Couchbase MobileCouchbase Mobile is a set of tools that can be used to take an offline-first approach to your data. Couchbase Liteprovides an API tostore data locally on iOS and Android platforms. CouchbaseSync Gateway allows for replication of databetween an embedded Couchbase Lite database and Couchbase Server.
Realm Mobile PlatformThe Realm Mobile Platform also allows you to take an offline-first approach to your data byenablingreal time data sync betweena Realm Mobile Database embeddedin an iOS or Android appandthe Realm Object Server. Realm says that this feature will be available soonfor React Native andXamarin apps as well.
Mapbox MobileMapbox Mobile is an "open source SDK lets developers add beautiful maps and turn-by-turn navigation to their apps that can go offline."From Mapbox:
Maps no longer need a data connection. Both our Android and iOS SDKs can pre-cache maps to save bandwidth and data charges, optimize performance, and anticipate the lack of network access.
Low-Level Tools & Components Service WorkersThe newest and biggest development in offline-first for web developers is the Service Worker specification . You may remember the html5 Application Cache (AppCache), which was the first attempt at providing a browser mechanism for caching content and assets for offline usage. There were numerous issues with the AppCache and it has since been deprecated by most browsers.
Service Workers is a new