Offline-first e-book reader
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Gutenberg - Offline-first Ebook Reader


This project is a demo of an Offline First web application that allows the user to:

  • browse a library of Victorian fiction, imported from Project Gutenberg
  • choose which books you would like on your device and download them
  • read each book, even when not connected to the internet


mobile screenshot


You can try it for yourself at


This application is a simple web application using the following technologies

  • PouchDB to store data in the browser and replicate it from the cloud
  • Cloudant to store data in the cloud
  • Bootstrap for responsive HTML
  • jQuery for DOM manipulation

A publicly readable database, ebooks, contains a list of the available books. The documents in the database look like this:

    "_id": "1023",
    "_rev": "1-e61d156a503cd4d9ae73debd9bc2b035",
    "url": "",
    "title": "Bleak House",
    "author": "Charles Dickens",
    "year": 1853,
    "db_name": "ebook_1023",
    "download_url": "",
    "num_docs": 369

storing meta data about the book, and where it was downloaded from.

Separately, the text of each book is stored in a separate database - one per book. So "Bleak House"" is stored in the database ebook_1023, with each document in that database containing around 20 paragraphs of text.

    "_id": "1005",
    "_rev": "1-ec2e18e806164bf900489c965a67da22",
    "txt": "Dinner was over, and my godmother and I were ...."

When the web app is first visited, the ebooks database is replicated to an in-browser copy using PouchDB:

var ebooksdb = new PouchDB("ebooks");
var stub = "";
ebooksdb.replicate.from(stub + "/ebooks");

When a used elects to download a book, that book's database is replicated to an in-browser copy in the same way:

  var db_name = "ebook_1023";
  var pdb = new PouchDB(db_name);  
  pdb.replicate.from(stub + "/" + db_name)
    .on('complete', function (info) {
      // re-render the ebook list
    .on('change', function (info) {
      // update the progress bar

How did the data get in there in the first place?

In the scripts directory of this repository, there is an import.js which downloads an ebook from Project Gutenberg, splits the text into paragraphs, uploads documents to Cloudant and saves the meta data in the ebooks database.

The script runs this script once for each book.

To do

  • this isn't a true "offline first" app yet, because the html, js & css needed to render the page are not cached offline.
  • your place in the book is not stored yet


Many thanks to Project Gutenberg for creating this library of out-of-copyright works and publishing them for free.