서비스 워커 및 해당 self.skipWaiting() 메서드

1903 단어 javascriptwebdev
ServiceWorker.skipWaiting() 메서드는 생명의 은인입니다. 새 버전의 서비스 작업자가 페이지를 인수하고 즉시 활성화되도록 합니다.

이것이 왜 그렇게 중요하고 유용한지 이해하려면 서비스 작업자 수명 주기를 다시 살펴봐야 합니다. 수명 주기의 각 단계에 대한 더 자세한 기사가 있지만 서비스 워커가 있을 수 있는 6가지 상태(구문 분석, 설치, 설치(대기), 활성화, 활성화 및 중복)가 있다는 것만 알고 있으면 됩니다.



navigator.serviceWorker.register()를 통해 서비스 워커를 처음 등록하려고 하면 전달된 파일이 구문 분석되고 오류가 없다고 가정하면 서비스 워커가 설치됩니다. 이전 서비스 워커 파일이 없는 페이지의 경우 새로 설치된 서비스 워커가 즉시 활성화됩니다.

그러나 페이지에 이미 활성화된 서비스 작업자 파일이 있는 경우 상황이 더 복잡해집니다.

끝없는 기다림



페이지에 이미 활성화된 서비스 작업자가 있고 새 파일이 푸시되는 경우 새 파일이 계속 구문 분석되고 설치됩니다. 일단 설치되면 활성화될 기회를 기다립니다.

self.skipWaiting()이 없으면 대기 중인 서비스 워커는 현재 활성 서비스 워커가 해제되고 중복된 후에만 활성화됩니다. 이는 두 가지 시나리오에서만 발생할 수 있습니다.
  • 사용자가 페이지 밖으로 이동하여 이전 활성 작업자를 해제한 경우.
  • 지정된 시간이 지나면 이전 활성 작업자가 해제됩니다.

  • 따라서 새 버전의 자산을 웹 사이트에 푸시하는 데 익숙했던 것과는 달리 새 버전의 서비스 작업자는 영원히 기다리는 것처럼 보일 수 있습니다. 사용자가 페이지를 새로고침해도 오랫동안 업데이트된 버전을 받지 못할 수 있습니다.

    self.skipWaiting() 구조에!



    ServiceWorker.skipWaiting() 메서드는 새로 설치된 서비스 작업자에게 대기 상태를 건너뛰고 바로 활성화 상태로 이동하도록 지시하여 이 문제를 해결합니다.



    self.skipWaiting() 메서드는 일반적으로 서비스 워커의 설치 이벤트에 사용됩니다. 메서드가 대기 단계 이전에 호출되는 한 서비스 작업자는 대기 단계를 건너뛰고 즉시 활성화됩니다.

    self.addEventListener('install', function (event) {
    
        self.skipWaiting();
    
        event.waitUntil(
            // Do stuff
        );
    })
    


    귀하 또는 귀하의 회사가 경험이 있는 사람을 필요로 하는 경우
  • AWS, GCP
  • 자바, NodeJS
  • 각도

  • 당신의 요구를 충족시키고 싶습니다.
    문안 인사

    좋은 웹페이지 즐겨찾기