How To Create A PWA?

As the name suggests, the development of a Progressive Web App (PWA) is an incremental process. Two pivotal components define a PWA: the Manifest and the Service Worker. These elements are independent of each other and not obligatory.

By integrating these two elements, the Manifest and the Service Worker, a PWA delivers an optimal user experience with easy installation, offline accessibility, and heightened performance, all while retaining the flexibility of web development.

The Manifest

The Manifest, typically a JSON file, encompasses crucial metadata detailing the application, including its name, icons, theme, and launch configurations. This facilitates the installation of the PWA on the user's device and grants accessibility from the home screen, thereby creating an experience akin to that of a native app.

Below is an example:

/site.webmanifest

{
  "name": "My Progressive Web App",
  "short_name": "PWA",
  "description": "An example Progressive Web App",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This example manifest file includes essential information such as the app's name, a short name, description, start URL, display mode, and icons.

The Manifest file integration is done into your HTML file using appropriate tag:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  ...
</body>
</html>

The Service Worker

The Service Worker, a background-executed JavaScript script, stands as the other key element. It enables the application to function offline by intercepting network requests and providing cached responses. The Service Worker also contributes to features such as resource caching, push notification management, and overall performance enhancement.

Here's a simple example:

/service-worker.js

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js',
        '/images/logo.png'
      ]);
    })
  );
});

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

This example service worker caches important files during the installation phase and then intercepts network requests, providing cached responses when available.

The Service Worker integration is done using appropriate script call:

<!DOCTYPE html>
<html lang="en">
<head>
  <script defer>
    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);
        });
    }
  </script>
</head>
<body>
  ...
</body>
</html>

PreviousPHPWA Bundle NextHow To Install/Remove A PWA?

Was this helpful?

{ "name": "My Progressive Web App", "short_name": "PWA", "description": "An example Progressive Web App", "start_url": "/index.html", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4285f4", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

self.addEventListener('install', (event) => { event.waitUntil( caches.open('my-cache').then((cache) => { return cache.addAll([ '/', '/index.html', '/styles/main.css', '/scripts/main.js', '/images/logo.png' ]); }) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }) ); });

<!DOCTYPE html> <html lang="en"> <head> <script defer> 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); }); } </script> </head> <body> ... </body> </html>