Hugoで構築したサイトをPWA(Progressive Web Apps)に対応するために取り組んだことのメモ

manifest.jsonを簡単に書く

簡単に書くというか、生成してくれるサイトに丸投げしてみた

Web App Manifest Generator

「Generate Icons」にアイコン画像をアップロードすると、必要となるサイズのアイコン画像も生成してくれる

[GENERATE.ZIP]ボタンをクリックすると、取りまとめられた素材がダウンロードできる

サイトに取り込む

1. Web App Manifest Generatorで[GENERATE.ZIP]ボタンをクリックしてダウンロードできた素材を解凍する
   
2. Hugoサイトの「static」フォルダに「site_icons」フォルダを作成して、解凍したアイコン画像をコピーする
   
3. Hugoサイトの「static」フォルダに「manifest.json」ファイルをコピーする
   
4. 「manifest.json」のアイコン画像のパスを変更する
   

取り込んだ結果

Google Chromeのデベロッパーツールの「Application」タブで確認してみました

faviconのためのアイコンも含まれています