How to build a Progressive Web Application (PWA) 

In 2007, when he proposed Steve Jobs' idea as a model for iPhone web applications to applications. At the time, this technology was not ready yet for the society involved in large-scale web applications. But since 2015, tech giants like Google and Microsoft (or simply PWAs) have been preparing technology platforms for innovative web applications. And now PWA is becoming a major tech company with huge and small bloat. Twitter, Starbucks, Google and the progressive web apps used by Aliexpress to increase its online presence.

At Mobirevo, we help our clients grow their business by building PWAs that they have trusted to our clients in 2015, therefore, we have created a detailed tutorial on how to build PWAs with React. You will also find the most famous examples of innovative web applications.

 

What are Progressive Web Apps?

PWAs are web applications that combine the advantages of embedded web applications. It provides features built into a hardware platform that is cross-platform to build quickly, easily and inexpensively while maintaining a better application. PWA supports features that aren’t available in regular websites, some of which includes offline operations, push notifications, access to geolocation, camera, microphone etc. You can even run a PWA outside a browser by using a native app shell that launches at startup.

PWA has a huge ecosystem of web tools and frameworks that Android or iOS developers can only dream about, and this isn’t the only reason developers love PWAs. Progressive web applications are also much easier to use and maintain. They build quickly and offer one version of the applications that needs support. Wondering how to install a progressive web application on your device? It's quite simple:

1. For smartphone users: Find the ‘Add to Home Screen” button in Notifications on the website or browser settings, find the More button Home.
2. Desktop users: You can go to the address bar and find the install button on the right.

 

Basics of PWA Development

We have briefly discussed PWAs, now is the time to dig deeper and find out what makes PWAs so powerful. Here are web technologies are drive progressive web applications:

1. service workers
2. web manifest
3. Application shell
4. HTTPS

 

What is a service worker?

Service workers provide the technical backbone of PWA. Service workers are pieces of code that the browser runs in the background to allow your web application to run offline. It acts as a bridge between your browser and the network by intercepting and handling network requests. Service workers allow PWA to store and use cache files to provide a smooth user experience. This enables web applications to load dynamically as users navigate the application, reducing data traffic to a bare minimum. This is very similar to the experience provided by native apps.

 

What is a Web Application Manifest?

This is a JSON file that defines the interface of a progressive web application and determines how PWAs can be downloaded and presented to users just like native applications from the app store. Web app manifests typically include the app’s name, style, description, and list of required resources. Unlike regular web applications that can only be saved as bookmarks, PWAs can be installed on the home screen of the device. 

At the time of writing, the browsers that currently support web app manifests include Opera, Firefox, UC browser and Samsung internet. Safari mobile browser offers partial support while Chrome browser offers support on your desktop. 

 

HTTPS

HTTPS or secure connection. Progressive web applications are delivered over the same secure network using HTTPS. In addition to the safety advantages, it helps to ensure that your web application is a reliable website, which is important if you want to integrate your trading PWA. The importance of the safety context is reinforced by the fact that we can only use certain features if we have a secure connection via HTTPS.

 

Advantages of using React to build Progressive Web Applications

React is an open-source JavaScript library created by Jordan Walke from Facebook in 2013, originally designed for building easy, fast and simple user interfaces. The library is now managed by the Facebook team is implemented in Facebook and Instagram applications. The response from the developer community made React a frontrunner when the javascript package exceeds 8,227,335 downloads per week. 

React helps you develop that large, scalable web applications that support hot reloading. Meaning that the application keeps running while you edit the runtime. This feature is especially useful for changing the functionality of the user interface. Another popular feature for building user interfaces with React is the code reusability offered by the ‘Learn once, write anywhere’ principle. In the meantime, let’s discuss the main advantages of using React for progressive web applications development.

• Recomended Reading: How to Choose iOS App Development Services in Lagos, Nigeria.

  High-powered

React is best used in building fast, responsive, and scalable web applications while avoiding performance issues. JavaScript apps experience performance issues often associated with the Document Object Model (DOM) manipulation. DOM is a structural representation of web pages that allows the programming language to interact with them.

React uses virtual DOM to change the user interface without redrawing the entire page or causing rendering problems. With React, you can change the page in the virtual memory instead of using bootstrapping libraries like JQuery. The fast rendering speed of React also reduces the load time.

 

• Easy to Learn

React is not as complicated to learn when compared to Angular or Ember JS framework. If you're wondering how to build a progressive web application with React, don't think of it as rocket science. React support JSX, which is a syntax extension that allows you to write HTML-like syntax in your JavaScript code. It's much easier to use although it's not compulsory to use JSX react. A simple React PWAs can be built with JavaScript, HTML and CSS.

 

• Well-equipped

React has a wide range of developer tools, templates and libraries that makes it easy to debug, test and design web applications. It offers many options so that you can choose which best suits a specific task. The most prominent examples include React Developer Tools, Semantic UI React, Ant Design, Create React by Facebook.

 

• Want to build an Android Mobile Application ?

  Our experienced team of android developers will help you stand out with a efficient and fast mobile app for your business.

  Get a Quote

  

  SEO friendly

