Building Progressive Web Applications with React: an introduction

Back in 2015, thanks to Google, Progressive Web Applications emerged as a game-changing approach to delivering exceptional user experiences.

As a frontend development company, we’ve developed a fair share of PWAs and can attest to their allure, especially in providing a cost-effective solution for businesses looking to expand their mobile presence.

One of the best ways of building PWAs is to use React, a popular JavaScript library known for its flexibility and efficiency. Hop on and explore the fundamental components of a PWA, a step-by-step guide to developing a PWA using React, and an overview of the benefits these apps can bring you.

P.S. Care to check out how to boost innovation in engineering teams? Did you know that embracing failure builds resistance and helps your team innovate even better?

Get developers that understand your business goals

On-time project delivery. Latest coding standards. Data security.

Learn more

What is a Progressive Web App?

A Progressive Web App is a hybrid web application that combines the best features of traditional websites and native mobile apps, such as fast performance and excellent functionality.

Built with modern web technologies, PWAs offer an immersive user experience, similar to native apps, by leveraging capabilities such as offline access, push notifications, and device hardware integration.

PWAs are designed to be responsive and work seamlessly across multiple platforms, providing users with a consistent experience. They can be easily installed on users' home screens, enabling instant access without the installation hassle.

They are also discoverable through search engines, which means they don't need to be downloaded from an app store; you can access them right from your browser, eliminating the need for app store distribution.

The PWA components and their features

There are three core components you need to know about.

Service workers

Service workers are a foundational component of PWAs that operate as a separate layer between the web application and the network. They are JavaScript files that run in the background, independent of the web page, and act as intermediaries, intercepting network requests and allowing offline caching and other advanced features.

Service workers enable PWAs to provide offline functionality by caching essential assets, such as HTML, CSS, JavaScript, and media files, during the initial visit. When a user revisits the PWA, the service worker serves the cached assets, allowing the app to load instantly, even in the absence of a network connection.

Service workers also allow PWAs to handle push notifications, background synchronization, and periodic updates, enhancing the overall user experience.

Web manifests

Web manifests are JSON files that provide essential metadata about a Progressive Web App, defining the app's name, icons, display mode, background color, and other properties. They play a crucial role in enabling the installation and launch of PWAs on users' devices, making them feel and behave more like native apps.

When a PWA meets certain criteria defined in the web manifest, users are prompted to install it on their home screens, creating an app-like experience. The web manifest also allows developers to customize how the PWA appears when launched, such as in fullscreen mode or as a standalone application, without the browser's usual UI elements.

Web manifests provide a standardized way to define the app's visual and behavioral aspects, ensuring consistency across different platforms and devices. They enhance the discoverability of PWAs by enabling search engines to identify and index them as applications, improving their visibility to users.

Application shell

The application shell forms the core user interface of the app. It consists of the static assets, such as HTML, CSS, and JavaScript files, required to render the basic structure and layout of the PWA.

The shell presents the app's navigation, layout, and essential UI elements, providing users with a consistent and familiar interface across different interactions.

The service worker typically caches the application shell during the initial visit, ensuring it can be loaded instantly, even in offline or low-connectivity scenarios. This caching mechanism allows the PWA to provide a reliable and responsive user experience, as the shell can be displayed immediately while dynamic content is fetched in the background.

A step-by-step guide to building a PWA with React

And now, the steps you need to master if you want to create Progressive Web Apps with React.

Kickstarting a PWA project with React

The first step is to set up the development environment:

1. Install the latest stable version of Node.js, a runtime environment that allows you to execute JavaScript outside of a web browser. Consider using a version manager like nvm (Node Version Manager) to easily switch between different Node.js versions and manage dependencies.
2. Create a new project using a reliable scaffolding tool like Create React App to generate a pre-configured and optimized React project structure. It sets up a development server, builds tools, and provides an organized directory layout for your PWA project.

Tip: Take advantage of the command-line interface provided by CRA to customize your project configuration, such as specifying additional features or choosing a different template.

1. Set up a Git version control system. Initialize a new Git repository and commit your initial project setup. Familiarize yourself with Git commands like commit, push, and pull to efficiently manage your project's version history. Consider using GitHub or Bitbucket to easily collaborate and share your code.

Demystifying Manifest.json in a PWA context

The Manifest.json file defines the PWA's identity, appearance, and behavior when installed on a user's device. Here's what to do:

1. Familiarize yourself with the purpose and structure of the manifest.json file. It contains metadata such as the PWA's name, description, icons, theme colors, display modes, etc.
2. Open the manifest.json file and customize its properties to align with your PWA's branding and desired user experience. Specify the app's name, short name, description, background color, and icons in different sizes.

Tip: Utilize tools like the PWA Manifest Generator or online icon generators to simplify the process of creating appropriately sized icons and generating the necessary JSON structure.

1. Integrate the manifest.json (typically placed in the public folder) into your React project. Double-check the file's location and make sure it is included in the build process to be accessible to the PWA when deployed.
2. Verify the file’s correctness using Google Lighthouse, for example.

The building blocks of a PWA: application development

