【PWA】アイコンが404(Not found)で読み込めない

はじめに

とあるサービスをPWA化しようとした時、なぜかアイコンが読み込めずService Workersが起動しない問題にぶち当たったのでメモ。

本題

原因

アイコン画像を「icons」フォルダに入れていたのが原因でした。

Apacheサーバで運用されている場合、公開ディレクトリ直下に「icons」というフォルダを作って読み込もうとすると、Apacheのデフォルトページ用に用意されている「icons」フォルダを参照してしまう。

Apacheの設定ファイル内でそういうエイリアス設定がされているようです。

解決方法

PWA用に用意した「icons」というフォルダの名前を変更する。例えば「pwaicons」など。

同時に、manifest.jsonファイルで設定しているアイコン読み込み先のパスも修正。

余談

PWA関係なく普通のサイト制作時に「icons」というフォルダを用意して画像などを読み込もうとした場合もNot foundになると思います。

例えば、当サイトのURL「https://studio-yas.jp/」の後ろに「icons」を付けて、「https://studio-yas.jp/icons/%E3%80%8D%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E3%81%A8%E3%80%81Apache%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%81%AE%E7%94%BB%E5%83%8F%E3%83%AA%E3%82%B9%E3%83%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%84%E3%81%BE%E3%81%99%E3%80%82%EF%BC%88%E3%81%93%E3%82%8C%E3%81%AF%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E7%9A%84%E3%81%AB%E3%81%82%E3%81%BE%E3%82%8A%E3%82%88%E3%82%8D%E3%81%97%E3%81%8F%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%A7%E3%81%99%E3%81%8C%E2%80%A6%EF%BC%89

まとめ

Apacheサーバでそういう設定がされている事を今回はじめて知りました（恥）

VPSなどで運用している場合は、Apacheの設定を見直してエイリアス設定を解除した方がいいようですが、今回はXSERVERでの運用だったので、フォルダ名の変更で対処しました。ちなみにXSERVERはNginxを採用していますが、内部でApacheが動いています。