Steve Jobs suggested the idea of web applications in 2007. PWA web applications were created to be the model for iPhone Apps. In 2015, tech giants like Google and Microsoft prepared the tech ground for progressive web apps (or simply – PWAs). And now, PWA has become an essential technology for giant corporations and small startups. Twitter, Starbucks, Google, and AliExpress utilize progressive web apps to expand their online presence.
Before we cruise to any other guide, let's peek at the react PWA. React.js PWA tutorial that helps in the development of basics and advanced PWA react applications. Service workers are scripts that are executed by the browser. They do not have any immediate association with the DOM. Add service workers to react app as they provide out-of-the-box network-related features and are the foundation of building an offline experience. They encourage features such as push notifications and background sync. Click on the link Advanced React for more details.
As web development expands and matures, software developers must continue to learn and teach themselves new technologies. One excellent framework to add to your aptitude stack this year is advanced progressive web app react.js .
What is a Progressive Web App (PWA) and How Does It Work?
Let’s look at PWA development basics and definitions.
PWA Definition
A PWA is a web application that apprehends the advantages of native and web applications. It delivers hardware features enveloped in the body of a cross-platform app that is quicker, more comfortable, and more inexpensive to create and support than a native app.
Below are examples that have used PWA to create cross-platform apps.
PWA has been used by tech giants like Twitter, Alibaba, Tinder, Uber, Instagram, and Aliexpress. These companies had adopted PWA, which had revealed its beauty to the world.
1. Tinder
Tinder was created as a PWA version — Tinder Online — in 2017. It swipes and can send messages more on the web than native.
2. Instagram
Facebook-owned social media’s PWA is one of the most fascinating examples because developers reprogramed it on the web. According to The New Stack, Instagram is not a PWA but a native app built widely as Blocks technology.
3. Uber
For Uber, PWA cracked the issue of the low Internet connectivity and devices that may not be consistent or compatible with the Uber app. A light version of the service available for everyone makes life more comfortable for both sides: a hungry customer and a hard-working delivery rider.
Why Build a PWA?
Progressive web apps are calmly taking over the world of web applications, and companies are adopting them with tremendous success. Converting a modern web application into a PWA can fetch many advantages and help users interact more with your application.
Let's glance at the features of progressive web apps and also view why PWA makes web apps so robust, performant, and reliable, giving the feel to the web app like a native application?
1. Performance
Progressive web apps are loaded from a secure origin connection, i.e., using HTTPS. It helps reduce the app's load time and increases the app's loading time.
To use a native app, the user has to download and install it on the device. This would require memory from the user's device, and the user would not want to download a simple application that will be used only twice a month.
Instead of 30 native apps on the phone, 30 progressive web apps are better, freeing up memory from all the devices used. Progressive web apps can be an amicable solution for companies that want to use their web app on devices by just installing it instead of creating a unique native app.
2. Offline
Web apps are developed and designed from scratch to work online. The internet connection might drop or get slow for a few minutes, but once it gets back, every user wants their action to be registered, no matter what. The issue with web apps is that getting them to work offline is not an easy task.
Progressive web apps can work offline because of service workers. Service workers deliver offline capabilities to web apps and are responsible for causing the progressive web apps to work offline efficiently and quickly.
Service workers cache new content from the progressive web app and help to synchronize it as a local modification to a remote server, causing the progressive web app to feel refreshed and up-to-date to the user.
3. Fast installation
One of the main pain points regarding native apps is that they must be downloaded from the store, like the App Store or Google Play store. The user will be mandated to install the app, spend time downloading, creating an account, and arranging everything before navigating to the app.
Progressive web apps are not required to be downloaded from a store; the user can save the app on a device with a click of a button. They can run as a standalone window instead of a browser, making them launchable from the user's home screen.
The ability to have the app saved on their device like a native app makes a lot of difference. It will save memory on the device and only load content when the user opens the app.
What Framework is Best for Progressive Web Application?
Pivoting on the key PWA capabilities, select one of the several JavaScript frameworks.
Let’s compare the most popular frameworks like React.js and Angular.js.
1. React.js
React.js has been a popular JavaScript framework for almost ten years.
It is unique because of the following reasons.
- Programmers can efficiently use the identical code for other apps;
- Next.js and Gatsby.js permit more functionality, like server-side and client-side rendered pages, routing, etc.
- Rendering is faster.
2. Angular.js
Angular.js is a more youthful technology than React.js (the version supporting PWA launched seven years ago). The framework is created by Google and uses HTML, mainly TypeScript.
Following are the benefits of Angular.js:
- JSON helps you to speed up the process: there is no requirement to write PWA from scratch.
- Angular.js is one of the many universal frameworks: It is rich and requires advanced coding experience.
- The framework is created by Google and has a substantially vast developing community.
Choosing ‘winner’ for the PWA framework is not the best approach as each framework is suitable for different purposes and developers’ preferences. It’s worth mentioning that there are other probable options like Vue.js and Svelte.js.
Whether you are just beginning or looking to develop web apps, here is a best web development course that would surely help candidates to procure jobs in the Market. You can also check the article on Vue vs React to check which JavaScript framework is best.
The PWA Components
1. Service Workers
Service workers are reasonably independent and influential elements of PWA. They operate as a representative between the browser and the network. A service worker is considered a blueprint for an architectural project. A detailed foundation will be essential for deploying the project.
Service workers handle PWA in the background, overseeing all the elements that don’t demand user interaction.
2. Web Manifests
Web manifest is a JSON file that demarcates how PWA should look; application name, primary colors, icons, etc., need to be set. To comprehend what and how to configure, generate and manifest the App’s Details section below.
Below are several react PWA examples of the keys for the progressive web apps react manifests:
- name
- icons
- shortcuts
- background_color
- categories
3. Application shell
The application shell assures that the content loads fast and uses less data as possible. It holds the PWA basics, like the interface, even when there is no connection. All around, the app shell is the interface’s blueprint.
PWA Features
Following are the Key features of PWAs that make them distinct from the conventional web and native apps:
1. Full responsiveness and compatibility
Apps are created within the progressive enhancement principles. It is the web design process for providing the basic functionality and content to everyone regardless of browsers they use or connection quality and providing more refined page versions to users whose latest browsers can even support them.
PWAs are integrated to work with all browsers. They are compatible with any device, regardless of screen size and specifications, i.e., Tablet, Desktop, and mobile users will view the same experience.
2. Connectivity independence
Progressive web applications can operate both offline and on low networks.
3. App-like interface
These apps imitate the navigation and interactions of native apps.
4. Push notifications
If used as an excellent messaging strategy, push notifications can keep customers interested and inspire users to open and use an app created in PWA more.
5. Self-updates
Apps created in PWA can update themselves automatically, staying fresh.
6. Safety
PWA apps function through HTTPS, so unauthorized users would not be able to access the content.
7. Installation and easy Discover
Search engines categorize PWAs as applications. Instead, these apps can be disseminated through URLs, so they're effortlessly found. The installation is straightforward and entails visiting a site and adding it to a device's home screen.
How to Create a Progressive Web App with React? [Step-by-Step]
The following section will shed light on how to make a React progressive web application. If existing web applications are more engaging and fast, users might wonder how to create a PWA from an existing React app.
Let us start as below:
Step 1: Set up a simple React app
We will use React App (or CRA) tool, which is a very convenient environment for those who do not know how to create PWAs with React. It permits using the latest JavaScript functionality with built-in Babel and webpack.
With CRA, we can install and bootstrap the application with the following commands that is required to run on the terminal:
➜
~
npx create-react-app cra1-pwa --template cra-template-pwa
npx is a command-line tool for executing npm packages. The command create-react-app cra-pwa creates the App named ‘cra1-pwa’. The argument --template cra-template-PWA is added to make an app with a service worker. Note: CRA 4 or later version does not provide built-in service workers.
Navigate to the directory with the simple command as
➜
~
cd cra-pwa
The initial folder structure would be as below:
To operate the App in the development mode, type the following:
➜
~
npm start
Open http://localhost:3000 to view it in your browser.
Step 2: Register a Service Worker
Create a React progressive web application runnable offline mode; we need to configure the auto-generated service worker file – register it.
The directory of the newly created project contains the file index.js.
Open and find the following code as below:
// If the app works offline and loads faster, you can change
// unregister() t o register() below.
// Learn more about service workers:
serviceWorker.unregister();
The service worker is not registered yet. Change the unregister() call to register().
The question of creating a PWA with a serviceworker using React is resolved.
Step 3: Configure the Web Application Manifest
The next stage will involve setting up the web app manifest for your progressive web app located in the manifest.json file in the public directory. Alter the metadata that is accountable for the appearance of the application.
The manifest file will look as below:
{
"short_name": "cra1-pwa",
"name": "cra1-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": "/"
} Step 4: Test your PWA
The next step now is to test the app.
Run the app in the production mode, and type the following commands:
➜
~
npm run build
➜
~
npx server build
Now you have built your application, and thus, you can test it. Google has formed a checklist on PWA, and we can assess the web app using Lighthouse (A tool located in the tab of Chrome DevTools).
Advanced PWA Usage
Adding shortcuts to React PWA
Adding shortcuts is a new feature that brings the web and native apps closer. They allow users to go directly into a specific action or page by long-pressing the app logo.
Let us check how to implement this feature in React PWA
Add the following code to your web app manifest file:
"shortcuts": [
{
"name": "Case Studies",
"short_name": "Case Studies",
"url": "/case-studies",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
},
{
"name": "Company",
"short_name": "Company",
"url": "/company",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
},
{
"name": "Approach",
"short_name": "Approach",
"url": "/approach",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
},
{
"name": "Careers",
"short_name": "Careers",
"url": "/careers",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
},
{
"name": "Blog",
"short_name": "Blog",
"url": "/blog",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
},
{
"name": "Get a free quote",
"short_name": "Get a free quote",
"url": "/contacts",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
] Adding shortcuts to React PWA
Web Share API integration
Web Share API can grant native sharing capabilities, i.e., web applications can share text, links, and files to other apps on the device just like natives. Web applications receive text, links, and files from other apps installed on the smartphone, i.e., PWA can become share targets.
1. Sharing text and links
To execute sharing text and links, create a JS for advanced sharing.
Add the following code to the new file.
if (navigator.share) {
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({
title: 'Codica',
text: 'Codica',
url
})
.then(() => console.log('Successful sharing the content'))
.catch((error) => console.log('Error sharing', error));
} 2. File sharing
To implement a file sharing test if the navigator can access the files.canShare() method and then call this method.
Consider the code below as an example:
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Codica Team Pictures',
text: 'Photos from March 18 to September 19.',
})
.then(() => console.log('Share was successful of the files.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing of the files.`);
} Take one of the best web development courses, advanced React from KnowledgeHut, and develop your skills in this exciting field.
Looking to level up your coding skills? Dive into an interactive Python course that will have you hooked from the start. Unleash your creativity and problem-solving abilities with this unique learning experience. Join now and discover the power of Python!
Conclusion
Progressive Web Apps appear to be the future of web design, permitting web app developers to build user experiences that have the space of the web and the functionality of native apps. As with any new technology, they come with fundamental design considerations, but their tremendous and ample benefits make them a worthy investment.
For next steps, you can check out the React developer tools here!
