creating PWA: it works in local but not in web

Herchi · November 1

my-pwa:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index.html</title>
  <link rel="manifest" href="manifest.json">
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('sw.js')
          .then(reg => console.log('Service worker registered!', reg))
          .catch(err => console.error('Error registering service worker', err));
      });
    }
  </script>
</head>
<body>
  <h1>Welcome to my Progressive Web App!</h1>
  <p>This is a basic example of a PWA with a manifest and a service worker.</p>
</body>
</html>

manifest.json

{
    "name": "My PWA",
    "short_name": "My PWA",
    "start_url": "/",
    "display": "standalone",
    "icons": [
        {
            "src": "https://cdn-icons-png.flaticon.com/512/16/16410.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://cdn-icons-png.flaticon.com/512/16/16410.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

sw.js

self.addEventListener('install', event => {
    console.log('Service worker installed');
});

self.addEventListener('activate', event => {
    console.log('Service worker activated');
});

self.addEventListener('fetch', event => {
    console.log('Intercepting fetch request for:', event.request.url);
});