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."

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.

Site's link: /

My service worker code inside my main.js:

window.addEventListener("load", () => {
  registerSW();
});

async function registerSW() {
  if ('serviceWorker' in navigator) {
    try {
      await navigator.serviceWorker.register('./sw.js');
    } catch (e) {
      console.log(`SW registration failed`);
    }
  }
}

My sw.js:

//CACHING FILES//
const filesToCache = [
  './',
  './offline.html',
  './css/offline.css',
];

const staticCacheName = 'pages-cache-v2';

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');
  event.waitUntil(
    caches.open(staticCacheName)
    .then(cache => {
      return cache.addAll(filesToCache);
    })
  );
});

//LOADING FILES WHEN OFFLINE//
self.addEventListener('fetch', event => {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request)
    .then(response => {
      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 => {
          // TODO 5 - Respond with custom 404 page
          return caches.open(staticCacheName).then(cache => {
            cache.put(event.request.url, response.clone());
            return response;
          });
        });


    }).catch(error => {
      console.log('Error, ', error);
      return caches.match('./offline.html');
    })
  );
});
// TODO 6 - Respond with custom offline page

self.addEventListener('activate', event => {
  console.log('Activating new service worker...');

  const cacheWhitelist = [staticCacheName];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

My webmanifest:

{
  "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": "/",
  "background_color": "#00adb5",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#00adb5"
}

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."

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.

Site's link: https://ondersumer07.github.io/vinematik/

My service worker code inside my main.js:

window.addEventListener("load", () => {
  registerSW();
});

async function registerSW() {
  if ('serviceWorker' in navigator) {
    try {
      await navigator.serviceWorker.register('./sw.js');
    } catch (e) {
      console.log(`SW registration failed`);
    }
  }
}

My sw.js:

//CACHING FILES//
const filesToCache = [
  './',
  './offline.html',
  './css/offline.css',
];

const staticCacheName = 'pages-cache-v2';

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');
  event.waitUntil(
    caches.open(staticCacheName)
    .then(cache => {
      return cache.addAll(filesToCache);
    })
  );
});

//LOADING FILES WHEN OFFLINE//
self.addEventListener('fetch', event => {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request)
    .then(response => {
      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 => {
          // TODO 5 - Respond with custom 404 page
          return caches.open(staticCacheName).then(cache => {
            cache.put(event.request.url, response.clone());
            return response;
          });
        });


    }).catch(error => {
      console.log('Error, ', error);
      return caches.match('./offline.html');
    })
  );
});
// TODO 6 - Respond with custom offline page

self.addEventListener('activate', event => {
  console.log('Activating new service worker...');

  const cacheWhitelist = [staticCacheName];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

My webmanifest:

{
  "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"
}

• javascript
• service
• progressive-web-apps
• worker

Share Improve this question Follow asked Mar 17, 2020 at 18:18 Önder SümerÖnder Sümer 14122 silver badges99 bronze badges 2

• That's odd. I see the same thing. A Wild Guess - perhaps play with the start_url. Trying things like "/vinematik" – Mathias Commented Mar 18, 2020 at 12:03
• 1 Thanks a lot I figured it out because of you, I'm posting the solution right now – Önder Sümer Commented Mar 18, 2020 at 20:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The solution is I wasn't making the scope and the start_url inside manifest.json the same which needs to be the website address. So I change the code to:

  "start_url": "https://ondersumer07.github.io/vinematik/",
  "background_color": "#00adb5",
  "display": "standalone",
  "scope": "https://ondersumer07.github.io/vinematik/",
  "theme_color": "#00adb5"

and the problem was solved.