React & Service Worker - 캐시 된 콘텐츠 - 알리는 사용자

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에 대한 액세스 권한이 없다는 것이 맞습니다. 그러나이 코드는 사용자가 요구하는 코드가 아닙니다.)