オフラインで動かす仕組み

サービスワーカーは、ページとネットワークの間に入って、通信を預かるスクリプトです。前に取っておいたファイルを返せるので、電波がなくてもページが開きます。

このレッスンでは、サービスワーカーの流れと、キャッシュの戦略を学びます。

普段、ページが何かを求めると、その要求はネットワークへ出ます。サービスワーカーがあると、要求は、まずそこへ届きます。

サービスワーカーは、キャッシュにあればそれを返し、なければネットワークへ取りに行く、といった判断ができます。

サービスワーカーには、3つの場面があります。install は、最初に入るときです。ここで、アプリのファイルをキャッシュに入れます。

activate は、有効になるときです。古いキャッシュを片付けます。fetch は、ページが何かを求めるたびです。

// 学食アプリの骨組みを、端末に取っておく
const CACHE = "cafeteria-v1";
const FILES = ["/", "/style.css", "/app.js"];

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(FILES)));
});

// 取ってあれば返し、なければネットワークへ
self.addEventListener("fetch", (event) => {
  event.respondWith(caches.match(event.request).then((hit) => hit || fetch(event.request)));
});

cache.addAll は、リストのファイルを、まとめて取って入れます。ただし、1つでも取れないと、全部が失敗します。

リストに書いたファイルが、本当にあるか、確かめることが大切です。

ラボの sw.js が、覚えようとしているファイルを読み、それぞれがあるか調べます。出力は英語の単語です。

exists はある、MISSING はない、という意味です。最後の行は、足りないファイルの数です。

docker exec jupyter python3 steps/offline.py

キャッシュ戦略は、要求に何で答えるかの決まりです。骨組みのように変わらないものは、キャッシュを先に見ます。

注文の一覧のように、新しさが大事なものは、ネットワークを先に見ます。書き込みは、キャッシュに頼れません。

ブラウザは、サービスワーカーを、安全な接続のアドレスでだけ動かします。手元の開発用のアドレスは、例外として認められることがあります。

ラボの Preview で登録できるかは、ブラウザのコンソールで確かめます。コンソールの文を、読んでください。