NUA의 개발공부로그

캐싱 전략

• cacheFirst (캐시를 네트워크 보다 먼저 요청할 것인지)

  • offline 페이지가 먼저 보여질 때 유리

    

• cacheOnly (캐시만 볼 것인지)

  • static file가 해당

    

• networkFirst (캐시보다 네트워크를 먼저 요청할 것인지)

  • UX에 좋지 않음

    

• networkOnly (네트워크만 요청할 것인지)

  • 캐시가 필요없는 GET 메소드가 아닌 method

    

• staleWhileRevalidate (캐시 먼저, 그 다음 네트워크에서 요청된 캐시 반환)

  • 주로 사용되는 방식

    

• Cache then network (캐시, 네트워크에 요청을 동시에 하고, 캐시 data 먼저 표시, 이후 네트워크 data 표시)

  • workbox에는 없는 전략, networkFirst보다는 UX에 좋음

    

나는 PWA 웹앱 개발을 할 때 크롬 카나리아를 유용하게 사용하는데 모르는 사람들이 많을 것 같아 포스팅한다.

https://www.google.com/intl/ko/chrome/canary/

Chrome 카나리아는 개발자용 크롬 브라우저라고 생각하면 좋다. 

구글에서는 웹의 최첨단 기능을 포함한 브라우저라고 광고하고 있다..
실제로 Portals( https://web.dev/hands-on-portals/ ) 등 구글에서 새롭게 나오는 기술을 테스트해볼 수 있는 유일한 브라우저이긴 하다. 

PWA 개발에 Chrome 카나리아를 쓰면 좋은 이유는,

다른 브라우저와 달리 일반적인 검색 용도 등으로 쓰일 일이 없어서

다른 도메인 사이트들의 service worker와 헷갈릴 일이 없다는 게 장점이다. 그뿐인 것 같긴한데.. 나름 유용. 

workbox를 이용하여 PWA의 캐싱 방식을 직접 조작하려고 하다가 마주친 에러이다.

workbox wizard --injectManifest

위 명령어를 이용하여 workbox-config.js 파일을 생성한 후,

서비스 워커 파일을 생성하기 위해

workbox injectManifest workbox-config.js

위 명령어를 실행하려고 할 때, 잘못된 swSrc 주소나, 해당 주소의 파일에 제대로 된 값이 입력되어 있지 않으면 에러가 뜬다.

해결법

1. workbox-config.js 중 swSrc를 적당한 주소의 파일로 수정

module.exports = {
    globDirectory: 'dist/',
    globPatterns: ['**/*.{css,ico,png,html,js,json,txt}'],
    swDest: 'dist/sw.js',
    swSrc: 'sw-base.js',
};

2. sw-base.js 파일 수정

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js',
);

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

precacheAndRoute 안에 self.__WB_MANIFEST 이 들어가는 것을 확인하면 제대로 명령어가 실행된다.