navigator.serviceWorker.controllerはページが更新されるまでnullです

Question

私はangularjsで作業し、サービスワーカーを使用してプッシュ通知を受け取ります。 しかしnavigator.serviceWorker.controllerは、ページの更新まではnullである、と私は

にserviceworkerのいくつかのコードをこの問題を解決するために行う方法がわからない：

self.addEventListener('push', pwServiceWorker.pushReceived); 
self.addEventListener('notificationclick', pwServiceWorker.notificationClicked); 

// refresh caches 
self.addEventListener('activate', function (event) 
{ 
    event.waitUntil(
     caches.keys().then(function (cacheNames) 
     { 
      return Promise.all(
       cacheNames.map(function (cacheName) 
       { 
        return caches.delete(cacheName); 
       }) 
      ); 
     }) 
    ); 
}); 

とserviceworkerでクライアントにメッセージを送信プッシュが受信するとき：mainController.jsで

self.clients.matchAll().then(function(all) { 
    console.log(all); 
    all.forEach(function(client) { 
     client.postMessage(data); 
    }); 
}); 

をこのようなメッセージを与える：

if (!navigator.serviceWorker || !navigator.serviceWorker.register) { 
     console.log("This browser doesn't support service workers"); 
     return; 
    } 

    // Listen to messages from service workers. 
    navigator.serviceWorker.addEventListener('message', function(event) { 
     console.log("Got reply from service worker: " + event.data); 
    }); 

    // Are we being controlled? 
    if (navigator.serviceWorker.controller) { 
     // Yes, send our controller a message. 
     console.log("Sending 'hi' to controller"); 
     navigator.serviceWorker.controller.postMessage("hi"); 
    } else { 
     // No, register a service worker to control pages like us. 
     // Note that it won't control this instance of this page, it only takes effect 
     // for pages in its scope loaded *after* it's installed. 
     navigator.serviceWorker.register("service-worker.js") 
      .then(function(registration) { 
       console.log("Service worker registered, scope: " + registration.scope); 
       console.log("Refresh the page to talk to it."); 
       // If we want to, we might do `location.reload();` so that we'd be controlled by it 
      }) 
      .catch(function(error) { 
       console.log("Service worker registration failed: " + error.message); 
      }); 
    } 

Answer 1

これは予期した動作です。リフレッシュ/再オープンするのを待たずに、開いているすべてのページのコントロールを取るには、あなたのサービス労働者にこれらのコマンドを追加する必要があります。

self.addEventListener('install', function(event) { 
    event.waitUntil(self.skipWaiting()); // Activate worker immediately 
}); 

self.addEventListener('activate', function(event) { 
    event.waitUntil(self.clients.claim()); // Become available to all pages 
}); 

あなたがskipWaiting()ドキュメントとclients.claim()ドキュメントでそれらについての詳細を読むことができます。