heartbeat.bible - A Progressive Web App built with Next.js

Context

After my internship I felt confident to develop a full PWA with React on my own. A bible reading plan app had been a passion project of mine.

Problem

Reading plans help me read the bible regularly. There're a lot of apps out there that provide similar functionality, but they don't fullfill my cirterias for an app like this. In my opinion a bible reading plan has to:

1. Work offline
Many apps are just a wrapper around a web app or load data too progressively. If you access these apps while you're out of service, abroad or on airplane mode, they're unusable.
A network only mode also doesn't provide a fast user experience on slow connections.

2. Be easily accessable
Lots of apps require you to download the app (supposing it's available on your platform) to see how it works and what plans are offered. Some even want you to sing up with your mail or social identity provider. This causes a unpleasant barrier to entry. It's inconvenient, especially if you want to share the app with your friends.

3. Be lightweight
A reading plan is super simple. I don't want to download a 50MB app for that.

Solution

In this situation, a PWA is a great solution because of its benefits:

1. Work offline:
Service Workers can intercept all requests between browser and server. They don't just handle offline usage, but enable different caching stategies to create an overall better and faster experience.
I used WorkBox to configure my service worker.

2. Be easily accessable:
The sharability of the web platform enables easy and cross-platform sharing. Browsers also give you the option to access the native share sheet:

if (navigator.share) {
    navigator.share({
        title: 'heartbeat.bible',
        text: 'Check out this app!',
        url: 'https://heartbeat.bible/',
    })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

However, you are not limited to the browser. I also built a prompt to install the PWA. It replaces the native Chrome prompt and displays additional instructions on iOS.

3. Be lightweight:
PWAs often require just a small fraction of the device storage space. The size of Twitter Lite, Twitter's Progressive Web App, is only 1-3% of the native app. The initial download size of my app is less than 500KB. The site loads in less than 2 seconds. Images are lazyloaded when users navigate through the app.

Design

I'm not a designer, but I after multiple iterations, I managed to tweak the design until I liked it.

You can checkout the app at https://heartbeat.bible.
Repo: https://github.com/krsilas/heartbeat.bible