即使我有服务人员并且我的 PWA 工作正常，也没有检测到匹配的服务人员

Question

我一直在做一个用 HTML、CSS 和 JS 编写的项目，并在屏幕上随机显示不同的视频。我希望它是一个 PWA，所以它做到了。它工作得很好，但是当我打开 Chrome DevTools 和“应用程序”页面时，在“清单”部分它会抛出一个警告：“没有检测到匹配的服务工作人员。您可能需要重新加载页面，或者检查服务工作人员的当前页面还控制清单中的起始 URL。”

我对服务人员了解不多，我想知道为什么它有效，但似乎无效。另一个问题是我从来没有弹出“添加到主屏幕”。但是如果我手动添加它，它会完美运行。它也可以离线工作。

网站链接：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];

          }

        })

      );

    })

  );

});

Answer 1

解决方案是我没有使manifest.jsonscope和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"问题就解决了。