Unlock the Power of Progressive Web Apps
Imagine building an app that seamlessly serves all devices and form factors, using web technologies. This app can be accessed over the web, and also surfaces on the home screen of Android and iOS devices. It works offline, displays a splash screen when launched, and sends notifications – all while saving your business money.
The Cost-Effective Alternative
Building separate apps for web, Android, and iOS can lead to a multiplication of cost and complexity. It often results in dividing your team and losing focus. Progressive Web Apps (PWAs) offer a compelling alternative, not just from a developer’s standpoint, but also from a resourcing perspective.
The Catch: Complexity
While PWAs are more complicated than normal web apps, there are easy onramps to building one. In this article, we’ll highlight one of these: how to create a PWA using React and TypeScript.
From Zero to Hero: Building a PWA with Create React App
We’ll use Create React App to build our PWA. This excellent project has matured to provide satisfactory support for making PWAs. We’ll create a new PWA with TypeScript support using Create React App, and then customize it to fit our needs.
From Web App to PWA using Workbox
Going from a web app to a PWA is incredibly simple – it’s just a matter of opting in to offline behavior. We’ll use Workbox, a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs.
Customizing Your PWA with React
We’ll customize our PWA by giving it a name, icon, and splash screen. We’ll also explore how to control how our app behaves using the web app manifest.
Creating Multiple URLs in Your PWA
We’ll break up our application into multiple pages using react-router, the de facto routing solution for React.
Code-Splitting Your PWA
We’ll split our code into smaller files to improve loading times for our PWA. Create React App supports code splitting by default, and we’ll apply it to our app.
Deploying Your PWA
Finally, we’ll deploy our PWA using Netlify, and see how it holds up according to the professionals using the Google Chrome DevTools Audit.
The Future of Frontend Development
Converting your new or existing React applications to PWAs has numerous benefits, especially considering that the future of frontend development is anchored on web optimization. This approach will help you build a performant web application from the start.
Take Your App to the Next Level
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Try it for free and get set up with LogRocket’s modern React error tracking in minutes.