The next step involves understanding the building blocks of application development within the PWA context. Here's an overview of the process:

1. Utilize React's component-based architecture to create responsive and adaptive user interfaces. Implement media queries, flexbox, or CSS Grid to ensure your PWA looks and functions well across various screen sizes and devices. Use Material-UI or Bootstrap to expedite the development process.
2. Implement state management techniques like React's built-in state or more advanced solutions like Redux or MobX to handle data in your PWA. Organize your data flow and implement effective caching mechanisms to optimize performance and reduce unnecessary network requests.

Tip: Use libraries like Axios or the built-in fetch API to handle data fetching and update your UI components efficiently.

1. Optimize your PWA's performance using code splitting, lazy loading, and caching. Bundle and minify your JavaScript and CSS files, optimize image assets and utilize service workers to cache static resources and enable offline functionality.

Tip: Use performance monitoring tools like Lighthouse, WebPageTest, or Chrome DevTools to identify bottlenecks and areas for improvement.

1. Prioritize accessibility in your PWA by adhering to web content accessibility guidelines (WCAG). Use semantic HTML, provide alternative text for images, ensure proper keyboard navigation, and implement ARIA roles and attributes for interactive elements.

Verifying your installation

Verifying your installation ensures that all the necessary dependencies, tools, and configurations are correctly set up. Here’s how you do it:

1. Verify that Node.js and npm are installed correctly on your system. Open a terminal or command prompt and run node -v and npm -v to check the installed versions. Ensure you have the latest stable versions installed.
2. Verify React installation and its related dependencies. Check the version of React in your project by running npm list react in your project directory. If React is not installed, or there is a mismatch in versions, you can reinstall it using npm install react.
3. Validate project dependencies. Run npm install in your project directory to fetch and install the required packages.

Tip: Regularly update your project dependencies to benefit from bug fixes, performance improvements, and new features. Use npm outdated to check for outdated packages and npm update to update them.

1. Run a test build using the build script specified in your package.json file (e.g., npm run build) to generate a production-ready build.

Turn your app into PWA

Turning your app involves enhancing your React application with PWA-specific features, enabling offline functionality, and allowing users to install your app on their devices:

1. Add a service worker, register it in your React app, and configure caching strategies for different assets. Use libraries like Workbox or sw-precache to simplify service worker implementation and caching strategies.
2. Utilize the service worker to cache essential assets and resources, enabling your PWA to function even when the user is offline or experiences low connectivity. Precache static assets, data, and critical UI elements to provide a seamless offline experience.
3. Create or update the manifest.json file to define how your PWA should behave when installed on a user's device. Specify metadata such as the app's name, icons, display mode, and theme colors to enhance the app's appearance and user experience.

Tip: Generate the manifest.json dynamically during the build process to ensure accurate and up-to-date information.

1. Prompt users to install your PWA on their devices by implementing an app install banner. This banner appears when specific conditions are met, such as when the user visits your app multiple times or stays on it for a certain duration.
2. Ensure your PWA functions correctly across different devices, operating systems, and web browsers. Test for compatibility, performance, and responsiveness. Leverage services like BrowserStack or Sauce Labs for cross-browser testing.

Get developers that understand your business goals

On-time project delivery. Latest coding standards. Data security.

Learn more

The benefits of PWAs

PWAs offer several benefits for modern businesses. Here are some of the most notable ones.

Improved performance

PWAs are designed to be highly optimized and lightweight, resulting in faster loading times and smoother user experiences. Caching, data compression, and lazy loading help PWAs minimize the need for repeated network requests, reducing latency and providing a snappy, responsive feel.

Improved discoverability

Unlike native apps that require users to download and install from app stores, PWAs can be easily discovered through search engines, which means attracting more organic traffic and reaching a wider audience without relying solely on app store visibility.

Enhanced user experience

PWAs automatically adjust to fit various screen sizes, ensuring a seamless experience for users whether they are accessing the app on a desktop, mobile device, or tablet. The ability to deliver a consistent user experience contributes to higher user satisfaction, increased time spent on the app, and a higher likelihood of users returning.

Reduced development time

PWAs can significantly reduce development time thanks to a single codebase, cross-platform compatibility, and reusable components with frameworks like React, Angular, or Vue.js. This allows businesses to iterate faster, deliver updates more frequently, and respond quickly to changing market demands.

Increased user engagement

PWAs enable businesses to boost user engagement through push notifications, delivering personalized updates, reminders and offers directly to users' devices. The offline functionality of PWAs also allows users to access and interact with content even without an internet connection, further enhancing user engagement by providing uninterrupted access to the app's features and content.

Leverage the power of PWAs for your business

In conclusion, Progressive Web Apps are a testament to the ingenuity of modern businesses. Combining improved discoverability, enhanced user experiences, and offline functionality opens up new avenues for businesses to reach their target audience and deliver exceptional value.

Forget the old-fashioned limitations. PWAs open up a whole new world of possibilities for you to captivate your audience and make your competitors go, "Whoa, how'd they do that?!" So, how about you embrace this technology as well?