この記事では、PWA設定について解説しています。
PWAとは
PWA(Progressive Web Apps)とは、モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組みのことです。
レスポンシブデザイン、HTTPS化といったGoogleが定める要素を備えたWebサイトで、PWAを実装することで、プッシュ通知やホーム画面へのアイコン追加など、アプリのような機能をWebサイトに持たせることができるようになります。
どこで設定するの?
外観 > カスタマイズ > PWA設定 で行います。
PWA機能の設定
PWA機能を有効化するか選択
PWA機能を使うかどうか選択します(デフォルトは「無効」になっています)。
「有効」にすると、スマホ表示時にホーム画面へ追加ボタンが表示されます。
「ホーム画面にサンプルサイトを追加」の「サンプルサイト」の部分は、あなたのサイト名が表示されます。
「ホーム画面に追加」ボタンをタップすると、最終確認のメッセージが表示されます。
「ホーム画面に追加」ボタンに表示されるサイト名を変更したい場合は、次の設定項目「ホーム画面のアイコン下テキスト入力」で行います。
PWA用のアイコンを設定していない場合は、WordPressのアイコンが表示されます。
ホーム画面のアイコン下テキスト入力
スマートフォンのホーム画面に表示されるアイコン下のテキストを設定します。入力するとアイコン下に表示せれているテキストが変更されます。
アイコン下テキストのイメージ
PWAのキャッシュをクリアする
PWA機能を有効にするとキャッシュの利用ができるようになります。キャッシュによってページ表示速度が速くなり、ユーザーがページ移動しやすくなります。
サイトに大幅な変更(デザインなど)があった場合には、キャッシュをクリアすることで新しい情報に更新されます。
アイコンの設定
スマホのホーム画面などで使用されるアイコンの設定を行います。設定するアイコンのサイズは、「72px × 72px」「192px × 192px」「512px × 512px」の3種類です。
「画像を選択」をクリックするとメディアライブラリが表示されるので、設定したい画像を選択します。
アイコンを設定するとどこが変わるの?
WordPressのアイコンがオリジナルのアイコンに変更されます。