Progressive web applications explain with examples

Progressive Web Applications (PWAs):

Progressive Web Applications (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They combine the best of both web and mobile apps, offering features such as offline access, push notifications, and fast loading speeds. PWAs can be accessed through a web browser but can behave like native mobile applications when installed on a device.

Key Features of PWAs:

Responsive: PWAs work on any device and adapt to different screen sizes (e.g., mobile, tablet, desktop).
Offline Capabilities: Thanks to service workers, PWAs can function offline or in low-network conditions by caching assets and data.
App-like Experience: PWAs can be installed on the user's home screen and open in a standalone window, mimicking native apps.
Push Notifications: PWAs can send push notifications to users, even when the app is not open.
Performance: PWAs are designed to load quickly, even on slow networks, by using service workers and caching strategies.
Security: PWAs are served over HTTPS, ensuring that data is secure.

How PWAs Work:

A Progressive Web Application typically consists of the following key elements:

Manifest File (manifest.json):
The manifest file provides metadata about the PWA, like the app name, icons, theme color, and display mode. It enables the "Add to Home Screen" functionality.

Example:

json
{
  "name": "My PWA",
  "short_name": "PWA",
  "description": "A Progressive Web App Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icons/pwa-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Service Workers:
Service workers are JavaScript files that run in the background, separate from the web page, and handle tasks like caching resources, background syncing, and handling push notifications. They are the key component that enables offline functionality.

Example of a Service Worker (service-worker.js):

javascript
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
        '/offline.html'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    }).catch(() => caches.match('/offline.html'))
  );
});

HTTPS:
PWAs require HTTPS to ensure that data is secure and to enable service workers. This also ensures that PWAs can be trusted and cannot be intercepted by third parties.

Push Notifications:
Push notifications are a key feature of PWAs that allow the app to send messages to users even if they are not actively using the app. This requires both the client and the server to set up a push notification service.

Example of Push Notification Setup:

javascript
// Request permission to send notifications
Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Notification permission granted');
  }
});

// Show a notification
const notification = new Notification('Hello from PWA!', {
  body: 'This is a push notification.',
  icon: '/icon.png',
  tag: 'notification-tag'
});

How to Build a Simple PWA:

Set up a Basic Web App: Create a simple web app, like an HTML page with a script and styles.

Example:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My PWA</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to My Progressive Web App</h1>
    <p>This is an example of a simple PWA.</p>
    <script src="app.js"></script>
  </body>
</html>

Add a Manifest File: Create a manifest.json file and link it in the <head> section of your HTML file.
```
html
<link rel="manifest" href="manifest.json" />
```

Create a Service Worker: Register a service worker in your JavaScript file (app.js) to handle caching and offline behavior.

javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(registration => {
    console.log('Service Worker registered with scope: ', registration.scope);
  }).catch(error => {
    console.log('Service Worker registration failed:', error);
  });
}

Cache Assets and Handle Fetch Requests: In the service worker (service-worker.js), cache static assets and respond with cached data when the user is offline.

Example of a Full PWA:

Here’s an example of a simple PWA setup:

index.html:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple PWA</title>
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>
    <h1>My Progressive Web App</h1>
    <p>This app works offline and can be installed on your home screen.</p>
    <script src="app.js"></script>
  </body>
</html>

manifest.json:

json
{
  "name": "Simple PWA",
  "short_name": "PWA",
  "description": "A simple PWA example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

service-worker.js:

javascript
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-pwa-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/app.js',
        '/icon.png'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

app.js:

javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(error => {
      console.log('Service Worker registration failed:', error);
    });
  });
}

Advantages of PWAs:

Cross-platform compatibility: PWAs work across different devices (mobile, desktop, tablets) and platforms (iOS, Android, Windows).
Offline support: PWAs can be used even without an internet connection.
App-like experience: They offer a native app feel with features like push notifications and fast loading.
Better performance: By caching data and assets, PWAs reduce server requests and improve loading times.
Reduced development costs: Unlike native apps, you only need to maintain one codebase for all platforms.

Conclusion:

PWAs are revolutionizing the way users interact with web applications by combining the reach of the web with the functionality of native apps. They offer a seamless, engaging, and fast user experience, even in offline conditions, and can significantly improve the performance of your web applications.

Search This Blog

HappyNewsMan (TechLead Pratap)