title: No matching service worker detected even though I have a service worker and my PWA is working fine
body: <p>I've been working on a project which is written in HTML, CSS and JS and shows different videos on the screen randomly. I wanted it to be a PWA and so it did. It's working just fine but when I open Chrome DevTools and 'Application' page, in the 'Manifest' section it throws a warning: "No matching service worker detecte. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest."</p>
  
  <p>I don't know much about service workers and I wonder why it works but seems as it doesn't. Another problem is that I never get the "Add to home screen" pop up. But if I add it manually, it works perfectly. It also works offline.</p>
  
  <p>Site's link: <a href="https://ondersumer07.github.io/vinematik/" rel="nofollow noreferrer">https://ondersumer07.github.io/vinematik/</a></p>
  
  <p>My service worker code inside my main.js:</p>
  
  <pre><code>window.addEventListener("load", () =&gt; {
    registerSW();
  });
  
  async function registerSW() {
    if ('serviceWorker' in navigator) {
      try {
        await navigator.serviceWorker.register('./sw.js');
      } catch (e) {
        console.log(`SW registration failed`);
      }
    }
  }
  </code></pre>
  
  <p>My sw.js:</p>
  
  <pre><code>//CACHING FILES//
  const filesToCache = [
    './',
    './offline.html',
    './css/offline.css',
  ];
  
  const staticCacheName = 'pages-cache-v2';
  
  self.addEventListener('install', event =&gt; {
    console.log('Attempting to install service worker and cache static assets');
    event.waitUntil(
      caches.open(staticCacheName)
      .then(cache =&gt; {
        return cache.addAll(filesToCache);
      })
    );
  });
  
  //LOADING FILES WHEN OFFLINE//
  self.addEventListener('fetch', event =&gt; {
    console.log('Fetch event for ', event.request.url);
    event.respondWith(
      caches.match(event.request)
      .then(response =&gt; {
        if (response) {
          console.log('Found ', event.request.url, ' in cache');
          return response;
        }
        console.log('Network request for ', event.request.url);
        return fetch(event.request)
  
          .then(response =&gt; {
            // TODO 5 - Respond with custom 404 page
            return caches.open(staticCacheName).then(cache =&gt; {
              cache.put(event.request.url, response.clone());
              return response;
            });
          });
  
  
      }).catch(error =&gt; {
        console.log('Error, ', error);
        return caches.match('./offline.html');
      })
    );
  });
  // TODO 6 - Respond with custom offline page
  
  self.addEventListener('activate', event =&gt; {
    console.log('Activating new service worker...');
  
    const cacheWhitelist = [staticCacheName];
  
    event.waitUntil(
      caches.keys().then(cacheNames =&gt; {
        return Promise.all(
          cacheNames.map(cacheName =&gt; {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
  </code></pre>
  
  <p>My webmanifest:</p>
  
  <pre><code>{
    "short_name": "Vinematik",
    "name": "Vinematik",
    "description": "Rastgele ve sınırsız vine izleme uygulaması!",
    "icons": [
      {
        "src": "images/android-chrome-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "images/android-chrome-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
      },
      {
        "src": "images/apple-touch-icon.png",
        "type": "image/png",
        "sizes": "180x180"
      },
      {
        "src": "images/favicon-16x16.png",
        "type": "image/png",
        "sizes": "16x16"
      },
      {
        "src": "images/favicon-32x32.png",
        "type": "image/png",
        "sizes": "32x32"
      }
    ],
    "start_url": "https://ondersumer07.github.io/vinematik/",
    "background_color": "#00adb5",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#00adb5"
  }
  </code></pre>