본 기사는 기록용입니다.
개발해 나가는데 고려해야 할 요소를 말한 것입니다.

테마

안드로이드에서 전체 화면으로 바삭하게 움직이는 PWA
※PWA가 무엇인가에 대해서는 다른 기사를 참조해 주세요.

도전

1. 톱 페이지에 액세스 했을 때에 복수 페이지를 cache 해 간다.

2. 새로운 콘텐츠를 cahce 할 때는 오래된 cache를 제대로 삭제한다.

구현

1
우선 다음 리포지토리에서 http-server 모듈로 움직이는 정적 파일 세트를 git clone

2
sever.js가 서버 시작 파일이므로 node ./server.js 또는 npm run start

자, 이제 샘플 환경이 완성되었습니다.
위에서 언급한 과제를 하나하나 잡아 갑시다.

우선 이 사진과 같이 브라우저 캐시와 SW의 캐시가 혼합되어 있으면 SW의 캐시만을 쫓기 어렵기 때문에 DevTool의 Network 탭에서 Disable cache했습니다.

도전 1

지금은 톱 페이지에만 액세스하고 있으며 다른 페이지를 캐시 할 수 없습니다. 이번에는 로컬 서버에 액세스하고 있기 때문에 오프라인에서도 볼 수 있습니다만, 실제로는 오프라인에서는 톱 페이지 밖에 볼 수 없게 됩니다.



위 사진과 같이 페이지가 네 개 있으며 각 URL은
/
/work
/about
/contact
입니다.
DevTool의 Application의 Cache Storage를 보면 역시/그리고 그것에 묶는 img나 css, js 이외는 Cache 할 수 없습니다.



그래서 install 이벤트 안을 괴롭히고 싶습니다.

  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];


self.addEventListener('install', event => {

  console.log('service worker: install');

  // cache core files
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );

});

이 녀석을 이렇게 바꿉니다.

  installFilesEssential = [
    '/',
    '/work',
    '/about',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png',
    '/images/circuit.jpg'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg',
    '/images/hero/workspace-lo.jpg',
    '/images/hero/workspace-hi.jpg'
  ];

구체적으로 말하면 아래 URL을 추가했습니다.

/work
/images/hero/workspace-io.jpg
/images/hero/workspace-hi.jpg
/images/circuit.jpg

이제 다시 한 번부터 톱 페이지에 요청하여 install 이벤트를 발화시켜 지금 추가한 URL의 Cache도 잡혀 있는지 확인하고 싶으므로 이전 Cache는 일단 전부 지웁시다.



예

여기에서 톱 페이지에 액세스하면 Network 탭에서 방금 추가한/work등의 Cache가 취득되고 있는 것을 알 수 있습니다.

실제로/work에 액세스해보고 Network 탭을 보면/work는 ServiceWorker의 Cache에서 가져온 것을 알 수 있습니다.