React＆Service Worker - キャッシュされたコンテンツ - Informユーザー

Question

service workersとreactjsに関する質問があります。

キャッシュされたコンテンツについてユーザーに知らせるため、ユーザーにキャッシュされたコンテンツまたは新しいコンテンツが利用可能であることを通知することをお勧めします。

私の質問は今、どのようにユーザーに通知できますか？

私はcreate-react-appを使用する場合は、registerServiceWorker.jsにそれが言う、このコードがあり、この時点で

、古いコンテンツが削除されているでしょうし、 新鮮なコンテンツがキャッシュに追加されていますが、 。新しいコンテンツが利用可能であるため、リフレッシュしてください。」と表示するには、完璧な時間が です。あなたのウェブアプリにメッセージ

function registerValidSW(swUrl) { 
    navigator.serviceWorker 
    .register(swUrl) 
    .then(registration => { 
     registration.onupdatefound =() => { 
     const installingWorker = registration.installing; 
     installingWorker.onstatechange =() => { 
      if (installingWorker.state === 'installed') { 
      if (navigator.serviceWorker.controller) { 
       // At this point, the old content will have been purged and 
       // the fresh content will have been added to the cache. 
       // It's the perfect time to display a "New content is 
       // available; please refresh." message in your web app. 
       console.log('New content is available; please refresh.'); 
      } else { 
       // At this point, everything has been precached. 
       // It's the perfect time to display a 
       // "Content is cached for offline use." message. 
       console.log('Content is cached for offline use.'); 
      } 
      } 
     }; 
     }; 
    }) 
    .catch(error => { 
     console.error('Error during service worker registration:', error); 
    }); 
} 

しかし、サービス労働者がスクリプトから離れて動作するため、実際にこのスクリプトに、当然のことながら、私は、documentへのアクセスを持っていません。 これを反応成分でどのように処理できますか？

他の人がこの問題をどのように処理してユーザーに通知しますか？

Answer 1

質問に含まれるコードは、windowクライアントのコンテキスト内で実行されます。あなたはあなたが望むどんなUI要素を表示するか完全に制御できます。それらのconsole.log()ステートメントを自由に変更して、何かを表示してください。

（サービスワーカーのコンテキストで実行される別のコードがあり、そのコードにDOMへのアクセス権がないことは間違いありませんが、それはあなたが尋ねているコードではありません）