オフラインフォールバックページ
ユーザーがオフラインのときにキャッシュ済みのフォールバックページを提供します
「オフラインフォールバックページ」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
オフラインページが必要な理由
ネットワークを利用できないとき、サービスワーカーはブラウザーの一般的な「インターネットに接続できません」というエラーの代わりに、カスタムのオフラインフォールバックを表示できます。ユーザーにはブランドや役立つ情報、キャッシュ済みのコンテンツが表示されるため、Chromium の恐竜や Firefox の悲しいタブよりもはるかに親切です。
フォールバックのキャッシュ
サービスワーカーの install イベントで offline.html ページを事前にキャッシュし、ユーザーがオフラインでどこにも移動していない段階でも、常に利用できるようにしてください。ブラウザーは、次に sw.js が変更されるまでキャッシュを保持します。
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});失敗時の提供
fetch イベントでは、まずネットワークへのアクセスを試み、失敗した場合はキャッシュ済みの offline.html を返します。このパターン（ネットワーク優先 + オフラインフォールバック）は最も簡単な PWA の定石であり、ほとんどのコンテンツサイトで機能します。
self.addEventListener("fetch", (e) => {
if (e.request.mode !== "navigate") return;
e.respondWith(
fetch(e.request).catch(() => caches.match("/offline.html"))
);
});mode による navigate の確認
offline.html へのフォールバックは、ナビゲーションリクエスト（トップレベルのページ読み込み）に対してのみ行ってください。画像、スクリプトなどのサブリソースの fetch では、失敗させるか、リソースごとにキャッシュしたコピーへフォールバックします。存在しない画像の代わりに HTML ページを返すと、ページがさらに壊れてしまいます。
オフラインページの設計
オフラインページは軽量に保ってください。CSS は最小限にし、外部アセットはそれ自体もキャッシュされている場合を除いて使用しないようにします。ブランドロゴ、親しみやすいメッセージ（「オフラインです。再接続するとコンテンツが読み込まれます」）、および location.reload() を呼び出す再試行ボタンを表示してください。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
<h1>You're offline</h1>
<p>This page is unavailable without an internet connection.</p>
<button onclick="location.reload()">Try again</button>
</body>
</html>訪問済みページのキャッシュ
単一のオフラインページに加えて、stale-while-revalidate またはランタイムキャッシュ戦略を使い、正常に読み込まれたページをキャッシュできます。最近表示した記事であれば、ネットワークがなくてもコンテンツを表示でき、失敗するのは未訪問のページだけになります。
キャッシュバージョンの更新
offline.html を更新したら、sw.js の CACHE 定数を変更します（CACHE = "v2"）。activate イベントでは、古いキャッシュを削除してください。caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))) のように記述できます。古いオフラインページが残っていると、ユーザーを混乱させます。
オフラインのテスト
Chrome DevTools の Network パネルにある「Offline」スロットリングを使うと、ネットワークがない状態をシミュレートできます。アプリ内を移動し、未訪問のルートではオフラインページが表示され、以前に訪問したページはキャッシュから読み込まれることを確認してください。
サブリソースの読み込み失敗
オフラインページ自体がキャッシュされていない CSS ファイルを参照していると、オフライン時にそのファイルの読み込みに失敗し、ページがスタイルなしで表示されます。インストールハンドラーで、オフラインページに必要なすべてのアセット（CSS、ロゴ、フォント）を事前にキャッシュしてください。
静的なオフライン対応を超えて
高度な PWA では、Background Sync を使ってオフライン中のユーザー操作をキューに入れ、接続が戻ったときに再試行し、その間は楽観的 UI を表示します。Workbox ライブラリはこれらのパターン用のレシピを提供しています。自分で実装することも可能ですが、より多くの作業が必要です。
接続の復旧
オフラインページで online イベントを監視すると、再接続を検出できます。window.addEventListener("online", () => location.reload()) のように記述します。接続が戻ると、ユーザーが再試行ボタンをタップしなくてもページが直ちに再読み込みされます。
誠実な再試行
「もう一度試す」ボタンは、実際に再試行するようにしてください。何もしない偽のスピナーではなく、location.reload() を呼び出します。誠実な UI はユーザーの信頼を維持しますが、ユーザーが気づけば、欺瞞的なオフラインページはすぐに信用を損ないます。
理解度チェック
offline.html のフォールバックは、すべての失敗したリクエストではなく、ナビゲーションリクエスト（e.request.mode === "navigate"）に対してのみ返すべきなのはなぜですか？
まとめ
サービスワーカーを使うと、ブラウザーの一般的なエラーの代わりにカスタムのオフラインフォールバックページを表示できます。install で offline.html を事前にキャッシュし、ネットワークに失敗したナビゲーションリクエストに対して fetch で提供してください。ページは自己完結させ、更新時に備えてキャッシュをバージョン管理し、自動再読み込みのために online イベントを監視します。DevTools のオフラインスロットリングでテストしてください。
よくある質問
「オフラインフォールバックページ」レッスンは無料ですか？
はい。「オフラインフォールバックページ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「オフラインフォールバックページ」で何を学びますか？
ユーザーがオフラインのときにキャッシュ済みのフォールバックページを提供します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「オフラインフォールバックページ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Web App Manifest
- HTMLからのService Worker登録
- テーマカラーとアプリアイコン
- オフラインフォールバックページ