Build a PWA with React.js
What is a Progressive Web App (PWA)?
So, what is a PWA? On the internet, you can find many definitions for PWAs, but to be considered a Progressive Web App, your app must be (as defined by Google):
- Reliable – Load instantly and never show the “downasaur”, even in uncertain network conditions.
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – Feel like a natural app on the device, with an immersive user experience.
In a nutshell, PWAs are websites that use recent web standards to allow for installation on a user’s computer or device, and deliver an app-like experience to those users. It works offline when you don’t have an internet connection, using data cached during your last interactions with the app.
A great thing about PWAs is that they don’t need much setup themselves. The requirements are quite simple. Your app has to:
- be cross-browser
- be responsive
- work offline
- have a web manifest
- have a secure connection (HTTPS)
- have a registered service worker
You can check all these requirements in developer tools under “Audits” tab. Just select “Progressive Web App” and press “run audits” and chrome will automatically check all these requirements for you.
What is React.js?
ReactJS is an open-source JavaScript library which is used for building user interfaces specifically for single page applications. It is widely used on the internet and maintained by Facebook
How to create a React.js Progressive Web App
I recommend using create-react-app, which is an officially supported way of creating React apps. It offers a modern setup with no configuration needed.
You can create an app by running npx create-react-app my-app
After app creation, you can use React the same way you’d use it normally. You don’t need to install any additional dependencies or libraries.
You don’t even have to create your own service worker – create-react-app provides you with their boilerplate one, although it is unregistered. I’d suggest to keep it that way until you’re finished with your app and want to test it as a PWA, since sometimes, it makes debugging harder.
Make the app Progressive
For simplicity purposes, I’ve copied the React part of this showcase project from this repo. You can find the game and add it to your home screen here.
Once you’re done coding your app and want to turrn it to a PWA, you register your service worker in index.js and update public/manifest.json
Once you deploy to a safe web server (PWA won’t work without https or on localhost), provided you did everything correctly, you should be able to install the app to your home screen or desktop. (It’s next to the star on the right side of the search bar if you’re on chrome)
If it’s missing, you did something wrong. Go to developer tools > audits and run the PWA audit once again.
A2HS
A2HS (Add to home screen) is a part of the PWA philosophy – it’s a feature available in modern browsers that allows users to add a shortcut to their web app so they can access it with a single tap, giving web apps the same user experience advantages as native apps.
Manifest
The manifest is a simple json with a set of rules that tells yout browser how your app should behave when “installed” on the user’s mobile or desktop. Having a manifest is required.
This is how my manifest.json looks like:
To read more about manifests, see https://developers.google.com/web/fundamentals/web-app-manifest
Caching the files with Service Worker
create-react-app’s service worker caches the files for you automatically. However, if you want to create your own one, you need to implement caching in a way that fits your needs the best.
Here are some common caching strategies:
- Cache Only – This is useful for serving assets pre-cached during the installation of a service worker.
- Network Only – This is useful if your data has to always be up to date.
- Cache First – This is useful for caching assets on the go and repetitive requests are immediately returned from the cache. (This is the strategy used by the create-react-app’s service worker)
- Network First – This strategy is useful for resources that always need to be fresh. The difference between Network first and Network Only is that when Network First request
is successful, the resource gets cached.
Pros and Cons of Progressive Web Apps
Pros
- Progressive enhancement: makes any web app experience faster and more reliable but doesn’t break functionality for those that don’t have support
- Single codebase for all platforms – cheaper to build and maintain
- All clients are automatically on the latest version
- No up front installation required to use the app
- Easy to find and share
Cons
- Still a new technology – all browsers don’t support it fully yet
- More limited hardware access
- Limited performance for computation heavy operations
Progressive Web Apps vs Native Apps
Which are better, Progressive Web Apps, or native apps? Well, it depends on what you want your app to be.
PWAs are more convenient – work on every platform and you don’t have to pass requirements for publishing them to stores, but they’re not as performant and secure as native apps. Native apps can also interact more with your phone.
Whether you choose PWAs or native apps depends largely on your use case. If you want a simple app or you have time and budget constraints, you should choose a Progressive Web App. If you want a more secure option that can utilize smartphone features, choose a native app.
Summary
Progressive Web Apps are Apps that run on any browser or device, online and offline and can be installed on any device except for iOS devices. If you use create-react-app, you can turn your app into a Progressive Web App in just a few steps. Register the service worker in the src/index.js, update your public/manifest.json and deploy it to a safe web server.
You can try it for yourself at https://gempuzzle.koala42.com. After your first visit of the App, it will always load even without internet connection. You can also add it to your home screen for easy access. Try it for yourself!
