이 서비스 작업자 코드가 정확히 실행되도록 트리거 할 항목은 무엇입니까?

Question

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); 
    }); 
} 

, 표시 "새로운 콘텐츠를 사용할 수 있습니다, 새로 고치십시오"?

특히 스크립트 파일 이름이 변경되는 경우 index.html이 변경 될 때이 코드를 실행하여 어떻게 실행할 수 있습니까?

Answer 1

단계별로 나누어 보겠습니다.

1. navigator.serviceWorker.register 약속은 유효한 서비스 노동자의 존재는 서비스 노동자에 대한 HTTP 요청이 이전에 비해 다른 파일로 확인 된 경우, 트리거되는 이벤트에 대한
2. registration.onupdatefound 레지스터 리스너를 설정되면 해결 (또는됩니다 남서 처음)에 대해 발견 된 경우) 등의 활성화에 설치에서
3. registration.installing.onstatechange는
4. if (installingWorker.state === 'installed')가 012 이외의 모든 상태를 필터링, 설치에 설치하는 (새로운 서비스 노동자의 라이프 사이클 변화에 대한 리스너를 등록- 새 SW를 설치 한 후에 양성 분기가 실행됩니다.
5. if (navigator.serviceWorker.controller) 페이지가 현재 (이전) 서비스 작업자에 의해 제어되는지 확인합니다. true 인 경우 여기에서 앞서 언급 한 업데이트 시나리오를 처리합니다.

이렇게 요약하면이 console.log은 업데이트 된 서비스 작업자가 아닌 서비스 근로자가 올바르게 설치된 후 실행됩니다.

index.html 변경 후에는 트리거되지 않습니다. 서비스 근로자 코드 (serviceWorker.register 메서드가 가리키고 있음) 만 검사됩니다. 또한 일반적으로 브라우저 (또는 Chrome 이상)는 현재 SW 버전을 다운로드 한 후 24 시간 동안 확인하지 않습니다. 서비스 작업자 파일에 대해 설정된 일반 오래된 HTTP 캐시가 지나치게 공격적인 캐시 헤더로 전송 된 경우 여기에서 엉망이 될 수 있습니다.