Building a Progressive Web App in React

May 04, 2018 0 Comments

Building a Progressive Web App in React



PWA task app Trackybara

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!

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.

Firebase provides free SSL certificates and freemium hosting. Another great choice is Netlify.

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.

Your index.html and manifest.json let you customize your app icon and splash screen for any device.

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.

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).

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.

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:

Tag cloud