React Service 작업자: 사용자가 탭을 닫도록 강요하지 않고 새 콘텐츠를 로드하시겠습니까?

2442 단어 reactserviceworker
나는 반응에서 서비스 워커 개념을 구현하는 작업을 하고 있고 링크https://create-react-app.dev/docs/making-a-progressive-web-app/에 제안된 모든 구성을 추가했지만 여기서 문제는 새 콘텐츠를 표시하기 위해(네트워크가 오프라인에서 온라인으로 변경된 경우), ve는 '기존 탭이 닫히면 새 콘텐츠를 사용할 수 있습니다'와 같은 메시지에 사용자를 표시합니다. 그래서 여기서 우리는 사용자가 새 콘텐츠를 표시하기 위해 페이지를 닫도록 합니다. 새로 고침 옵션도 여기에서 작동하지 않습니다.

아래 메소드 확인 - (이것은 create-react-app을 사용하여 react 앱을 빌드할 때 생성된 메소드이며, react-app/service-worker.js에서 찾을 수 있습니다.)

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the updated precached content has been fetched,
              // but the previous service worker will still serve the older
              // content until all client tabs are closed.
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed. See'
              );

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } 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.');

              // Execute callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}


콘솔을 명확하게 볼 수 있습니다

New content is available and will be used when all tabs for > this page are closed.



이것을 달성하는 가장 좋은 방법은 무엇입니까? 따라서 페이지를 새로 고치기만 하면 이전에 저장된 캐시를 업데이트할 수 있습니다.

좋은 웹페이지 즐겨찾기