Faviconの画像がjpg形式だとPWA(Progressive Web Apps)化が失敗する件

2021年7月23日2023年3月17日

こんにちは、その日暮らしです。

今日は、このブログサイトをPWA(Progressive Web Apps)化しようとしたところ、Faviconの画像がjpg形式だったことが原因で失敗した件について書いてみたいと思います。

結果としては、Faviconの画像をpng形式で作り直してWordPressへアップロードし、めでたくPWA化が完了しました。

Faviconの画像の形式が原因でPWA化が失敗するなんてブログ初心者だと見当もつきませんよね。

需要があるかどうかわかりませんが、今回の体験談を記事にしてシェアしておきたいと思います。

---

PWAとは

そもそもPWAとはなんでしょうか。

以下は、ググって一番最初にヒットしたWebサイトで書かれていたことです。

「WebサイトやWebアプリをネイティブアプリのようにインストール可能にする技術」

https://www.sbbit.jp/article/cont1/35949

もうちょっとググってみた結果を自分なりに解釈すると、PWAに対応したWebサイトでは、メニューにインストールを促すボタンが表示され、そのボタンを押してインストールし起動すると、Webサイトのコンテンツがキャッシュの形でローカルに配置されて、まるでネイティブアプリを使ってるかのように元のWebサイトを高速にブラウズできるようになるのだそうです。

それと、通常のWebサイトではできないプッシュ通知が使えるので、新着情報といったものをユーザーに送れるようになるんだとか。

物は試しなので自分のブログサイトをPWA化してみようと思います。

PWA化してみる

使ってるテーマLuxeritasには、1クリックでPWA化できる機能が備わってます。操作方法は、WordPress管理画面の「Luxeritas」メニューから「カスタマイズ」と進んで「PWA」タブにある「PWA ( Progressive Web Apps ) 有効化」をオンにするだけです。

PWA化を確認

ちゃんとPWA化できてるかどうかLighthouse(Webページを4つの視点で監査するブラウザ上のツール)で確認してみます。

実際にブログサイトをPWA化したものをインストールして確認しないのは、Webブラウザでブログサイトを開いたときにメニューに出てくるはずのインストールボタン「⊕」がなぜか出てこなかったからです。使ったWebブラウザがパソコン版のFirefoxだったからなのかもしれません(後日パソコン版のChromeで試したらインストールできた)。

まあ、ちょっと試すだけだからLighthouseでの確認でいいかなと。。。

で、Microsoft Edge(Google ChromeでもOK)を立ち上げ、自分のブログサイトのトップページを開いた状態でF12キーを押して「DevTool」を開き上部の「>>」をクリックするとプルダウンメニューが出てくるので「Lighthouse」をクリックします。そして、「レポートの生成」をクリックすると監査が始まります。

PWA化失敗

めでたく成功・・・あれっ失敗？ PWAのアイコンがグレーになっています。

えっ、なんで？ と、Failure reasonを見ると「Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least 144 px is required ・・・」とあります。Manifest(ってなに？)に適切なアイコンが含まれていないとあります。最低144pxのPNGかSVGかWebP形式の画像じゃないと駄目ともあります。なにか足りない物があるのか、画像形式が間違っているのか、このメッセージだけではわかりません。ただ、WordPressのメディアライブラリにアップロードした画像は全部pngだったはず。

Faviconを再登録

おかしいなと思ってWordPressの管理画面でメディアライブラリを眺めてみるとなぜかFaviconだけjpg形式でした。

ほんとにこれが原因？

気を取り直してMicrosoft謹製のペイントを使ってFaviconをpng形式で作り直します。

でも、ほんとにこれが原因？ 疑念がわきます。

作り直したFaviconをWordPressの管理画面で登録します。

PWA化成功

予想に反して今度はめでたくPWA化が成功しました！

しかし、なんなんでしょうか。なんでjpgじゃ駄目なの？

まあ、解決してよかったのですが、世の中なにがきっかけで解決するかわからないものですね。

PWAを使ってみる(2021/10/2追記)

上の方でパソコン版のFirefoxでインストールボタンが出てこなかったと書きましたが、パソコン版のChromeで試したところ、今度はインストールボタンが出てきてインストールまでできました。

起動してみてブラウズの速度をWebブラウザの場合と比べてみたのですが(PWAの方をちゃんとキャッシュさせてから)、あまり違いはわかりませんでした。レンタルサーバが高速なConoHa Wingだからなのかもしれませんね。

以上、「Faviconの画像がjpg形式だとPWA(Progressive Web Apps)化が失敗する件」でした。

---

この記事を書いた人

---