「ホーム画面に追加」機能の実装
スマートフォンでサイトを見ている時に、画面下部から「ホーム画面に追加」とメッセージが表示されることがありませんか？
こちらの実装方法をご紹介します。
アイコン画像さえ準備できれば3分程度で設定できます。
PWA化すればOK。PWAとは。
ブログなどのウェブサイトをアプリケーション化する技術「PWA（Progressive Web Apps）」を使うことで『ホーム画面に追加』することができます。
無料プラグイン「Super Progressive Web Apps」で簡単に設定できます。
無料プラグイン「Super Progressive Web Apps」
「Super Progressive Web Apps」という無料プラグインを利用することで、簡単に対応することができます。
設定方法
Super PWA 設定例
Application Name（アプリ名）
「ワーカホリックダイアリー」
Application Short Name（アプリ略称名）
「ワーカホ」(アイコンの下部に表示されます)
Description（説明）
「ワーカホリックから抜け出すヒント」
Application Icon（アプリアイコン）
「（192x192 のPNG画像ファイル）」
Splash screen Icon（起動画面のアイコン）
「（512x512 のPNG画像ファイル）」
Background Color（背景色）
「（起動画面の背景色）」
※デフォルト色（#d5e0eb）で良いと思います。
Theme Color（テーマカラー）
「（ブログのテーマ色）」
Start Page（開始ページ）
「ーHomePageー」
※ルートパスであるHomepageで良い。
Offline Page（オフラインページ）
「Default」
Orientation（方向）
「Portrait（縦画面表示）」
※Landscape（横画面表示）or Follow device Orientation（端末設定に従う）
Display（表示）
「Minimal UI」
※デフォルトStandalone(ほぼ全画面、ステータスバーは残る)。fullscreen(完全な全画面表示、ステータスバーは表示しない)、Minimal UI(基本的にブラウザ表示、ブラウザヘッダー省略表現) browser(ブラウザ表示)。
「ホーム画面に追加」についての実装方法についてでした。
以上、ワーカホリックダイアリーでした。