即使我有一个 service worker 并且我的 PWA 工作正常，也没有检测到匹配的 service worker

Question

我一直在做一个用 HTML、CSS 和 JS 编写的项目，并在屏幕上随机显示不同的视频。我希望它成为一个 PWA，它确实做到了。它工作得很好，但是当我打开 Chrome DevTools 和 'Application' 页面时，在 'Manifest' 部分它会发出警告："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."

我对 service workers 了解不多，我想知道为什么它有效但似乎无效。另一个问题是我从来没有弹出 "Add to home screen" 。但是，如果我手动添加它，它会完美运行。它也可以离线工作。

站点的 link：https://ondersumer07.github.io/vinematik/

我的 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`);
    }
  }
}

我的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);
          }
        })
      );
    })
  );
});

我的网络清单：

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

Answer 1

解决方案是我没有让 scope 和 start_url 里面的 manifest.json 一样，这需要是网站地址。所以我将代码更改为：

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

问题解决了。

即使我有一个 service worker 并且我的 PWA 工作正常，也没有检测到匹配的 service worker

No matching service worker detected even though I have a service worker and my PWA is working fine

javascript

service

worker

progressive-web-apps