등록을 취소 할 때 서비스 작업자 캐시를 지우려면 어떻게해야합니까?

Question

자주 묻는 질문 How do I uninstall a Service Worker?은 자바 스크립트를 사용하여 서비스 작업자를 등록 취소 한 경우 괜찮습니다. 서비스 작업자가 등록을 취소 할 때 캐시를 지우려면 어떻게해야합니까?

MDN unregister부터 서비스 작업자는 등록을 취소하기 전에 진행중인 작업을 모두 완료합니다. 따라서 uninstall 이벤트를 수신 할 수 있어야하지만 그러한 이벤트는 존재하지 않는 것 같습니다. as far as I can tell. 낄낄 거림에 대해서는 서비스 직원에게 self.addEventListener('uninstall', ...)을 추가하려고 시도했지만 예상대로 등록 해제시에는 실행되지 않았습니다. 또한 등록 취소시 보내지는 message을 청취하려고했습니다 ... 주사위가 없습니다.

나는 또한 service worker state을보고 생각하지만 아무도 installing, installed, activating, activated 및 redundant의 관련 나타납니다. 말할 것도없이, 그것은 서비스 직원에게 전달되는 메시지가 가능한 것처럼 보이지 않기 때문에, 어쨌든 서비스 직원 외부에서 uninstalling 상태로 무엇을 할 지 확신하지 못합니다.

빨대에 도달하면 uninstalling flag에 대한 참조를 볼 수 있지만 어디에도 노출되어 있지 않습니다. 제안?

Answer 1

모든 서비스 노동자의 등록을 취소하고 기원 캐시 스토리지 API에서 모든 것을 취소해야 다음 코드 :

async function unregisterAndClearCaches() { 
    const registrations = await navigator.serviceWorker.getRegistrations(); 
    const unregisterPromises = registrations.map(registration => registration.unregister()); 

    const allCaches = await caches.keys(); 
    const cacheDeletionPromises = allCaches.map(cache => caches.delete(cache)); 

    await Promise.all([...unregisterPromises, ...cacheDeletionPromises]); 
} 

Clear-Site-Data header 사용은 (서비스 작업자 등록을 해제 할 수있는 모든 것을 "강제"에 대한 또 다른 옵션이다 , 캐시 등)을 단일 작업으로 처리합니다.

Answer 2

메시지 전달을 통해이 작업을 수행 할 수 있습니다. 내가 Jeff Posnick이 대답하는 것을 선호하는 이유 중 하나는 캐시의 이름을 서비스 작업자 외부에서 알 필요가 없다는 것입니다.

self.addEventListener('message', (event) => { 
    messageHandler(event); 
}); 

messageHandler() 다음 다양한 전달 메시지에 대해 조치를 취할 수 있습니다 : 서비스 노동자에서 메시지 리스너를 추가합니다. 예를 들어 :

function messageHandler(event) { 
    if (event.data === 'purge_cache') { 
     caches.delete('mycache') 
     .then((success) => { 
      console.log("Cache removal status: " + success); 
     }) 
     .catch((err) => { 
      console.log("Cache removal error: ", err); 
     }); 
    } 
} 

는 포스트 서비스 노동자의 범위에있는 페이지에 스크립트에서 메시지를이 동작을 트리거합니다. 따라서, 캐시를 삭제 한 다음 서비스 노동자의 등록을 취소하는 방법에 원래의 질문에 대해, 당신이 할 수 있습니다 :

navigator.serviceWorker.getRegistration() 
.then((registration) => { 
    registration.active.postMessage('purge_cache'); 
    registration.unregister() 
    .then((success) => { 
     console.log('Service worker unregistration status: ' + success); 
    }) 
    .catch((err) => { 
     console.log('Service worker unregistration failed', err); 
    }); 
}) 
.catch((err) => { 
    console.log('Service worker registration not found.'); 
}); 

공지 사항, 나는 postMessage('purge_cache')에서 성공적인 응답을 기다리지 않았다; MDN unregister에서 "서비스 직원은 미등록되기 전에 진행중인 작업을 모두 마칩니다."