What are progressive web apps?
A progressive web app (PWA) is an innovative web-based application that surpasses the limitations of traditional websites, emulating the behavior of
Weather PWAs are a perfect example of how PWAs can offer users a fast, reliable, and engaging weather forecasting experience, allowing them to stay informed about current and future weather conditions, all within a single web-based application.
Characteristics:
Some of the key characteristics of progressive web apps (PWAs) are as follows:
- Cross-platform compatibility: PWAs can run on multiple platforms and devices— including desktops, smartphones, and tablets—without the need for platform-specific development.
- Responsive design: PWAs adapt and provide an optimal user experience across different screen sizes and orientations.
- Offline functionality: PWAs can work offline or in low-connectivity situations, allowing users to access content even without an internet connection.
- App-like experience: PWAs offer an immersive and app-like experience with features such as home screen installation, full-screen mode, and access to device capabilities.
- Fast loading and performance: PWAs are designed to load quickly and deliver smooth performance, providing a seamless user experience.
- Discoverability: PWAs can be discovered through search engines or URLs, eliminating the need for app store approvals or installations.
- Easy updates and maintenance: PWAs can be easily updated on the web, ensuring that users always have the latest version without requiring manual updates or app store submissions.
Fundamental requirements:
An app is considered a progressive web app (PWA) if it includes the following:
-
HTTPS or non-HTTPS localhost: PWAs should be served over a secure HTTPS connection or be accessible through non-HTTPS localhost during development.
-
A
manifest.jsonfile for interface definition: PWAs require amanifest.jsonfile that defines their interface, including metadata and display preferences. -
Service worker for background functionality: PWAs employ a service worker, a background script that enables offline functionality, caching, and push notifications.
-
Responsive and app-like experience: PWAs should provide a responsive design and a user experience similar to native apps.
-
Offline capability through core asset caching: Well-designed PWAs can run offline by caching essential assets like HTML, CSS, JavaScript, and logos.
Build react progressive web app (PWA)
To create a basic progressive web app using React, follow these steps:
- Ensure that you have React and Create React App installed. If not, install them by running the following command:
npm install -g create-react-app
- Create a new React app by executing the following commands:
npx create-react-app my-pwa-app
cd my-pwa-app
- Open the
src/index.jsfile and modify it as follows:
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import * as serviceWorkerRegistration from './serviceWorkerRegistration';import App from './App';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));serviceWorkerRegistration.register();
- Create a new file
src/serviceWorkerRegistration.jswith the following content:
// Registering the service workerexport function register() {if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('Service worker registered:', registration);}).catch(error => {console.log('Service worker registration failed:', error);});});}}
- Create a new file
src/App.jswith the following content:
import React from 'react';function App() {return (<div className="App"><h1>Welcome to My Progressive Web App</h1><p>Enjoy the app-like experience!</p></div>);}export default App;
- Build your progressive web app by running the following command:
npm run build
- Install the
servepackage globally by executing the command:
npm install -g serve
- Serve your app using the following command:
serve -s build
These steps will help you create and run a basic progressive web app using React.
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Conclusion
Progressive web apps represent a big advancement in the application development industry. Both mobile applications and websites play an important role in improving the consumer experience. PWAs are a step further in this direction. They blend the greatest features of both the mobile app and the website.
Free Resources