One of the most common SEO-related issues is a failure in Web Rendering Service when running heavy web applications. This causes some parts of your website not to appear in Google search results. The contents on React powered web pages can be indexed correctly with the use of a virtual DOM.

 

• Community-backed

At the time of writing, React was ranked as the fifth frequently starred open-source repository on GitHub. React has a strong and responsible community of developers with  a clear slogan which states; "Help us push the web forward and get involved." On StackOverflow, the largest community of programmers, #reactjs has been tagged with over 248,000 questions.

 

Examples of PWA built with React

To illustrate, let's take a good look at Starbucks and Tinder which are great PWAs powered by React. These companies understand how to build progressive web apps with React that is powerful and responsive. With that in mind, these apps will serve as a clear demonstration of what you can achieve with React.

 

Starbucks

As a well-known international chain cafe, Starbucks wanted a progressive web application for customers to order coffee online easily. The company already had a mobile app with the same features, but with the launch of a PWA, the size of the app was dropped by 98%. As demonstrated in the Starbucks case study, this was a determinant for rural areas due to less reliable network connections.

PWA technology provides amazing features that are also accessible offline like a user-friendly menu, order customization and cart usage. Starbucks PWA experience is quite similar to its native application which is why many users have switched from the mobile app to the web. PWA started powerful and easy to use allowing Starbucks to successfully expand its business. The company has doubled its daily active users and has increased the number of orders from other desktops to nearly the level of orders from smartphones.

Additionally, the development of progressive web applications enabled Starbucks to improve its indexability. Building a progressive web app with React improved the SEO and helped mobile users find the Starbucks app on the search results page when searching for "coffee near me."

 

Tinder

In 2017, Tinder released a progressive web application called Tinder Online as part of the company's expansion to countries with poor mobile internet connections. Tinder Online allows users to navigate the application quickly and easily without waiting for a match. The progressive web application built with React and Redux allowed Tinder to achieve the following results:

1. The loading time was reduced by 60%.
2. PWA is 90% lighter than the native application.
3. Online Tinder allows more users to swipe, send messages and edit profiles.
4. Longer sessions compared to built-in applications.

 

How to Create a PWA with React?

We have already explored the benefits of React JavaScript library and have seen great React PWA examples. Now it's time to discuss the most interesting part, the practicals. This section will serve as a PWA tutorial by shedding light on how to build React progressive web applications.

If you want to make an existing web app faster, you might be wondering how to build PWAs from an existing React app. In this case, you should start with Step 2 of this PWA tutorial as it focuses on how to build a React progressive web application using React. 

 

Step 1: Set up a simple React app

Using the Create React App (or CRA), a very convenient environment for those who do not yet know how to build a progressive web app with React. It allows you to use the latest Javascript functionalities with built-in Babel and webpack. So you don't need to worry about bundling and transpiring to ship your application to the browser. You can install and bootstrap your application with CRA using the following command you need to launch your terminal:

~npx create-react-app cra-pwa --template cra-template-pwa

The npx is a command-line tool that runs the npm packages. The command create-react-app cra-pwa builds a bare-bones React app in the cra-pwa directory named ‘cra-pwa’. The argument --template cra-template-pwa is added to create an app with service worker as CRA 4. It might not provide built-in service workers later.

This simple command can be used to change to a directory:

~cd cra-pwa

 and to run your app in the development mode, simply type

~npm start

 You can also open http://localhost:3000 to view it on your browser.

 

Step 2: Register a Service Worker

CRA gives you all the tools to help you can build a PWA with react. But how can you make your React progressive web app work offline? Register it - you need to configure the service worker file that was created automatically. The directory file of the new project created contains index.js. and find the following code:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

You can that the serviceWorker hasn’t been registered, you have to change the unregister() call to register(). Thus, the question of how to build a React PWA with a service worker has been answered. 

 

Step 3: Configure the Web Application Manifest

The next step is to set up the web application manifesto for your progressive web application in a manifest.json file in the public directory. You need to edit the metadata responsible for the interface of your application. When you’re done, the manifest file looks like this:

{
 "short_name": "cra-pwa",
 "name": "cra-pwa",
 "icons": [
   {
       "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
   },
   {
       "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
   }
 ],
 "start_url": "/",
 "theme_color": "#F4BD42",
 "background_color": "#2B2929",
 "display": "standalone",
 "scope": "/"
}

Let's see what these manifest attributes mean.

• short_name: The name of your application used within the icon, and on the users’ home screens or launchers.
• name: The app name is displayed on app stores or home pages of browsers and in the message browser. If the name attribute is not defined, short_name will be displayed.
• icons: These are displayed on the user’s home screen, task switchers,  launcher, splash screens, etc.
• start_url: This is the URL of the app page that users see on startup.
• display: This property determines the browser view. The app can launch on a new window, hide the address bar, go full screen, and so on. Here are some attributes you can use to do this:
• fullscreen: To open applications without the browser UI occupying the user’s entire display.
• standalone: ​​This option allows you to run the app in a new window just like a native application. It also hides the browser's UI elements like the address bar.
• minimal-UI: This option is very similar to the standalone, but has a small subset of the browser’s interface like the back button and reload.
• browser: This option allows you to enjoy the usual browser experience.
• theme_color: The toolbar’s colour in your application.
• background_colour: A colour splash screen that appears when the user clicks on the app icon on their home screen.

 

