Table of contents
Highly efficient, simple to develop, when it was released, React had amazed frontend developers. Not long after, the release of PWA created the same reaction. The new web app is taking over the world thanks to its unrivaled functionality for offline working, push notifications, native app-like UI/UX & local caching.
In this article, I would like to show you how to create PWA with React to build a great application.
First, let’s take a look at React JS, PWA & how they can work with each other.
What is React JS?
React JS is the most favored JavaScript library to create user interface (UI). Introduced in May 2013, it quickly gained popularity among frontend developers for its ease of use & powerful functionality.
React JS is supported by a community of big developers, which updates for better user experience are frequently released.
Also, by using a new web rendering method, React can achieve an amazing speed.
React JS’s strength:
- High efficiency: Virtual DOM & server-side rendering enable it to run complicated applications at a greater speed.
- Fast development: React’s components are independent & reusable, thus, developers from the same team can work simultaneously.
- Flexibility: React is suitable for various projects, from simple to complex ones.
- Support: It is backed by a strong community of big developers.
- Easy to maintain: For its modularity structure, React is easier to maintain than other frontend frameworks, which greatly helps save time & budget for businesses.
- Highly compatible: with other frameworks & libraries.
What is PWA?
PWA (Progressive Web App) technology brings web & mobile development to the next level. It is designed to create the best user experience in both mobile apps & websites.
The technology allows users to open an app – which is similar to a native app – right from their web browsers. Moreover, they can also install the web app, use almost all native app functionalities & use it offline.
PWA is invented to convert a website into an app that is installable on mobiles, tablets, laptops & PCs.
PWA’s strengths:
- Speed: PWA-powered website is faster than a normal website. Since all web pages will be cached, they take less to load when users revisit the website.
- Faster to download: It is faster to install a PWA than a native app
- Highly compatible: PWA works with almost all operating systems & browsers
- Offline working mode: Since data is pre-cached, users can access the website content with or without internet connection.
- SEO friendly: PWA can help websites to achieve a high Google Core Web Vitals score, thus, increase traffic & customer retention rate.
Some popular PWA examples include Twitter, Pinterest, The Weather Channel & Alibaba.
Therefore, PWA & React are two great tools to develop your websites.
See more:
PWA React examples:
Our Magento PWA is built with React library. You can check our demo PWA or our clients’ website to see how a website with PWA React will look like:
Tips: Check how it works on mobile browsers.
How to build PWA with React in 5 simple steps:
STEP 1: Create a PWA React project
First, you need to create your project. This step can be skipped if you are familiar with using React.
You will need to use Node.js for any development process using Angular, React or Vue, especially when you want to use their libraries & code packages.
Node Package Manager (or npm) is a useful tool to install/uninstall code packages. Also, it allows you to start creating a React application by using webpack & more.
With npm, you can base on a PWA code package to start writing codes right away.
Command:
npx create-react-app react-pwa --template cra-template-pwa
Project created successfully
Here are the files in the react-pwa folder:
STEP 2: Understand Manifest.json
The manifest.json file controls how your application appears to users & its interface.
It is included in the public/index. html file:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
STEP 4: Build application
Run command:
Npm run build
Application created successfully.
STEP 5: Check your installation
To check if your application is installed successfully, we need a browser.
Run command:
npm i http-server -DYou will find http-server in your package.json file:
STEP 6: Turn your app into PWA
Finally, to turn your app into PWA, you need to change your service worker status.
- In index.js file >> serviceWokerRegistration, change unregister to register.
- In terminal, run command:
npm run build && npm run start-sw
You will see service-worker.js in the tab Devtools> Application> Service Worker:
Tips: Navigate to Cache Storage to see which files are stored in the cache memory
Tell us if you’ve made it
PWA & React are two top web application technologies. React makes PWA development easier, in return, PWA makes React more effective & powerful. An app using both technologies will be much simpler to develop while being more powerful & speedy.
We hope this article has helped you create your own PWA with React successfully. Tell us if you have built your own React PWA website already.
Feel free to leave any comments below if you have some problems while creating PWA with React library.
