HUGOサイトをPWA対応させる方法

今回はHUGOで構築したサイトをPWA(Progressive Web Apps)する方法を紹介します。

PWAはGoogleが提供するSEO内部対策ツールのlighthouseでもチェックされる項目です。

比較的にカンタンに実装できて効果も恒久的なので、SEOを意識する場合が実装しておくのが良いでしょう。

PWAの基本をカンタンにおさらいしつつ、HUGOで構築したサイトにPWA対応する方法を解説していきます。

HUGOで構築したサイトをPWA(Progressive Web Apps)対応する方法

PWAの基本

PWAはWebアプリをネイティブアプリのように使う機能です。

通常アプリを作るとなるとある程度の工数がかかりますが、WebサイトをPWA化してアプリのように使う場合はネイティブの制作と比較して少ない工数で実装できます。

PWA化するとネイティブアプリのようにサイトを表示させたりでき、アドレスバーの表示を隠したりできます。

とりあえずPWA化というだけなら、2つファイルを用意するだけで実装できます。

HUGOで構築したサイトをPWA化するのに必要なアプローチ

HUGOで構築したサイトをPWA化するのも、その他の方法で作成したサイトをPWA化するのと何ら変わりません。

以下の3つを満たせば、PWA対応がされます。

• 常時SSL化（常時HTTPS化）
• manifest.jsonの作成
• Service Workerの設定

次のセクションで実際の設定方法を解説していきます。

HUGOで構築したサイトを実際にPWA対応していく

では、実際にHUGOで構築したサイトをPWA化していきましょう。

• 常時SSL化（HTTPS化）
• manifest.jsonの作成
• Service Workerの設定

以下の順番で説明します。

常時SSL化（HTTPS化）

HUGOでサイト構築している場合の大半はホスティングサービスをつかっていると思います。

「お使いのホスティングサービス名 SSL化」で検索したら、対応方法が出てくるでしょう。

このサイトはCloudflare Pagesで作成し、Cloudflare Registrarでドメインを取得していますが、その場合は最初から常時SSL化されていました。

manifest.jsonの作成と設定

まず、manifest.jsonファイルとアイコン画像を作成しましょう。

manifest.jsonは、Web App Manifest Generator というツールで作成すると便利です。
最終的には手作業で項目を設定する必要がありますが、最低限の項目を最初に設定するには使えます。

512×512pxのアイコンを一緒にアップロードすると、アイコン画像が生成され、manifest.jsonのアイコンに関する記述も一緒にやってくれます。
ただし、アイコンのパスは修正する必要があります。

manifest.jsonの各パラメータ詳細は、mdn web docs を参照ください。

完成したmanifest.jsonファイルと、アイコン画像はHUGOのstaticフォルダに格納しましょう。
これで、manifest.jsonとアイコン画像の準備は完了です。

logoをひとつmaskable対応しておかないと、lighthouseでアラートが出るので、別途用意しておくのがオススメです。

maskableロゴの作成はMaskable.appエディタ が便利です。

一応当サイトでの設定も載せておきます。

{
  "name": "アロハル",
  "short_name": "アロハル",
  "theme_color": "#1242b3",
  "background_color": "#f7f7f7",
  "display": "standalone",
  "start_url": "/",
  "icons": [{
      "src": "/image/logo/logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/image/logo/logo-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/image/logo/logo-144.webp",
      "sizes": "144x144",
      "type": "image/webp"
    },
    {
      "src": "/image/logo/logo-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/image/logo/maskable_icon.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

作成したmanifest.jsonを全ページで読み込む必要があります。

head.htmlに以下を追加して読み込むようすれば、manifest.jsonが読み込まれるようになります。

<link rel="manifest" href="/manifest.json">

manifest.jsonの設定ができているかは、Google Chromeのデベロッパーツールで確認できます。

Application欄のManifestを開いて、写真のように設定内容が反映されていればOKです。

サービスワーカー（Service Worker）の設定

manifest.jsonの設定が終わったら、サービスワーカー（Service Worker）を設定しましょう。

サービスワーカー用のjsファイルを作成し、スクリプトで読み込むようにします。

PWAにとりあえず対応させるだけなら以下のコードで大丈夫です。

self.addEventListener('fetch', function(event) {});

スクリプトの読み込みは、head内でもbody内でも構いません。
私はbodyの最下部で読み込ませています。

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
    }
  </script>

ここの設定でひとつ注意があります。
それは、sw.jsをstaticフォルダ直下に置くことです。
manifest.jsonのscope範囲との問題のようで、static直下に置かないと上手く動作しません。

最初、static/jsに設置したら動作せずハマり、リサーチしたところstatic直下に置かないとダメということが判明しました。

ここまでやったら、lighthouseでサイトをチェックしてみましょう。

PWAは常時SSL化が必須要件なので、ローカルサーバーでは確認できません。
本番環境にビルドして確認しましょう。

パソコン内ローカルサーバーなら確認できて、自宅LAN内でのローカルなら確認できません。

無事にPWA化できていると、lighthouseのPWAの項目が緑になります。

まとめ：HUGOサイトのPWA化はサービスワーカーの設定がキモ！

PWA化はハードルが高そうに見えますがHUGOで実装する場合は、menifestとService Workerの2つを設定するだけで大丈夫です。

Service Workerの設定も、sw.jsをstaticフォルダ直下に置けばハマる可能性も限りなく低く導入できます。

ローカルでは常時SSL化に関する項目でエラーが出るので、最終チェックは本番環境にビルドして行えばバッチリです。