A splash screen is a graphic element that appears when you start an application. It’s a window that contains the name and logo of your application in whatever background colour that you choose. The splash screen gets generated by Chrome browser based on the properties that emerged from the web:

1. name;
2. background colour;
3. icon.

Chrome will automatically choose an icon that suits your device resolution. In most cases, the icon with a 192px and 512px resolution is enough. If you want to adapt your logo to as many devices as possible, you can use additional icons. Finally, to create a web manifest file work, you need to add it to your web application page like this:

<link rel="manifest" href="/manifest.json">

Check whether the configuration settings are correct on the Manifest panel manifest under the Application menu in Chrome DevTools. So we have discussed how to create progressive web applications using React. For more information on reconfiguring your PWA, check out the Web App Manifest guide on the World Wide Web Consortium. There, you can learn more about how to change the appearance and functionality of a progressive web application. There are also detailed instructions on how to build a PWA with React.

 

Step 4: Test your PWA

We now know how to create a React progressive web application, the next step is to test the app. If you need to run the program in production mode, simply type the command:

~npm run build

~npx server build

You can access your web app with Lighthouse, it's a tool located in the namely tab of Chrome DevTools. Google also has a checklist on progressive web applications which you can take advantage of. Here’s how to check your application's performance, accessibility, and PWA compliance.

• With Chrome DevTools, right-click and select the ‘Inspect’ option from the menu on the page you need to inspect. Alternatively, you can use the keyboard shortcut: Command + Option (for Mac OS) + C or Control + Shift + C (for Windows, Linux, Chrome OS).

 

• Go to the Lighthouse tab and click on ‘Generate Report’. Ensure that you tick the ‘Progressive Web App’ box when generating the reports etc. Once the review is completed, you will get a score along with a list of criteria that affect the performance of your application in different situations. These suggestions will give you detailed information on how to build a PWA with React.

 

Advanced Application of PWA

Now that we've learned how to create a simple React PWA with a service worker, it's time to learn some advanced techniques that will improve your progressive web application.

 

Adding shortcuts to React PWA

This is a new feature that brings the native and web apps even closer as they allow users to directly access certain actions or pages by long-pressing the app logo.

 

Web Share API integration

Once you understand how to build a PWA with React, you may be wondering about the native features that the app can adopt. This is where Web Share API comes in as it offers native sharing capabilities. This implies that your progressive web application will send and receive text, links, and files to other apps installed on the device like natives i.e the PWA can become a share target.

• Exchange text and links

To implement text and link sharing, you need to write a JS file that is responsible for the advanced sharing. 

 

• File sharing

To implement file-sharing you need to check if the provided file is available using the navigator.canShare() method. Then, you need to include various files in the call to navigator.share().

 

Deploying Your PWAs

Now that we have a basic PWA, let's deploy it for the outside world to enjoy. We will use Netlify for this. The source code for the PWA can be found here on GitHub. Simply log in to Netlify, click the 'Create New Website' option and select GitHub as the provider. You must authorize Netlify to access GitHub, to do this, click the 'Configure Netlify on Github' button to allow Netlify to access your repository.

Then you can select the repository in Netlify. Any of the default settings provided by Netlify should work for you, then hit the 'Deploy site' button. In a few minutes, you will discover that Netlify has deployed your PWA. If you go to the URL provided by Netlify, you can see the PWA used in the documentation. You also have the option to set your domain name.

 

Conclusion

I hope you found this tutorial on how to build PWAs with React to be useful as a beginner or web development enthusiast. In this article, we have covered many interesting key points on PWAs and how to build a React progressive web application with React. We also discussed well-known React PWA examples and explored some of their most innovative features. Many startups and renowned companies benefit from PWAs as they are considered to be resource-efficient.

If done right, you will provide your customers with a smooth user experience and enjoy optimum conversions and engagement. Now is the perfect time to leverage this technology and if you need help building a PWA for your business, contact us to discuss your needs with our experts. Our team has vast experience in PWA development to help you grow your business with this innovative technology.

Everything is much simpler when you partner with a trusted company offering custom software development services. Mobirevo specializes in custom progressive web development, and we know how to build efficient PWA websites like Starbucks and Tinder. Contact us to handle a unique web solution tailored to satisfy all your business requirements.

At Mobirevo, we have successfully developed and deployed robust progressive web apps for several clients across the globe. We also offer consultations and share our expertise in developing high-quality software that meets your business needs. Feel free to contact us to get a free quote for your PWA development services. You can check out our case study page to see our client's portfolio.

Want to receive more content like this? You can signup for our newsletter, which features curated opinions, and tools for building remarkable digital assets. Go ahead and subscribe now! Also, you can check other tech articles by our team on our blog.