Taxonomy Icon

Mobile Development

Create an offline-first shopping list progressive web application

JavaScript React Preact Polymer Ember.js Vue.js Try the app

Summary

Shopping List is a series of offline-first Progressive Web App demos built using Vanilla JS (plain JavaScript), React, Preact, Polymer, Ember.js, and Vue.js. Each implementation uses PouchDB. The app is designed to work offline and will sync with Cloudant® NoSQLDB when online.

Description

We created a series of Offline First demo apps, each built using a different stack. Implementations include Vanilla JS (plain JavaScript), React, Preact, Polymer, Ember.js, and Vue.js. By using a Service Worker and PouchDB, shopping list data is cached locally to allow the app to work while offline. When online, PouchDB syncs with Cloudant NoSQL DB or Apache CouchDB to allow the shopping lists to be shared across devices.

When you have completed this developer pattern using the technology stack of your choosing, you will understand how to: Implement an app database that runs in the browser with local data when offline and syncs with a remote database when online. Create an Offline First Progressive Web App.

Flow

flow

  1. The user manages shopping lists using the Offline First Progressive Web App.
  2. Vanilla JS (plain JavaScript), React, Preact, Polymer, Ember.js, or Vue.js. is used to build the Progressive Web App, leveraging a Service Worker to enable the app to work offline.
  3. The shopping lists are stored locally in a PouchDB database while offline.
  4. When online, the PouchDB database syncs with an IBM Cloudant database.