未檢測到匹配的服務人員 angular

Question

我知道這個問題有答案，我已經嘗試了互聯網上幾乎所有可用的答案。 我的目標是在手機上顯示一個顯示add to home screen的彈出窗口。 我知道我錯過了一件我無法弄清楚的小事。 有兩件事發生

1. 當service-worker.js被放置在src/assets中時，service-worker.js 注冊成功，但是 service- service-worker.js中的代碼沒有執行，並且我在開發者控制台中no matching service worker detected developer console-->application--->manifest

2. 當我將service-worker.js放在src/中時，它甚至不會注冊並且我收到錯誤Failed to register a ServiceWorker for scope ('http://localhost:3000/') with the script ('http://localhost:3000/service-worker.js')在控制台中。

我當前的代碼

服務工作者.js `

 console.log('service worker ?')
 self.addEventListener('install', function(event) {
     console.log("installed");
 });
self.addEventListener('activate', function(event) {
// Perform some task
  console.log("activated");
});

 self.addEventListener('fetch', function(event) {
  console.log("fetched");
   event.respondWith(
  fetch(event.request).catch(function() {
    return caches.match(event.request);
  })
  );
});`

manifest.json

{
"short_name": "DQ",
"name": "DQ Labs",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [....],
"start_url": "/"

}

app.module.ts

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' })

app.component.ts

if ('serviceWorker' in navigator) {
  console.log("Will the service worker register?");
  navigator.serviceWorker.register('../assets/service-worker.js')
    .then(function(reg){
      console.log("Yes, it did.", reg.scope);
   }).catch(function(err) {
      console.log("No it didn't. This happened:", err)
  });

}

Answer 1

這里我犯的一個小錯誤是我沒有更改manifest.json中指向service-worker.js文件夾的start_url 。 s tart_url應該始終指向service-worker resides. in my case, it is service-worker resides. in my case, it is start_url: '../assets/'`。