PWAをオフライン対応させるには？Service Workerとキャッシュの基本をやさしく解説

結論：PWAのオフライン対応は、必要なファイルを先に保存しておく仕組み

PWAをオフラインでも使えるようにするには、Service Workerという仕組みを使います。

ざっくり言うと、HTML、CSS、JavaScript、画像などをブラウザ側に保存しておき、通信がないときでもその保存済みファイルを使って表示する仕組みです。

つまり、PWAのオフライン対応は「ネットがなくても魔法のように動く」というより、「必要なものを先にキャッシュしておく」ことで成立しています。

オフライン対応で必要になるもの

PWAをオフライン対応させるときに、最低限考えるものは主に3つです。

• Service Worker
• Cache API
• キャッシュするファイル一覧

Service Workerは、ページとネットワークの間に入る裏方のような存在です。

ページがファイルを読み込もうとしたときに、「ネットから取るか」「保存済みのキャッシュから返すか」を判断できます。

Service Workerは何をしているのか

Service Workerは、通常のJavaScriptとは少し違います。

ページ上のボタンを動かすためのJavaScriptではなく、通信やキャッシュを管理するためのJavaScriptです。

例えば、最初にサイトを開いたときに必要なファイルをキャッシュしておけば、次回以降は通信が不安定でもページを表示できます。

ここがPWAらしい部分です。

実際に作って感じたこと

自分でOJ-Passを作ったときも、オフライン対応はかなり意識しました。

OJ-Passは、マスターキー、サービス名、作成月からパスワードを再生成するツールです。

こういうツールは、できれば通信なしで動いてほしいです。

毎回サーバーに何かを送るより、ブラウザ内だけで完結して、オフラインでも使える方が安心感があります。

そのため、index.html、CSS、JavaScript、アイコンなど、動作に必要なファイルをService Workerでキャッシュする形にしました。

キャッシュするファイルを間違えると動かない

オフライン対応でよくある失敗が、「必要なファイルをキャッシュし忘れる」ことです。

HTMLだけ保存しても、CSSがなければデザインが崩れます。

JavaScriptを保存していなければ、ボタンや計算処理が動かないこともあります。

アイコンや画像を使っている場合は、それらも必要に応じてキャッシュ対象に入れる必要があります。

つまり、オフライン対応では「そのページが動くために必要なものを全部見直す」ことが大事です。

全部キャッシュすればいいわけではない

ただし、何でもかんでもキャッシュすればいいわけではありません。

更新が多いデータや、毎回新しい情報を取得したいページまで強くキャッシュすると、古い表示が残りやすくなります。

例えばニュース、在庫情報、ログイン後の個人データなどは、キャッシュの扱いに注意が必要です。

逆に、計算ツール、メモ的なツール、説明ページ、固定のUIなどは、オフライン対応と相性が良いです。

PWAのオフライン対応に向いているもの

• 計算ツール
• パスワード生成ツール
• メモ系ツール
• チェックリスト
• 説明書やマニュアル
• 固定内容のWebアプリ

こうしたものは、一度読み込めばしばらく同じ内容で使えるため、キャッシュとの相性が良いです。

OJ-Passのような「保存しない」「送信しない」「ブラウザ内で完結する」ツールは、PWAのオフライン対応とかなり相性が良いと感じています。

オフライン対応しても万能ではない

PWAをオフライン対応させても、すべての機能が完全に使えるとは限りません。

サーバーに問い合わせる処理、ログイン、決済、外部APIを使う機能などは、通信が必要になることがあります。

なので、「どこまでをオフラインで使えるようにするか」を先に決めておくことが大切です。

トップ画面だけ表示できればいいのか、ツールとして完全に動かしたいのかで、設計は変わります。

確認するときのポイント

• Service Workerが登録されているか
• 必要なHTML、CSS、JSがキャッシュされているか
• 画像やアイコンも必要に応じて保存されているか
• 通信を切った状態で実際に開けるか
• 更新したときに古いキャッシュが残りすぎないか

特に最後の「古いキャッシュが残る問題」は、PWAを作っているとかなり出会います。

オフライン対応できたと思ったら、今度は更新が反映されない、ということもあります。

ここはPWAの便利さと難しさがセットになっている部分です。

関連記事

PWAの基本から知りたい場合は、PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説が参考になります。

実際の作り方を先に見たい場合は、PWAの作り方｜manifest.json・Service Worker・ホーム画面対応を丁寧に解説もあわせて読むと流れが分かりやすいです。

キャッシュの考え方をもう少し深く知りたい場合は、PWAのキャッシュ戦略を完全に理解するも近い内容です。

まとめ

PWAをオフライン対応させるには、Service Workerを使って必要なファイルをキャッシュする必要があります。

大事なのは、何を保存して、何を通信で取りに行くのかを分けて考えることです。

うまく設計できると、Webページなのにアプリのように使える感覚が出ます。

特に、通信しなくても成立する軽量ツールでは、PWAのオフライン対応はかなり強い武器になります。