beta

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

SPAサイトを多言語化した時に、PWA(Service Worker)が想定したファイルをキャシュしてくれなくて困ったので備忘録として残しておきます。

公開日:2019年12月6日

多言語化サイトと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」ボタンでサイト全体のキャッシュをクリアしましょう。


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

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード