この記事はPWA Advent Calendar 2019の22日目の記事です。

気がついたら22日になっていて、日数が経過するスピードに着いていけずカレンダーを見てびびっています。ﾓｳｲｸﾂﾈﾙﾄｵｼｮｳｶﾞﾂ…

さてさっそくですが表題の件ですが、先日開催されたJSConf JPの「Streams APIをちゃんと理解する」というセッションで、「Fetch API実行後に受け取れるResponseのBodyはReadableStreamなので、Service WorkerでリクエストをインターセプトしてStreamをResponseとして返すことができる」ということを知ったので少しさわってみました。

ためしてみた

今回は、template.htmlというファイルを用意して、そこからコンテンツの上部と下部を切り出し、Fetch時にリクエストされたらキャッシュした部分と、データとして保持しているHTMLをReadableStreamで読み込んでレスポンスとして返却する、というかんたんなデモを作成しました。動作デモはこちらです。

Service Workerからポイントだけ抜粋します。

下準備として、template.htmlというファイルを用意しService Workerのインストール時にコンテンツの上部と下部に分割してキャッシュします。

const CACHE_LIST = [
  'template.html'
  // ...
];

self.addEventListener('install', (installEvent) => {
  console.log('[Service Worker] Installed');

  installEvent.waitUntil(
    self.skipWaiting(),
    (async () => {
      const cache = await caches.open(CACHE_VERSION);

      await cache.addAll(CACHE_LIST)
      .then(() => cache.match('template.html'))
      .then((response) => {
        return response.text().then(text => {
          const headerEndIndex = text.indexOf('<div class="o-layout -main"><div class="o-layout__inner">');
          const footerStartIndex = text.indexOf('</div></div></main>');
          return Promise.all([
            cache.put('template-start.html', new Response(text.slice(0, headerEndIndex), response)),
            cache.put('template-end.html', new Response(text.slice(footerStartIndex), response))
          ]);
        });
      })
      .then(() => console.log('Required assets successfully cached !'))
      .catch((error) => {
        console.warn('Required assets failed to cache. :', error);
      })
    })());
});

こうするとキャッシュにtemplate.htmlから生成された'template-start.html'とtemplate-end.htmlが追加されます。

続いてキャッシュやデータからReadableStreamでリクエストを生成する関数を作成します。

const createStream = async (request) => {
  const stream = new ReadableStream({
    start(controller) {
      const url = new URL(request.url);
      const header = caches.match('template-start.html');
      const footer = caches.match('template-end.html');
      const filename = /\/$/.test(url.pathname) ? 
       'index.html' : url.pathname.match(".+/(.+?)([\?#;].*)?$")[1];
      const targetPath = 'assets/data/'+ filename;
      const contents = fetch(targetPath)
      .then(response => {
        if (!response.ok && response.status === 404) {
          return caches.match('assets/data/404.html');
        }
        return response;
      });
      const pushStream = (stream) => {
        const reader = stream.getReader();
        const process = (result) => {
          if (result.done) return;
          controller.enqueue(result.value);
          return reader.read().then(process);
        }

        return reader.read().then(process);
      }

      header
        .then(response => pushStream(response.body)).then(() => contents)
        .then(response => pushStream(response.body)).then(() => footer)
        .then(response => pushStream(response.body)).then(() => controller.close());
    }
  });

  return new Response(stream, {
    headers: {'Content-Type': 'text/html; charset=utf-8'}
  })
}

そしてfetchの際に、ReadableStreamでコンテンツをキャッシュからレスポンスとして返却します。

self.addEventListener('fetch', (fetchEvent) => {
  console.log('[Service Worker] Fetch Event');

  const url = new URL(fetchEvent.request.url);
  const destination = fetchEvent.request.destination;
  const pathname = url.pathname;

  if(url.origin === location.origin) {
    if(destination === 'document') {
      if (pathname === scope || pathname === scope + 'index.html') {
        fetchEvent.respondWith(
          cacheFallingBackToNetwork(fetchEvent)
        );
      } else {
        fetchEvent.respondWith(createStream(fetchEvent.request));
      }

      return;
    }

    fetchEvent.respondWith(
      cacheFallingBackToNetwork(fetchEvent)
    );
  }
});

さわってみた感想

headの中身（titleなど）をどうしよう問題にぶち当たるので、静的ページで用いるには向いてなさそう
- コンテンツ情報を動的に引っ張ってくるページやアプリケーションのフレームなどには使えそう
キャッシュの扱い方のひとつとして勉強になりました
初回訪問時などはページのFetchイベントが取れないので、そのあたりどういう扱うか問題については課題

それではよいお年をお過ごしください！

参考資料