오늘은 짧은 포스팅입니다. (그것을 쓰면 사실이 됩니다!) 또한 특정 포인트가 있는 것보다 짧은 개발자 로그에 가깝습니다 😌

프로그레시브 웹 앱은 오늘날 모든 최신 브라우저에서 지원하는 것입니다. 이 사이트를 읽고 하나를 사용하고 있습니다. 인터넷 연결이 끊긴 상태에서 로드하면 낙서할 수 있는 귀여운 오프라인 페이지가 표시됩니다. 🖌️🎨🎊

PWA의 핵심 부분인 서비스 워커를 빌드하려면 Workbox 을 사용하는 것이 좋습니다. 하지만.. 안하면? 🤔

Sam의 특허^ 웹 설치 모델

페이지와 리소스를 작성하고 SW를 작성한 다음 동일한 페이지와 리소스를 캐시하는 PWA에 대한 일반적인 접근 방식 대신 전체 환경을 '설치'하는 거의 빈 사이트를 만들겠습니다.

그 전체 경험은 말 그대로 다른 곳에서 호스팅되는 .tar 파일이 될 것입니다. 설치하자! 🔜🖥️

실제 사이트 만들기

따라서 이것이 작동하려면 실제 웹 사이트가 필요합니다. app.tar , 스타일 등의 리소스를 포함하는 index.html라는 파일을 만듭니다.

SW 등록

전경 페이지index.html 내부에서 SW를 다음과 같이 등록합니다.

<script>
if (!('serviceWorker' in navigator)) {
  throw new Error('unsupported');
}
navigator.serviceWorker.register('/sw.js').then((reg) => {
  console.info('registered');
  // TODO
});
</script>

이 파일과 아래의 sw.js만 있으면 HTTP 서버에서 실제로 제공됩니다.

핸들러 설치

그리고 sw.js 내부에서 다음을 수행할 수 있습니다.

self.addEventListener('install', (ev) => {
  const p = (async() => {
    const response = await fetch('app.tar');
    const buffer = await response.arrayBuffer();

    const cache = await caches.open('app');
    const ops = [];
    untar(buffer, (file) => {
      if (file.name.endsWith('/')) {
        return;  // directory, ignore
      }
      const p = cache.put(file.name, new Response(file.buffer));
      ops.push(p);
    });
    await Promise.all(ops);
    // untar is a modified version of https://github.com/InvokIT/js-untar
  })();
  ev.waitUntil(p);
});

엄청난! 이제 다운로드app.tar하고 해당 콘텐츠를 캐시에 설치했습니다. 말 그대로 우리가 좋아하는 모든 콘텐츠를 포함할 수 있으며 실제로 HTTP를 통해 제공하는 파일에 매핑할 필요가 없습니다.

가져오기 처리기

나는 거의 잊었다. sw.js에서 이 상용구를 사용하여 캐시에서 실제로 서비스를 제공해야 합니다.

self.addEventListener('fetch', (ev) => {
  const p = (async() => {
    // TODO: make requests for '/index.html' match '/'
    const response = await caches.match(ev.request, {ignoreSearch: true});
    return response || fetch(ev.request);
  })();
  ev.respondWith(p);
});

(말 그대로 SW가 있는 거의 모든 사이트에서 동일합니다.)

집에서 이것을 시도하지 마십시오

이것은 대부분 .tar 파일에서 웹사이트를 설치하는 것이 가능한지 알아보기 위한 실험이었습니다. 예, 그렇습니다! 이제 웹에서 응용 프로그램을 설치하는 전체 경험을 즐길 수 있습니다. 🙄

Here's a demo!

12 👋