ホームページのPWA化で、つまずいた。

PWA化は、簡単と書いてあった。「プラグインを使えば、簡単に出来る。このテーマ使っているなら、設定だけで、簡単にできる。」と、あっちこっちのページに、書いてあった。

簡単なんだー。こんな感じで取り組んだが、エラーで4日が過ぎた。

エラーの表示

Installability
A Manifest does not contain a suitable icon – PNG, SVG or WebP format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include “any" or “maskable".

Google Chromeで検証すると、こんな英語が出て来る。「小さいサイズのアイコンが有るから、ダメねー」って感じ。

そこで、小さいアイコンを外そうとしたが、小さいアイコンを外せなかった。不可だった。手を加えれば加えるほど、エラーが増える感じだった。まさに、深みにはまる感じ。ドツボにはまってどっぴんしゃん。これで3日、悩みました。

そこで、画像なしで、PWAを試した。エラー無く動いた。マニフェストの中身を見る。画像がPNG形式だった。そこで、アイコンの画像をPNG形式の変換して、PWAを試したら、エラー無く動いた。上手く行く時は、こんな感じだ。

アイコン画像は、PNG形式が必要なのだ。jpeg形式は、不可なのだ。アイコンにjpgは、不可なのだ。

 

Posted by 店主「さんどう」