서비스 근로자가 페이지를 즉시 청구 할 수있는 최상의 방법

Question

현재 응용 프로그램의 특성 및 사용자 경험으로 인해 해당 서비스 담당자가 즉시 페이지를 등록하도록 설정했습니다.

이 응용 프로그램은 각 사용자에 대해 생성 된 동적 매니페스트 파일이있는 AppCache에서 변환되기 때문에 가장 좋은 방법은이 매니페스트 파일을 JSON 배열로 파싱하여 서비스 작업자에게 보내기위한 것입니다. 그것을 캐시해라. 문제는이 배열을 수신하기 전에 서비스 작업자가 활성화 될 때까지 기다려야한다는 것입니다.

현재 함수에 대한 시간 초과 값을 10000으로 설정했지만 (아래 참조) 성공률은 100 %가 아닙니다. 편집 : 종종이 서비스 작업자가이 10000 시간 종료 전에 활성화되지 않아 "TypeError : navigator.serviceWorker.controller is null"오류가 발생하는 경우가 있습니다.

//Get Request - Service Worker Preperation 
setTimeout(function getRequest() { 
    console.log("APP: Enetered getRequest() Method"); 
    $.ajax({ 
    type : "GET", 
    url : "https://ExampleURL/App/" + 
    localStorage.getItem("user") + ".manifest", 
    contentType: "text/plain", 
    async : false, 
    success : function(response) { 
     var myArray = listToArray(response, '\n'); 
     send_message_to_sw(myArray); 
    }, 
    error : function(msg) { 
     console.log("ERROR: " + msg); 
    } 
    }); 
}, 10000); 

제 질문은 서비스 직원이 활성 상태인지 확인하는 것이 가장 좋은 방법이며, 아니면 시간 제한에서 시간을 늘려야합니까?

직접적인 소유권 주장을 설정 한 방법에 문제가있는 경우 관련 서비스 근로자 코드를 첨부 할 예정입니다.

// INSTALL 
self.addEventListener('install', function(event) { 
    console.log('[ServiceWorker] Installed version', version); 
    event.waitUntil(
    caches.open(version).then(function(cache) { 
     console.log('[ServiceWorker] Cached cachedFiles for', version); 

     return cache.addAll(cacheFiles); 

    }).then(function() { 

     console.log('[ServiceWorker] Skip waiting on install'); 
     return self.skipWaiting(); 
    }) 
); 
}); 


//ACTIVATE 
self.addEventListener('activate', function(event) { 

    self.clients.matchAll({ 
    includeUncontrolled: true 
    }).then(function(clientList) { 
    var urls = clientList.map(function(client) { 
     return client.url; 
    }); 
    console.log('[ServiceWorker] Matching clients:', urls.join(', ')); 
    }); 

    event.waitUntil(

    caches.keys().then(function(cacheNames) { 
     return Promise.all(
     cacheNames.map(function(cacheName) { 
      if (cacheName !== version) { 
      console.log('[ServiceWorker] Deleting old cache:', cacheName); 
      return caches.delete(cacheName); 
      } 
     }) 
    ); 
    }).then(function() { 


     console.log('[ServiceWorker] Claiming clients for version', version); 
     return self.clients.claim(); 
    }) 
); 
}); 


//RECIEVE DATA FROM JAVASCRIPT FILE 
self.addEventListener('message', function(event){ 
    console.log("SW Received Message: " + event.data); 
    var fullArray = []; 

    var che = event.data; 
    fullArray = che.splice(','); 
    console.log("SWChe2: " + fullArray); 
    var result = fullArray.slice(1,-1); 


    caches.open(version + 'Manifest') 
    .then(function(cache) { 
    return cache.addAll(result); 
}); 
}); 

Answer 1

navigator.serviceWorker.ready 클라이언트 페이지가 기다릴 수 있으며, 그 범위가 현재 페이지를 포함 활성 서비스 작업자가있을 때 해결할 수 있다고 약속입니다.

navigator.serviceWorker.ready.then(registration => { 
    // Do something, confident that registration corresponds to 
    // an active SW's registration. 
}); 

하지만 ... 두 가지.

• 당신은 서비스 직원에게 메시지를 보낼 필요없이 context of your page에서 캐시 스토리지 API를 사용하여 항목을 추가 할 수 있습니다. window.caches.open('my-cache-name')은 서비스 작업자가 사용할 수있는 동일한 캐시에 대한 액세스 권한을 제공합니다.

• 항상 이 필요합니다.이 캐시되어야하는 리소스 세트가 있다면 install 처리기 내부에서 캐싱하는 것이 좋습니다. 이렇게하면 필요한 파일이 캐싱되지 않는 한 서비스 작업자가 설치를 완료하지 않습니다. install 핸들러 내에 fetch() 핸들러를 사용하여 미리 정리해야하는 리소스의 JSON 매니페스트를 검색 할 수 있으며 (서비스 근로자에게는 노출되지 않는 localStorage 대신) IndexedDB를 사용하여 현재 사용자의 이름을 저장할 수 있습니다. 이 경로를 선택하면 event.waitUntil()을 사용하여 전체 작업 집합이 완료 될 때까지 install 처리기의 완료를 지연시킵니다.

Answer 2

Jeff가 제안한 약속에서 getRequest() 함수의 내용을 래핑하는 결과가 발생했습니다.

navigator.serviceWorker.ready 

이렇게하면 내 신청서가 가장 짧은 지연을 완료 할 수 있습니다!