PWA에서 데이터 캐싱 및 가져오기

나는 일하는 서비스 워커와 함께 돌아왔다. 이 기사에서는 오늘의 수업인 프로그레시브 웹 앱에서 데이터 캐싱 및 캐싱된 데이터 가져오기를 다룹니다.

데이터를 캐시하려면 두 개의 변수를 선언해야 합니다. 하나는 캐시 이름을 보유하고 다른 하나는 캐시할 데이터/파일을 보유합니다(파일 배열이어야 함).

const cacheName = 'cache-v1';
const cacheResources = [
  'index.js',
  'style.css',
]

리소스/데이터 캐싱:

self.addEventListener("install", event => {
  console.log('Service Worker install event');
  event.waitUntil(
    caches.open(cacheName)
    .then(cache => {
      console.log("Service Worker: Caching files");
      return cache.addAll(cacheResources );
    })
    .catch(err => console.log(err))
  );m
});

코드 설명:
Self는 이 경우 서비스 작업자인 전역 범위를 가리킵니다. 설치 이벤트를 수신 대기하는 이벤트 리스너를 연결하고 선언된 캐시 이름으로 캐시 저장소를 열고.open() 모든 파일을 추가합니다addAll().

데이터를 가져 오는 중:

self.addEventListener("fetch", event => {
  console.log('Sw: fetching');
  event.respondWith(caches.match(event.request)
  .then(cachedResponse => {
    return cachedResponse || fetch(event.request)
  }))
})

코드 설명:
데이터를 가져오기 위해 가져오기 이벤트를 수신하고 요청된 데이터가 캐시된 데이터와 일치하는지 확인합니다: caches.match() . 데이터가 일치하면 네트워크 요청을 하지 않으면 데이터를 다시 보냅니다. 이것은 기본 브라우저 가져오기 처리를 방지하는 respondWith() 기능 내에 있어야 합니다.

그게 67일째다.
내일 또 해보자