프로그레시브 웹 앱: 캐싱 전략

지난 몇 주 동안 저는 프로그레시브 웹 앱을 좀 더 자세히 살펴보았고 일부 개념, 특히 캐싱 전략을 더 잘 이해하게 되었습니다. 그래서 이것은 내가 배운 것에 대해 쓰는 것입니다.

추신: 저는 좋은 작가가 아닙니다 :) 그리고 이것은 PWA의 기본을 다루지 않습니다

프로그레시브 웹 앱이란?

프로그레시브 웹 앱(PWA)은 사용자에게 기본 모바일 애플리케이션처럼 느껴질 수 있는 일반 웹 애플리케이션입니다.

PWA에 대해 자세히 알아보려면Check out this page

캐싱 전략

PWA를 구축하면 일부 캐싱을 수행하게 됩니다. 자산(css, js, 아이콘, 이미지), 응답 또는 대체 오프라인 페이지일 수도 있습니다. 따라서 애플리케이션에 가장 적합한 전략을 선택하는 것이 매우 중요합니다. 일반적인 캐싱 전략은 다음과 같습니다.

* 캐시 전용

캐시 전용 전략은 네트워크로 이동하지 않고 캐시에서 리소스를 반환합니다. 캐시에 존재하지 않으면 실패하고 아무 일도 일어나지 않습니다. 네트워크를 통해 해당 리소스를 가져오려고 하지 않기 때문입니다. 이 전략은 서비스 작업자를 설치하는 동안 사전 캐시된 자산을 제공하는 데 유용합니다.

self.addEventListener('fetch', event => {
 event.respondWith(
   caches.match(event.request)
 );
});

* 네트워크 전용

네트워크 전용 전략은 리소스를 얻기 위해 네트워크로 이동합니다. 캐시에 저장되거나 캐시에서 검색되지 않습니다. 이 전략은 부실하거나 캐시된 버전을 허용할 수 없는 경우에 유용합니다(항상 최신 상태여야 하는 데이터의 경우).

self.addEventListener('fetch', event => {
 event.respondWith(
   fetch(event.request)
 );
});

* 캐시 우선

캐시 우선 전략은 먼저 캐시에서 리소스를 가져오려고 시도합니다. 찾지 못하면 네트워크로 이동하여 후속 요청에 대한 응답을 캐시합니다. 리소스가 캐시에서 발견되면 반환하고 네트워크를 통해 요청하지 않습니다. 이 전략은 즉시 자산을 캐싱하는 데 유용하며 동일한 자산에 대한 반복적인 요청은 캐시에서 즉시 반환됩니다.

self.addEventListener('fetch', event => {
 event.respondWith(
   caches.match(event.request).then(response => {
     if(response) return response
     fetch(event.request).then(response => {
       cache.put(event.request, response.clone());
       return response;
      });
    });
 );
});

* 네트워크 우선

네트워크 우선 전략은 항상 먼저 네트워크를 통해 리소스를 가져오려고 시도합니다. 요청이 실패하면 캐시로 이동하여 리소스를 확인합니다. 요청이 성공하면 응답을 캐시하고 반환합니다. 이 전략은 항상 최신 상태여야 하는 리소스에 유용합니다.

self.addEventListener('fetch', event => {
 event.respondWith(
   fetch(event.request).then(response => {
     cache.put(event.request, response.clone());
     return response;
   }).catch(_ => {
     return caches.match(event.request);
   });
 );
});

* 재확인하는 동안 부실

재검증하는 동안 부실은 항상 캐시에서 리소스를 제공한 다음 해당 요청이 네트워크를 통해 이루어진 다음 캐시됩니다.

self.addEventListener('fetch', event => {
 event.respondWith(
   caches.match(event.request).then(response => {
     fetch(event.request).then(res= => {
       cache.put(event.request, res.clone());
      });
      return response;
   });
 );
});

그래서 다음은?

거기에 있습니다. 위의 내용은 대부분의 경우 사용하게 될 일반적인 전략입니다. 캐싱 전략에 대해 자세히 알아보기Read More...

다음은 제가 구축한 두 가지 기본 PWA입니다. 피드백, 좋아요, 리트윗 또는 별점에 감사드립니다. 또한 이 글에 대한 피드백을 좋아할 것입니다. 감사 :)

기본 일기예보 앱Predict Sky





가짜 일라제소년😒










또 다른 간단한 프로그레시브 웹 앱😌간단한 일기 예보 앱predictsky.com 일반 자바스크립트로 구축, 날씨 데이터는 에서 호스팅됩니다. 이에 대한 피드백, 리트윗 및 Repo에서 이 프로젝트에 별표를 표시해 주시면 감사하겠습니다:github.com/Steelze/weathe… 🥰❤️


오전 10:09 - 2019년 7월 6일

환율 계산기 Currency Converter





가짜 일라제소년😒










모두들 좋은 아침 이예요. 그래서 ALC 3.0 Progressive Web APP 프로젝트를 다시 실행하기로 결정했고 피드백에 감사하겠습니다. 프로젝트 URL: steelze.github.io/currency-conve… GithubRepo: github.com/Steelze/curren…


오전 06:42 - 2019년 6월 22일