2023/06/22__VueJS(cache 관련 및 firebase)

워크박스로 런타임 캐시 관리

서비스 워커의 런타임 캐시 설정

• 앱을 실행하는 중간에 필요한 내용을 캐시하는 것을 의미

 

워크박스의 5가지 캐시전략

프리 캐시(pre-cache)

• 서비스 워커가 등록될 때 미리 원하는 파일만 지정하여 캐시하는 것
• 빠르고 손쉬운 방법

런타임(runtime) 캐시

• 브라우저의 HTTPS 요청처럼 프로그램 로직에 따라 앱 실행 중에 캐시해야 하는 경우 적용
• '캐시전략'이라는 사용방식을 결정해야 함

 

워크박스 5가지 '캐시전략'지원

• Network-First, Cache-First, Stale-while-revalidate,Network-only, Cache-only

1. Network-First 캐시전략

인터넷 접속을 먼저 요청

• 인터넷 접속이 성공하면 결과를 보여주고 그 내용을 캐시에 반영

항상 새로운 내용이 중요할 때 적합

예)인터넷 기사

 

2. Cache-First 캐시 전략

1 단계로 캐시에 먼저 요청

• 만약 내용이 있으며 성공적으로 결과 보여줌

바뀔 경우가 거의 없는 파일에 적합

예)폰트, 아이콘, 이미지

 

3.Stale-while-revalidate 캐시 전략

1단계에서 캐시에 먼저 요청

• 내용이 있으면 성공적으로 결과 표시
• 동시에 서비스 워커는 인터넷에 접속하여 캐시된 내용이 원본과 같은지 확인
• 만약 다르면 캐시를 새로운 원본으로 업데이트

가끔 업데이트가 발생할 경우 적용

예) 아바타 이미지

 

4. Network-Only 전략

필요한 파일이 있으면 무조건 인터넷에 접속해서 가져오는 방식

• 데이터 변경이 너무 빈번해서 캐시가 의미가 없을 때 사용

5. Cache-Only 전략

필요한 파일이 있으면 무조건 캐시에서 가져오는 방법

• 데이터 변경이 전혀 없고 오프라인 작업만으로 실행이 가능할 때 사용

프리캐시(pre-cache) 옵션지정

프리캐시(pre-cache)

옵션	의미	적용사례
include	프리캐시에서 사용할 파잉를 지정한다. 이것은 파일이름을 토대로 하므로 대량으로 찾는 정규식을 함께 활요하면 유용하다.	include:[/].css$/, /\.js$/]
exclude	프리캐시에서 제거할 파일을 지정하다. 사용법은 include처럼 정규식을 함께 활요한다. 그런데 유의할 점은 제거할 파일이 없어도 exclude:[]처럼 반드시 명시해 주어야 제대로 동작한다.	exclude : [/\.json$/, /\.png$/]

런타임 캐시옵션 지정

설정		의미	적용 사례
handler		앞에서 설명한 5가지 캐시 전략 중  한 가지 사용	Cache-First 전략 사용 handler : 'cacheFirst'
urlPattern		정규식 사용해서 캐시하려는 파일이나 URL경로 지정	*.png 이미지 파일 캐시 urlPattern :/\.png$/ 구글폰트 URL 캐시 /^https:\/\/fonts\.gstatic\.com/
options	cacheName	개발자 도구에 표시할 캐시 제목	cacheName :'png-cache'
	expiration	캐시제약지정 maxEntries : 캐시할 개수 maxAgeSeconds: 캐시가 유지될 총 시간(초)	총 파일 10개까지 캐시 maxEntries:10 1년 캐시 maxAgeSeconds : 60 * 60 * 24 * 365
				cacheableResponse	HTTP응답 코드를 통해서 캐시 여부 결정	응답 코드가 200(성공) , 404(파일 없음)면 캐시 cacheableResponse:{statuses:[200,404]}

 

카메라 사진 갤러리 앱 구경하기

카메라로 촬영한 사진을 바로 올려 게시하는 카메라 갤러리

싱글페이지앱의 라우터 사용법

마스터 디테일 구조학습

최종목표

1. 카메라로 촬영하기
2. 파이어베이스 사진 저장하기
3. 촬영한 사진을 카메라 갤러리에 가져오기

파이어베이스 스토리지 DB준비하기

파이어베이스 스토리지란?

• iOS, 안드로이드 기기나 사용자 생성 콘텐츠인 이미지, 비디오 파일을 서버가 없이도 웹에 저장할 수 있는 클라우드 서비스 의미
• 콘솔에서 직접 폴더를 관리, 파일을 업로드할 수 있어서 편리

파이어베이스 스토리지 서비스

• 카메라로 촬영한 이미지를 서버에 업로드
• 파이어베이스 DB와 함께 사용 가능
• 백엔드 관리 용이

워크박스로 서비스 워커에서 캐시관리하가

워크박스의 InjectManifest 모드 학습

• 카메로 직접 찍은 사지은 기본 캐시가 되지 않음
• InjectManifest 모드 캐시 적용