Service Workerのキャッシュを簡単管理するPukiWikiプラグイン
ウェブサイトの高速化技術として、最近注目されているのがService Workerという仕組みです。これは、ブラウザがバックグラウンドで動かすプログラムで、一度ダウンロードしたCSS/JavaScript/画像などをブラウザに保存しておいて、2回目以降のアクセス時に再利用するというものです。
このサイト（oncologynote.jp）でも実装したところ、リピーター訪問時の表示速度が5〜8倍ほど高速化されました。ただ、この仕組みには運用上の課題があります。サイトのデザインを変更してCSSファイルを更新したとき、訪問者のブラウザは古いキャッシュを使い続けてしまうのです。今回、この問題を解決するプラグインを作成したので、記録として残しておきます。
プラグインのダウンロードと設置方法
ダウンロード
設置方法の解説
解説
Service Workerとキャッシュ更新の問題
Service Workerの仕組みを簡単に説明します。訪問者が初めてサイトにアクセスしたとき、ブラウザはCSS/JavaScript/画像などをダウンロードして、それをブラウザ内のキャッシュストレージに保存します。2回目以降のアクセスでは、サーバーにアクセスせずにキャッシュから読み込むため、表示が劇的に速くなるわけです。実測では、初回訪問時に2.2秒かかっていたページが、2回目以降は0.4秒で表示されるようになりました。転送量も150KBから8KBに削減されるため、モバイル通信量の節約にもなります。
しかし、この仕組みには落とし穴があります。サイト管理者がCSSファイルを更新してデザインを変更しても、訪問者のブラウザは古いCSSをキャッシュから読み込み続けてしまうのです。つまり、サイトのデザインを変更したつもりなのに、リピーターには以前のデザインが表示され続けるという現象が起こります。これは、Service Workerが「一度キャッシュしたファイルは、明示的に更新指示が出るまで使い続ける」という設計になっているためですね。
この問題を解決するには、Service Workerファイル（通常は sw.js というファイル名）の中にある CACHE_VERSION という値を変更する必要があります。たとえば `const CACHE_VERSION = '20251026-v2';` という行を `const CACHE_VERSION = '20251026-v3';` に変更すると、訪問者のブラウザは「キャッシュバージョンが変わった」と認識して、古いキャッシュを削除し、新しいファイルをダウンロードします。つまり、CSS/JavaScriptを更新するたびに、この CACHE_VERSION の値も手動で変更しなければならないわけです。
従来の方法と課題
これまでの運用では、サイトを更新するたびに以下の手順が必要でした。まず、テキストエディタでsw.jsファイルを開き、CACHE_VERSIONの行を探します。次に、新しいバージョン番号を考えます。日付ベースで管理する場合、「今日は10月26日で、今日2回目の更新だから 20251026-v2 にしよう」といった具合です。そして、ファイルを保存してサーバーにアップロードします。
この作業自体は数分で終わる簡単なものですが、いくつかの問題点がありました。まず、更新を忘れるリスクです。CSSファイルを更新して「よし、デザイン変更完了」と満足してしまい、CACHE_VERSIONの更新を忘れてしまうことがあります。すると、自分のブラウザでは新しいデザインが表示されているのに、訪問者には古いデザインが表示され続けるという事態になります。また、バージョン番号を手動で考えるのも地味に面倒です。「前回は v1 だったか v2 だったか」を確認するために、いちいちファイルを開いて確認する必要があります。さらに、SSH接続してviエディタで編集するという作業自体が、やや敷居の高い作業でもあります（ターミナルの扱いに不慣れな場合は、テキストエディタで修正してFTPで転送するというほうが手間は少ないかもしれません）。
swversion.inc.php の設計
今回作成したプラグイン swversion.inc.php は、この一連の作業をブラウザ上で完結させることを目的としています。管理画面にアクセスして、ボタンをクリックするだけで、CACHE_VERSIONの更新が完了するという仕組みです。バージョン番号は日時ベースで自動生成されるため、人間が考える必要がありません。
使い方は非常にシンプルです。ブラウザで `https://sample_pukiwiki.com/?plugin=swversion` というURLにアクセスすると、管理画面が表示されます。Basic認証でログインしている状態であれば、現在のキャッシュバージョンや、キャッシュされているファイル一覧を確認できます。画面には「Update Cache Version Now」というボタンがあり、これをクリックするだけで更新が完了します。クリックすると確認ダイアログが表示されるので、OKを押せば、新しいバージョン番号が `20251026-154230` のような「年月日-時分秒」形式で自動生成され、sw.jsファイルが自動的に書き換えられます。
プラグインの内部処理を説明すると、まずPHPでsw.jsファイルを読み込みます。次に、正規表現を使って `const CACHE_VERSION = '([^']+)';` という パターンにマッチする行を探し、現在のバージョン番号を取得します。そして、PHPの date() 関数で現在時刻を取得し、`date('Ymd-His')` という形式で新しいバージョン番号を生成します。最後に、preg_replace() 関数で文字列を置換し、file_put_contents() でファイルに書き戻すという流れです。この仕組み自体は50行程度のシンプルなコードですが、管理画面から操作できるという点が重要で、テキストエディタやSSH接続が不要になりました。
セキュリティ対策
このプラグインはファイルを書き換える機能を持っているため、セキュリティには注意が必要です。まず、PukiWikiの PKWK_READONLY モードが有効なときは実行できないようにしています。これは、サイトを読み取り専用モードにしているときは、いかなる変更も許可しないという設計です。次に、Basic認証でログインしていない状態ではプラグインにアクセスできません。つまり、一般の訪問者がURLを知っていたとしても、管理者パスワードを知らなければ何もできないわけです。さらに、更新ボタンをクリックすると、JavaScriptの confirm() 関数で確認ダイアログを表示し、誤操作を防いでいます。
当初の実装では PKWK_SAFE_MODE もチェックしていたのですが、これを有効にしているとプラグインが「Prohibited by admin」というエラーで動作しませんでした。調査したところ、PukiWikiの標準プラグイン（md5.inc.phpなど）も PKWK_READONLY のみをチェックする実装になっていることが分かったため、同様の方針にしました。PKWK_SAFE_MODE は「安全でない機能を無効化する」というモードですが、ファイル書き込み自体は PKWK_READONLY で制御すれば十分という判断です。
複数サイトでの展開
このプラグインは、oncologynote.jpのほかにいくつかのサイトで使用するため4つの環境用にバージョンを作成しました。それぞれのサイトでキャッシュする画像やCSSが異なるため、sw.jsの内容は少しずつ違いますが、プラグイン本体のロジックは共通です。たとえば、oncologynote.jpではTwitterアイコン（twitter_logo2.svg）やcritical.min.cssをキャッシュしていますが、デフォルトPukiWikiでは、PukiWikiロゴ（pukiwiki.png）や標準アイコン（edit.png、diff.pngなど約25個）をキャッシュする設定にしました。
実際の運用での効果
このプラグインを導入してから、サイト更新のワークフローが大幅に改善されました。以前は「CSSを更新したら、sw.jsも編集して、バージョン番号を考えて、サーバーにアップロードして…」という一連の作業を覚えておく必要がありました。しかし今は、CSS更新後にブラウザで管理画面を開いてボタンをクリックするだけです。作業時間は5分から30秒に短縮され、何より更新忘れのリスクがほぼゼロになりました。
管理画面で現在のバージョンが確認できる点も便利です。「あれ、キャッシュバージョンって更新したっけ？」という不安がなくなり、画面を見れば一目で分かります。また、バージョン番号が日時形式になっているため、「この変更はいつ反映されたのか」が記録として残ります。サイトのトラブルシューティングをする際に、変更履歴が追跡できるのは意外と重要ですね。たとえば、訪問者から「デザインがおかしい」という報告があったとき、「10月26日15時42分にキャッシュを更新したので、それ以降にアクセスすれば新しいデザインが表示されるはずです」と正確に答えられます。
今後の可能性
現時点では、Service Workerのキャッシュバージョン管理という特定の用途に特化したプラグインになっています。将来的には、キャッシュ対象ファイルの管理画面からの追加・削除や、キャッシュの強制クリア機能なども考えられるかもしれません。ただ、あまり機能を増やしすぎると複雑になってしまいます。現状のシンプルな「バージョン更新だけ」という設計が、実はちょうど良いバランスなのかもしれないと感じています。
まとめ
Service Workerを導入したPukiWikiサイトで、キャッシュバージョンを簡単に管理できるプラグインを作成しました。従来は手動でファイル編集が必要だった作業が、ブラウザ上でワンクリックで完了するようになり、バージョン番号も日時ベースで自動生成されるため、更新忘れのリスクがほぼゼロになります。oncologynote.jpやデフォルトPukiWikiの3種類のバージョンを作成し、それぞれのサイトで運用を開始しています。Service Workerを使っている方で、キャッシュ管理に課題を感じている方の参考になれば幸いです。
この記事に対するコメント
最新の10件を表示しています。 コメントページを参照
更新日：2025-10-27 閲覧数：740 views.