Building a Progressive Web App in React
With Firebase’s new Firestore for offline support
In case you haven’t heard, Progressive Web Apps (PWAs) are finally ready for prime time.
It might not yet be obvious to many people how to install a PWA, but if you’ve done it once you won’t forget it and it’s simpler than using an app store.
There are many reasons to start building PWAs and converting current responsive web apps, including:
- Offline support: Service workers keep much of your application running smoothly with a spotty internet connection or none at all. Once users are back online, their data syncs behind the scenes.
- A truly native looking and feel: Your app is launched from a custom app icon and can function in fullscreen.
- Breaking free of the app store: As opposed to native apps, there’s no approval process for PWAs so no delay for new features or bug fixes.
- Progressive enhancement: If users don’t install your app it will still function as a normal web application. Hence the “progressive” in Progressive Web App!
✨ The magic ✨
You need 4 things to make a PWA: HTTPS hosting, a service worker, a properly configured index.html file, and a web app manifest.json file. The examples below are geared towards React but are similar for any framework.
Step 1: HTTPS hosting
Firebase provides free SSL certificates and freemium hosting. Another great choice is Netlify.
Step 2: Set up a service worker
If you want your app to work offline once installed, you’ll need a service worker. Create React App makes one for you, but you can always configure your own using something like this. Learn more about how they work.
Step 3: Configure your index.html file
A challenge in configuring your app is understanding the difference in how iOS and Android use the meta tags in index.html and the web app manifest. We’ll explain how each option is used below.
One painful part to this process is creating the massive number of splash screens for iOS: one for each screen size and orientation you want to support, otherwise users will see a white screen while your app loads.
Step 4: Configure your manifest.json file
Create React App makes a manifest.json file in your public directory, but if you don’t have one yet create it and make sure it’s referenced in index.html (lines 19–20 above).
Spice it up with Firebase and localStorage
With a service worker, your app loads without a network connection, however it won’t have much functionality.
Enter Firebase. Firebase’s brand new Cloud Firestore improves upon their Realtime Database with several enhancements but most notably it will continuously attempt to sync data while offline.
To make sure users also *start* with data when they launch your PWA without a connection, use localStorage. Our sample React app combines these two methods to let you access tasks you’ve already created and add new ones regardless of connection status.
👉 See our sample React app to use Firebase with offline support 👈
Bonus: Design considerations
Much like responsive design, PWAs offer unique design options. Should something be styled differently when viewed as an installed PWA and when viewed on the same device but in a browser?
Here are handy media queries for targeting installed PWAs:
Similarly, to see how users are viewing your PWAs in JavaScript:
