How to create a Progressive Web App (PWA) or progressive web

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

To create a Progressive Web App (PWA) with Service Worker, follow these steps:

  • Create a manifest.json file: This file defines how the application will look and behave on different devices. It includes information such as the application name, application icon, color theme, screen orientation, and more.
{
  "name": "My PWA App",
  "short_name": "My App",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • Create an index.html file: This file is the entry point of your application. It includes a link to the manifest.json file and your service-worker.js file. Additionally, this is where you should include all the content of your application.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="My PWA App">
  <link rel="manifest" href="/manifest.json">
  <title>My PWA App</title>
</head>
<body>
  <h1>My PWA App</h1>
  <p>Welcome to my PWA application!</p>
  <script src="/main.js"></script>
  <script src="/service-worker.js"></script>
</body>
</html>
  • Create a service-worker.js file: This file is where the Service Worker will reside. In this file, you need to define which resources your application should cache and how to handle network requests.
const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/main.js',
  '/styles.css'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .catch(error => console.log('Error installing Service Worker:', error))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response  fetch(event.request))
      .catch(error => console.log('Error accessing cache:', error))
  );
});
  • Register the Service Worker: To register your Service Worker, you need to add the following code at the end of your index.html file:
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('Error registering Service Worker:', error));
  });
}
  • Test your application: Once you have completed the above steps, you should test your application on different devices and browsers to ensure everything works as expected.

When creating a PWA with Service Worker, ensure that the application is secure, reliable, and user-friendly on all devices and browsers. This means taking into account the security, accessibility, and usability of the application.

Post Views: 4

Leave a Comment