Progressive Web App - Service Worker를 중심으로 - 2

Progressive Web App - Service Worker를 중심으로 - 1 에서 못다한 컨텐츠 캐시를 완성해 보자.

컨텐츠 네트웍으로 가져오기 및 캐시 저장

컨텐츠 캐시와 app shell의 다른점은 컨텐츠의 경우 app shell보다 변화의 빈도가 잦다는 것이다. 이를 위한 로직은 일단 캐시와 네트웍으로부터 모두 정보를 요청한 후 먼저 도착하는 정보를 보여주고, 캐시로부터 보여졌을 경우, 네트웍의 응답이 도착한 후 새로운 내용을 보여주는 것이다.

1. 캐시 및 네트웍으로 요청
2. 먼저 도착한 내용 보여줌
1. 캐시 응답이 먼저 도착할 경우 내용 우선 표시 -> 네트웍 응답 후 캐시 및 표시 내용 변경
2. 네트웍 응답이 먼저 도착할 경우 캐시 변경 및 내용 표시
3. 가능한 경우 항상 네트웍 응답으로 표시

이제 앱은 오프라인에서도 사용할 수있는 상태가 되었다.