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内に存在している必要があります。
scope が相対 URL である場合、ベース URL はマニフェストの URL になります。
スコープは、ナビゲーションを現在のサイトに制限します。
"scope": "https://example.com/" ナビゲーションを現在のサイトのサブディレクトリーに制限します。 "scope": "https://example.com/subdirectory/" (注意)scope:ユーザーがアプリ内で の外部に移動するリンクをクリックするscopeと、リンクが開き、既存の PWA ウィンドウ内でレンダリングされます。 target="_blank"リンクをブラウザー タブで開く場合は、タグに追加する必要があります。Android では、リンクはChrome カスタム タブ**target="_blank"**で開きます。 { "theme_color": "#a4115e", "background_color": "#f2f4f4", "display": "standalone", "scope": "https://raizin.
