Offline First
Apps designed to work, despite flaky networks.
Offline First is an approach to app development in which apps are designed for the most resource-constrained environments first. An Offline First app will not only work offline, but will also work better over an unreliable network connection, and even better over a solid one.
An Offline First app stores its content and data directly on the local device for fast retrieval. Users can modify data while offline, and the app will synchronize changes to cloud copies when able.
The Offline First movement is bigger than IBM. It’s a community of independent developers, UX professionals, makers & builders, and companies like Google and IBM on a number of innovations, such as reproducible data science and analytics at the edge. Join us.
Collections
-
Offline Camp
Building the Offline First community, one campfire at a time.
6 projects | View Collection -
Offline First Shopping List
A series of simple Offline First apps, built with the technology you already know
13 projects | View Collection -
Location Tracker
Build Offline First apps that leverage the geospatial capabilities of IBM Cloudant.
3 projects | View Collection -
Cloudant FoodTracker
Learn how to build Offline First iOS apps with Swift and Cloudant Sync.
3 projects | View Collection
Projects
-
Offline First Sample Implementations
GitHubThe main page for all 12 versions of our shopping list app, each in a different stack.
-
Voice of InterConnect
GitHub | Medium | demo | otherProof that Progressive Web Apps can do some serious analysis.
-
Offline Sync for Progressive Web Apps
Medium | developerWorksBuilding Offline First Progressive Web Apps with Apache CouchDB, Hoodie, and PouchDB.
-
Making Your App Awesome When the Network Isn’t (Part 2)
Medium | GitHubA beginner’s guide to ensuring quick page loads — offline or not — with service workers.
-
Making Your App Awesome When the Network Isn’t (Part 1)
Medium | GitHubA beginner’s guide to offline data storage and sync with PouchDB & Apache CouchDB™.
-
'Service Workers & their role in PWAs' — Ipsha Bhidonia
MediumRecapping an excellent PHP UK Conference talk on the inner workings of Progressive Web Apps.
-
Shopping list demo using Vue.js and PouchDB [Progressive Web App]
GitHub | Tutorial | Live DemoSimple Offline First demo app, showing a shopping list built with Vue.js.
-
Shopping list demo using Polymer and PouchDB [Progressive Web App]
GitHub | Youtube | Tutorial | Live DemoOffline First shopping list example app, built with Polymer.
-
Shopping list demo using vanilla JavaScript and PouchDB [Progressive Web App]
GitHub | Tutorial | Live DemoSimple Offline First shopping list app, built with plain JavaScript.
-
Shopping list demo using React and PouchDB [Progressive Web App]
GitHub | Live DemoOffline first shopping list demo app using React.
-
Detaching Cloudant Attachments to Object Storage with Serverless Functions
GitHub | MediumBuild a pipeline to move Cloudant attachments to object storage using IBM Cloud Functions.
-
CouchDB, PouchDB and Hoodie as a Stack for Progressive Web Apps
MediumOn promoting the stack for offline-first apps.
-
Doing Moar Together
MediumUsing Agile Methodologies to produce reference implementations for Progressive Web Apps.
-
Shopping list demo using Electron and PouchDB [desktop app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
How to Build the Fastest Website in the World
MediumFrom the Amp project and Google’s Lighthouse, to Offline First and service workers.
-
Offline First Drum Machine
GitHub | MediumA browser-based drum machine that goes offline without dropping a beat.
-
Shopping list demo using Kotlin and Cloudant Sync [native mobile app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using Swift and Cloudant Sync [native mobile app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using Ionic and PouchDB [hybrid mobile app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using React Native and PouchDB [hybrid mobile app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using Ember.js and PouchDB [Progressive Web App]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using Preact and PouchDB [Progressive Web App]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Shopping list demo using Cordova and PouchDB [hybrid mobile app]
GitHubA demo series featuring reference implementations using different stacks, but always featuring offline-first design.
-
Using React and Preact to Build My First Offline First Apps
MediumCreating Progressive Web Apps with PouchDB and Apache CouchDB.
-
PouchDB: The Swiss Army Knife of Databases
MediumUse PouchDB in the browser, as a client for a remote database, or on the server side.
-
Rethinking Offline First sync for Service Workers
MediumAdapting PouchDB replication to a new and unfamiliar context.
-
Offline-First QR Code Badge Scanner
GitHub | developerWorksBuild a data collection app that captures and stores QR Code data, even when your network is unavailable.
-
Location Tracker Envoy Server [2]
GitHub | developerWorksScaling the CouchDB database-per-user architecture? No problem.
-
Scaling Offline First With Cloudant Envoy
GitHub | Medium | npmAddressing limitations of the CouchDB one-database-per-user design pattern.
-
Cloudant FoodTracker Part 3: User Interface
GitHub | developerWorksImprove UI elements to reflect the data sync process.
-
Location Tracker Node.js Server [1.5]
GitHub | developerWorksThe unsung hero of our location tracker demo—the back end.
-
Location Tracker Swift Client [1]
GitHub | developerWorksTrack your location, offline or on.
-
Cloudant FoodTracker Part 2: Sync to the Cloud
GitHub | developerWorksEnable sync for local data on an iOS device to cloud copies.
-
Field Work: Offline Editing and Mapping of Geospatial Data
GitHub | demo | developerWorksA demo app designed for utilities repair personnel who need to capture events in work orders.
-
Cloudant FoodTracker Part 1: The Datastore
GitHub | developerWorksReplace Apple's local file storage with Cloudant's iOS library.