생산성이 좋고 복잡한 쿼리 계산에 능한 장고

복잡한 프런트 & 상태관리 리액트

모바일을 위해

Progressive Web App

웹의 장점과 앱의 장점을 결합한 웹앱

PWA

프로그레시브

반응형

설치 가능 & 푸시

최신 상태

비포 : 주소를 검색 -> 리액트로 만들어진 2MB 로딩

애프터 : 아이콘 클릭 -> 캐싱된 페이지 로딩

캐시는 누가? 서비스 워커

서버에 main.js요청 - 서비스워커가 가로챔. 캐시에 있으면 꺼내 보여줌.

브라우저와 서버 사이의 미들웨어.

캐시 퍼스트 스트라테지

먼저 캐시된거 가지고 오고.

최신 자원 뒤늦게 받아와 캐시 저장.

sw-precache

새로운 자원이 나왔을 때 최신 상태로 캐싱가능

브라우저 기본 캐시 VS 서비스 워커

첫방문 당연히 캐시 X

cleared 캐시가 백신 또는 비우기로 지워짐 약 19%의 크롬유저가 1주일에 한번 이상

purged 캐시 공간이 작음

expired 1일 미만인 경우가 많음

reved

manifest.json파일을 작성하면 자동으로 홈화면에 추가 팝업이 뜬다.

어디서나 다 쓸 수 있나요?

애플은 안되요. 그러나 개발중이라고 합니다.

웹 푸시

재고 상태 확인

비포 : 눈으로

애프터 : 푸시로

Firebase Cloud Messaging

GCM의 새 버전.

포그라운드 푸시 - 보고있는 중

백그라운드 푸시 - 보고있지 않은 중

각각 따로 구현해주어야 함.

실 서비스에 PWA를 적용한 후기

CRA가 PWA를 지원해줘서 쉽다고 생각함.

캐시때문에 최신자원이 보이지 않는 경우. - 새 자원이 감지되면 강제 새로고침

sw-precache에서 main.js만 빼고 됨. - 2MB가 넘으면 안됨.

왜 이 자원은 캐시가 안되나? 서비스워커는 url을 통해 자원을 캐시한다.

PWA를 사용할 명확한 이유가 있나요?

다른 방안으로 해결할 수 있나요

서비스워커 생명주기를 공부해보세요

토이프로젝트에 선 적용

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.