So before we begin with this title let us first understand the difference between PWAs and Native apps (what we download form play store, apple store etc).
Difference between PWA Vs Native App
I am mentioning the differences first so that you can choose the right path based on your project requirement as some prefer native apps over PWA and some does not.
While PWAs aim to replicate many of the features and experiences of native apps, they are not exactly the same. Here are some key differences:
Installation: Native apps are installed via app stores (like the Apple App Store or Google Play), whereas PWAs can be installed directly from the web browser without needing an app store.
Access to Device Features: Native apps have deeper access to device hardware and operating system features, such as the camera, Bluetooth, and push notifications. While PWAs can access many device features through APIs, there are still some limitations compared to native apps.
Performance: Native apps are generally faster and more responsive because they are compiled for specific platforms and have direct access to device resources. PWAs, on the other hand, are web-based and may not match the performance of native apps, especially for highly resource-intensive tasks.
Distribution: Native apps require approval from app stores and are distributed through them. PWAs, however, are distributed via the web, making them easier to deploy and update without the need for store approval.
User Experience: While PWAs can closely mimic the look and feel of native apps, there might be subtle differences in how they behave or interact with the operating system.
How to create PWA?
Although, if you have created your project using create-react-app you might already have file created named as manifest.json in your public folder. What this file do? It actually tells browser what happens when user downloads the app through browser, like how your website is going to look as an app when it is downloaded, like what image or icon will be shown, what will be your app name shown to users etc. It generally have everything that supports different screen size and different devices.
Let us understand why it is in the market and who backs it !!
A progressive web app (PWA) is a standard introduced by Google that was eagerly approved by Microsoft and reluctantly adopted by Apple.
As Microsoft has eagerly approved the adoption they created something called as PWABuilder. Which i personally recommend you to through for create an app out of your website.PWABuilder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward.
Now, Finally in order to make PWA follow here –
1) Go through this quick start guide it simply helps you to set up a extension PWABuilder Studio to your VS Code
2) Go through the following link to create a manifest.json file and create service workers (if needed), generate icons for your app (not recommended), generate screenshots for your app (not recommended). Why I said, I do not recommend is because we face quality issue of images what is created by PWABuilder in my experience at least.
What are service workers?
As i already given overview on manifest.json i will directly go and explain what are service workers.
PWAs can cache data and assets locally, allowing users to interact with the app even when they’re offline or have a poor internet connection. This is achieved using Service Workers, a key technology that enables offline capabilities.
A Service Worker is a type of web worker that operates in the background and is a key technology behind Progressive Web Apps (PWAs). It is a JavaScript file that runs independently of a web page and can manage network requests, cache resources, and enable offline functionality.
Event-Driven: Service workers use an event-driven architecture. They respond to various events such as network requests, push notifications, and background sync. Key events include install, activate, and fetch, which allow the service worker to cache assets, update the cache, and handle network requests, respectively.
Intercepting Network Requests: Service workers can intercept and handle network requests programmatically. This means they can modify requests, serve cached responses, or even fetch resources from the network, providing a more flexible approach to handling network interactions.
Background Sync and Push Notifications: Service workers can handle background sync tasks and push notifications. This allows web apps to update data in the background and send notifications to users even when the app is not active.
How Does a Service Worker Work?
Registration: First we need to register the service worker see sample below-
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}Installation: Post registration install the service worker see sample below-
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'/',
'/styles/main.css',
'/scripts/main.js'
]);
})
);
});Activation: Post installation now active the service worker.
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName !== 'my-cache') {
return caches.delete(cacheName);
}
})
);
})
);
});Fetching: Post activation we can do fetching as well and do the required manipulation and that’s it.
self.addEventListener("fetch", function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
}),
);
});Benefits of Service Workers-
Improved Performance: By caching resources and serving them from the cache, service workers can reduce load times and improve overall performance.
Offline Access: Users can continue using the web app even when offline, thanks to cached resources.
Background Tasks: Service workers can perform tasks like background data synchronization and sending notifications, enhancing the user experience.
