Home
Create an Offline First Shopping List with Polymer and PouchDB
Create an Offline First Progressive Web App to provide the convenience of a web app with the performance of a native app. Using an Offline First design, this Shopping List app lets you manage your lists offline and will sync them when you are online.
Cognitive & Data Analytics
Shopping List is an Offline First demo Progressive Web App built using Polymer and PouchDB. The app is designed to work offline and will sync with Cloudant NoSQLDB when online.
By Bradley Holt and Mark Sturdevant
We created a series of Offline First demo apps, each built using a different stack. This one uses Polymer to create a Progressive Web App. 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 CouchDB to allow the shopping lists to be shared across devices.
When the reader has completed this journey, they 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.
- The user manages shopping lists using the Offline First web app.
- Polymer is used to make it a Progressive Web App with Web Components and Service Workers.
- The shopping lists are stored locally in PouchDB while offline.
- When online, PouchDB syncs with Cloudant.
- Cloudant NoSQL DB: A fully managed data layer designed for modern web and mobile applications that leverages a flexible JSON schema.
- Offline First: In a data-first world, your web and native apps need to deliver excellent user experiences, including during network disruptions. The Offline First approach to application development puts performance first and recognizes that network downtime is a fact of life.
- Progressive Web Apps: A Progressive Web App provides both the discoverability of a web app and the reliable, fast, and engaging user experience of a native mobile app.
- Polymer: Libraries, tools, and patterns for building Progressive Web Apps using web platform features such as Web Components, Service Workers, and HTTP/2.
- PouchDB: An open source JavaScript database that syncs with anything that implements the CouchDB Replication Protocol.
- Databases: Repository for storing and managing collections of data.
- ibm-watson-data-lab/shopping-list: A series of Offline First shopping list demo apps, each built using a different stack
- PWA Stats: A community-driven list of stats and news related to Progressive Web Apps
- Web Components: Open standard for components and widgets that are customizable, reusable, and encapsulated
- Polymer App Toolbox: Components, tools, and templates for building Progressive Web Apps with Polymer and Web Components
- Polymer App Toolbox - Starter Kit: A starter kit for building Polymer apps