多言語SPAサイトでPWA(Service Worker)を使う時はファイルパスに注意

多言語化サイトとSPA

多言語化サイトをSPAで行う際、ルーティング的には

• サブディレクトリ型（example.com/en/）
• サブドメイン型（en.example.com/）

にするのが一般的かと思いますが、リソースを統一するためにも、SPAの核となるファイル（JSやCSSなど）は共通のものを呼び出したいところです。

そうなると、それぞれ違うドメイン、ディレクトリで展開しているので、ApacheなどのWebサーバー側でリダイレクトをするかと思います。

PWAが読み込むindex.htmlとブラウザのルートが違う件

問題は全てここに集約されるのですが、Webサーバーでリライトをする際に、

/en/ => /index.html

といった設定をして、ブラウザからだとそれでうまくいきます。

しかし、ブラウザをリロードしてみると、エラーになったり、別のファイルを読んだりします。これはService Workerが読み込むのは、「/」ではなくて、ブラウザがURLを解釈した後の「/index.html」をロードしているからです。

つまり、リライトする際は、

/en/ => /index.html
/en/index.html => /index.html

この二つが必要になります。

設定を修正したらキャッシュを全てクリアする

Service Workerのキャッシュは、かなり強力に効くため、修正してキャッシュ無効リロードをしてもindex.htmlがService Workerからロードされてしまうことが多々あります。

これだと修正されているのかが確認できないので、修正後のブラウザチェック時は、開発者ツールの「Application > Clear Storage」から「Clear Site Data」ボタンでサイト全体のキャッシュをクリアしましょう。

簡単なことですが、忘れると意外とハマるので、自分用の備忘録として残しておきました。