JavaScript ServiceWorker API의 장점은 웹 개발자가 캐시를 쉽게 제어 할 수 있다는 것입니다. Etags와 같은 기술을 사용하는 것은 캐시를 제어하는 기술이지만 JavaScript를 사용하면 프로그램을 사용하여 캐시를보다 강력하고 자유롭게 제어 할 수 있습니다. 물론 Strong은 장점과 단점이 있습니다. 사후 치료를해야합니다. 소위 사후 관리 처리는 캐시를 정리하는 것입니다.
캐시 개체를 작성하고 캐시에서 요청 캐시 데이터를 추가하고 캐시에서 요청 캐시 데이터를 삭제 한 후 캐시를 완전히 삭제하는 방법을 살펴 보겠습니다.
캐시 객체 캐시 API에 대한 브라우저의 지원을 결정하십시오
브라우저가 캐시 API를 지원하는지 확인하십시오 ...
if (창에 '캐시') {// 지원이 있습니다!}… 창에 캐시 객체가 있는지 확인하십시오.
캐시 객체를 만듭니다
캐시 객체를 만드는 방법은 Caches.open ()을 사용하고 캐시 이름을 전달하는 것입니다.
caches.open ( 'test-cache').
이 캐시. 오픈 메소드는 약속을 반환하고 캐시 객체가 새로 생성됩니다. 이전에 만들어진 경우 재현되지 않습니다.
캐시 된 데이터를 추가하십시오
이 유형의 캐시의 경우 요청 객체의 배열로 생각할 수 있으며 요청 요청에 의해 얻은 응답 데이터는 캐시 객체에 키 값으로 저장됩니다. 캐시에 데이터를 추가하는 두 가지 방법이 있습니다 : Add 및 Addall. 이 두 가지 방법을 사용하여 캐시 할 요청의 주소를 추가하십시오. 요청 객체에 대한 소개는 Fetch API 기사를 참조 할 수 있습니다.
AddAll 메소드를 사용하여 배치로 캐시 요청을 추가하십시오.
caches.open ( 'test-cache'). 그런 다음 (함수 (cache) {cache.addall ([ '/', '/images/logo.png']) .then (function () {// cached!});});이 addall 메소드는 주소 배열을 매개 변수로 허용 할 수 있으며 이러한 요청 주소의 응답 데이터는 캐시 객체에 캐시됩니다. Addall은 약속을 반환합니다. 단일 주소를 추가하려면 메소드 추가를 사용하십시오.
caches.open ( 'test-cache'). 그런 다음 (함수 (cache) {cache.add ( '/page/1'); // "/page/1"주소가 요청되고 응답 데이터가 캐시됩니다.});add () 메소드는 또한 사용자 정의 요청을 수락 할 수 있습니다.
caches.open ( 'test-cache'). 그런 다음 (함수 (cache) {cache.add (새 요청 ( '/page/1', {/* request parameter*/}));});add () 메소드와 매우 유사합니다. put () 메소드는 요청 주소를 추가하고 동시에 응답 데이터를 추가 할 수 있습니다.
페치 ( '/page/1'). 다음 (함수 (응답) {return caches.open ( 'test-cache').캐시 된 데이터에 액세스하십시오
변경된 요청 데이터를 보려면 캐시 개체의 Keys () 메소드를 사용하여 모든 캐시 된 요청 객체를 배열 양식으로 가져올 수 있습니다.
Caches.open ( 'test-cache'). 다음 (function (cache) {cache.keys (). 그런 다음 (함수 (cachedRequests) {console.log (cachedRequests); // [요청, 요청]};});/*요청 {bodyust : "avit"Header : "no wortent :"방법 : "mode": "팔로우"참조자 : ""URL : "http://www.webhek.com/images/logo.png" }*/캐시 된 요청 요청의 응답 내용을 보려면 cache.match () 또는 cache.matchall () 메소드를 사용할 수 있습니다.
Caches.open ( 'test-cache'). 다음 (함수 (cache) {cache.match ( '/page/1'). 다음 (함수 (matchedResponse) {console.log (matecedResponse);});});/*응답 {Body : (...), Bodyused, Headers : OK : True : 200 : 200, typex : : : " "https://www.webhek.com/page/1" }*/응답 개체의 사용 및 세부 사항에 대한 자세한 내용은 Fetch API 기사를 참조하십시오.
캐시에서 데이터를 삭제하십시오
캐시에서 데이터를 삭제하면 캐시 개체에서 delete () 메소드를 사용할 수 있습니다.
caches.open ( 'test-cache'). 그런 다음 (함수 (cache) {cache.delete ( '/page/1');});이러한 방식으로 캐시에 더 이상 /페이지 /1 요청 데이터가 없습니다.
기존 캐시에서 캐시 이름을 가져옵니다
캐시에 이미 존재하는 캐시 데이터의 이름을 얻으려면 Caches.keys () 메소드를 사용해야합니다.
caches.keys (). 그런 다음 (함수 (cachekeys) {console.log (cachekeys); // ex : [ "test-cache"]});Window.caches.keys ()는 약속을 반환합니다.
캐시 객체를 삭제합니다
캐시 된 객체를 삭제하려면 캐시 된 키 이름 만 있으면됩니다.
caches.delete ( 'test-cache'). 그런 다음 (function () {console.log ( '캐시가 성공적으로 삭제되었습니다!');});오래된 캐시 된 데이터를 대량으로 삭제하는 방법 :
//`cache_name`은 새 캐시의 이름이라고 가정합니다. // 이제 이전 캐시 var var var cache_name = 'version-8'; // ... caches.keys (). }}));});
서비스 작업자 전문가가되고 싶습니까? 위의 코드는 라이브러리에 넣을 가치가 있습니다. Firefox 및 Google Chrome 지원 서비스 작업자는 더 많은 웹 사이트와 앱 이이 캐싱 기술을 사용하여 곧 달리기 속도를 향상시킬 것이라고 생각합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.