Progressive Web Apps (PWA) has become the new norm in building web apps. In contrast to traditional web apps, PWA provides a unique set of features for the mobile web, providing a naive-like experience. One of the core features of PWA is offline-first capability.
As the name suggests, web apps require proper network connectivity to function correctly. For mobile devices, internet connection isn’t always stable. Sudden loss of network connection, more often than not, would corner users into a frustration halt.
With offline-first, developers can design web apps with unique user flows and commit specific actions once the connection is established. This way, the user experience would be much more appealing and less frustrating.
How frustrating it would be if a user had to rewrite a thousand words long blog article, just because there was a connectivity issue.
We could think of similar scenarios where the offline-first feature could become vital for your users, depending on your application domain.
This article will showcase a simple yet powerful use case of transforming a React web app to offline-first, using Google Firebase for the application backend and Hosting.
Progressive Web App
As you are already aware, PWA combines a collection of technologies to build better mobile web applications. Let’s have a look at the main requirements to develop a PWA.
To create a PWA, you need to fulfill the following.
- HTTPS — The app should be served over a secure network.
- Service Worker — A script that handles network calls and asset caching.
- A Manifest file — A JSON file with design details.
Here, the Service Worker specification is the key to making a web app offline-first and progressive. It provides content and asset caching ability in a web browser. This caching mechanism allows the app to function offline.
Firebase is a comprehensive mobile and web app development platform that allows building production-ready apps in no time. Firebase Hosting provides the free hosting capability for web apps developed using all three major frontend frameworks and libraries (React, Angular and Vue). We could also host multiple sites in a single Firebase project. It allows us to deploy non-offline-first and offline-first versions of the same React app.
Building the App
The best way to understand an offline-first web app is to implement and experience the difference. So let’s build an offline-first web app using React.
Our sample app consists of the following main features,
- List of todo tasks.
- Add new tasks.
- Complete and delete the individual tasks.
The todo list is rendered using an API call. It is to see how external connectivity would affect the overall app behavior when the network connection is lost.
Before getting started, make sure the latest versions of Node and Firebase CLI is installed.
1. Creating a Simple React Todo App
Use the Create React App to create a simple React application boilerplate. Once done, it will generate the following folder structure,
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
If you look at the folder structure, you can see the serviceWorker.js file in the generated file list. Here, the Service Worker provides the asset caching capability allowing web apps to be offline-first.
Enabling/Disabling Service Worker is done inside the index.js file (full implementation). Switching serviceWorker.unregister() to serviceWorker.register() will opt you into using the Service Worker.
It’s always a good practice to share your reusable components using Bit (Github). This way, you can maximize code reuse, collaborate with your team on independent components, and build apps that scale.
I shared my Todo component. You can test it for yourself and even install it in your project.
2. Deploy to Firebase Hosting
Once the implementation is done, let’s deploy our web app in Firebase hosting. First, let’s build a production version of the React app, which we plan to deploy.
Initialize Firebase and follow the steps to configure hosting and other settings.
Then, deploy the production build.
firebase deploy --only hosting
The deployed web app can be found here (link).
3. Change the App to Allow Offline-first
The above version doesn’t support the offline-first feature. Hence, when network connectivity is lost, the web app is not functional.
Now, let’s make the app offline-first by opting in to use the Service Worker. Change serviceWorker.unregister() to serviceWorker.register() in index.js (source).
Repeat the commands given in Step 2 again to build and deploy the changes to Firebase hosting.
After deploying the offline-capable web app, let’s analyze its behavior in comparison to the previous.
You can directly experience that the app works as if the connection is available. The only difference the user could notice is that the saved list is not rendered as before. You see this error because the API call is failing due to the connectivity issue. But the application is still usable, and the user experience would be much more positive.
If you like to compare these applications, you can find the hosted version of the offline enabled and disabled applications in the links below.
If you like to try out on your own, you can find the complete source code here. The project consists of two main branches before_offline and after_offline . The branch before_offline contains the implementation for the offline feature disabled app version and after_offline branch includes the source code for the offline feature enabled version.
The credit also goes to the example React Todo App (ref), which I used as the base to create a version for this article.
Overall, I believe you get the essence of making an offline-first web app and how to create one using React and Firebase.
As you have seen, building an offline-first web application isn’t complex anymore. The well-defined patterns and support from PWA features allow any web developer to create these apps. Besides, using Firebase makes it even simpler where you don’t need to worry about the heavy lifting of hosting and managing the application and its storage.
Finally, if you have any questions regarding the example I built, please ask in the comments below. Cheers!
- What is a PWA and why should you care?
- 5 Reasons to Choose PWA for Your Web and Mobile Apps
- How to Share React UI Components between Projects and Apps
Building an Offline-First Web App with create-react-app was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.