HugoサイトのPWA対応
1. Hugoで構築したサイトをPWA化 1-1. PWAとは PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。 PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。 Web アプリ マニフェストを追加する方法 本サイトでは、トップページのみPWA化となります。 1-2. 手順 manifest.webmanifestの作成
icon画像の作成
icon画像の配置
manifest.webmanifestの修正と配置
ブラウザでmanifest.webmanifestの内容が表示されていることを確認
Service Workeの作成
Service Workeの配置と確認
1-3. manifest.webmanifestの作成 Simi Cartのサイトは、PWA マニフェスト ジェネレーターとして「Web アプリ マニフェスト」と、PWA 用にサイズが最適化されたアイコンを自動的に生成してくれます。 display:standaloneとしました。 Web アプリを開いて、スタンドアロン アプリのようなルック アンド フィールにします。アプリは、ブラウザーとは別の独自のウィンドウで実行され、URL バーなどの標準のブラウザー UI 要素を非表示にします。
scope:ブラウザーがアプリ内にあると見なす URL のセットを定義し、ユーザーがいつアプリを離れたかを判断するために使用されます。scopeは、Web アプリのすべてのエントリ ポイントと出口ポイントを包含する URL 構造を制御します。scope,scope,start_url,scope内に存在している必要があります。
