コントローラの値がnullのため、サービスワーカーにメッセージを投稿できません

Question

websiteをサービスワーカーの助けを借りてオフラインで利用できるようにして、ページで必要なファイルをキャッシュします。 私は、ユーザーがどの画像をキャッシュしたいかを制御するようにしています。このため

、私は、メッセージは、ユーザがキャッシュまたは非キャッシュしたい画像に関するデータが含まれている機能のsendMessage

function sendMessage(msg){ 
    navigator.serviceWorker.controller.postMessage(msg); 
} 

を使用しています。

サービスワーカーは、メッセージイベントのイベントリスナーが含まれています

this.addEventListener('message', function(event){ 
var data = event.data; 
caches.open('v1').then(function(cache){ 
    if(data.add==1) 
     return cache.add(data.url); 
    else 
     cache.delete(data.url).then(function(response)  
    { 
    console.log(response)}); 
    console.log(event); 
    } 
)}) 

私が直面しています問題は、コントローラは常にヌルであるということです。

Answer 1

問題はサービスワーカーが登録されていますが、アクティブではなく、あなたのページをまだ制御していないことです。

サービスワーカーがアクティブになるようにするには、イベントハンドラでskipWaiting関数を呼び出すことができます。

サービスワーカーがアクティブになるとすぐにページを制御できるようにする場合は、activateイベントハンドラでClients.claim関数を使用できます。

ServiceWorker Cookbook Immediate Claim recipeに例があります。