JavaScript에서 서비스 작업자 건너 뛰기 강제로드

Question

서비스 담당자가 의도적으로 새로 고침 단추를 방해 할 수 있습니다. 데스크톱 Chrome에서는 Shift 키를 누른 상태에서 새로 고침 버튼을 클릭하여 하드로드를 수행하고 설치된 ServiceWorker를 무시할 수 있습니다.

강제로 JavaScript에서 SW를 무시하고 다시로드하는 방법이 있습니까?

(I는 SW가 오작동 시작하면 내가 모바일 사용자에게 전달할 수있는 버튼을 제공 할 수 있습니다이 원하는 전화는 시프트 키가 없습니다..) 여기

Answer 1

당신이 만약새로 고치기 전에 서비스 근로자에게을 보내면 다음 페이지로드가 서비스 작업자없이로드됩니다.

navigator.serviceWorker.getRegistration().then(function(reg) { 
    if (reg) { 
    reg.unregister().then(function() { window.location.reload(true); } 
    } else { 
    window.location.reload(true); 
    } 
}); 

Answer 2

내가에 댓글을 무엇의 예입니다

페이지 스크립트 :

if('serviceWorker' in navigator){ 
    // Register service worker 
    navigator.serviceWorker.register('/service-worker.js') 
    .then(
    reg => 
     console.log("SW registration succeeded. Scope is "+reg.scope) 
    ,err => 
     console.error("SW registration failed with error "+err) 
); 
} 

const send_message_to_sw = (msg) => 
    new Promise(
    (resolve, reject) => { 
     // Create a Message Channel 
     const msg_chan = new MessageChannel(); 

     // Handler for recieving message reply from service worker 
     msg_chan.port1.onmessage = (event) => { 
      if(event.data.error){ 
       reject(event.data.error); 
      }else{ 
       resolve(event.data); 
      } 
     }; 

     // Send message to service worker along with port for reply 
     navigator.serviceWorker.controller.postMessage(
     msg 
     , [msg_chan.port2] 
    ); 
    } 
); 

document.body.addEventListener(
    "click" 
    ,()=> 
    send_message_to_sw(
     { 
     action:"delete" 
     ,cache:/^v1$/ 
     ,url:/.*bundle.js$/ 
     } 
    ) 
    .then(
     (msg)=> 
     console.log("deleted:",msg) 
    ) 
); 

서비스 노동자 :

console.log("SW Startup!"); 

// Install Service Worker 
self.addEventListener(
    'install' 
    ,(event)=> 
    console.log('installed!') 
); 

// Service Worker Active 
self.addEventListener(
    'activate' 
    ,(event)=> 
    console.log('activated!') 
); 
self.addEventListener(
    'fetch' 
    ,(event) => 
    event.respondWith(
     caches.match(event.request) 
     .then((resp) => 
      resp 
      || 
      fetch(event.request) 
      .then(
      (response) => 
       caches.open('v1') 
       .then(
       (cache) => { 
        cache.put(event.request, response.clone()); 
        return response; 
       } 
      ) 
     ) 
    ) 
    ) 
); 
self.addEventListener(
    'message' 
    ,(event) =>{ 
    const data = event.data || {}; 
    if(data.action === "delete"){ 
     var p = 
     caches.keys() 
     .then(
      (keyList) => 
      keyList 
      .filter(
       key=>data.cache.test(key) 
      ) 
     ) 
     ; 
     if(data.url === undefined) { 
     p = p.then(
      (keyList) => 
      Promise.all(
       keyList 
       .map((key) =>{ 
       caches.delete(key); 
       return key; 
       } 
      ) 
     ) 
     ) 
     }else { 
     p = p.then(
      (keyList) => 
      Promise.all(
       keyList 
       .map((key) => 
       caches.open(key) 
       .then(
        (cache)=> 
        Promise.all([ 
         cache 
         ,cache.keys() 
        ]) 
       ) 
       .then(
        ([cache,items])=> 
        Promise.all(
         items 
         .filter(item=>data.url.test(item.url)) 
         .map(
         item=>{ 
          cache.delete(item); 
          return key + ":" + item.url 
         } 
        ) 
        ) 
       ) 
      ) 
     ) 
     )   
     } 
     return p.then(
     (keys)=> 
      event.ports[0].postMessage(
      keys 
      .reduce(
       (acc,item)=>acc.concat(item) 
       ,[] 
      ) 
     ) 
    ); 
    } 
    } 
);