CodingNic

Persist Reading Progress

Restore the Last Reading Position

Persist Reading Progress 18 min read

Restore the Last Reading Position

Restore the Last Reading Position

Task

Load the saved CFI before displaying the EPUB.

Fetch the user’s progress for the Book, then:

ts
const progress = await fetchProgress(bookId);

if (progress?.cfi) {
  await rendition.display(progress.cfi);
} else {
  await rendition.display();
}

Make sure book.locations.generate(...) has completed before percentage-based calculations are used.

If a stored CFI is invalid for the current EPUB, fall back to the default location instead of leaving the Reader blank.

Test

  1. Open a book.
  2. Read several pages.
  3. Leave the Reader.
  4. Reopen the same book.

The Reader should return to approximately the same position.

Checkpoint

Reopening a Book restores the user’s last persisted EPUB position.