PWA設定

この記事では、PWA設定について解説しています。

PWAとは

PWA(Progressive Web Apps)とは、モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組みのことです。

レスポンシブデザイン、HTTPS化といったGoogleが定める要素を備えたWebサイトで、PWAを実装することで、プッシュ通知やホーム画面へのアイコン追加など、アプリのような機能をWebサイトに持たせることができるようになります。

どこで設定するの?

外観 > カスタマイズ > PWA設定 で行います。

PWA設定

 

PWA機能の設定

PWA機能設定

 

PWA機能を有効化するか選択

PWA機能を使うかどうか選択します(デフォルトは「無効」になっています)。

「有効」にすると、スマホ表示時にホーム画面へ追加ボタンが表示されます。

PWA ホーム画面追加ボタンイメージ

「ホーム画面にサンプルサイトを追加」の「サンプルサイト」の部分は、あなたのサイト名が表示されます。

「ホーム画面に追加」ボタンをタップすると、最終確認のメッセージが表示されます。

ホーム画面に追加

 

「ホーム画面に追加」ボタンに表示されるサイト名を変更したい場合は、次の設定項目「ホーム画面のアイコン下テキスト入力」で行います。

PWA用のアイコンを設定していない場合は、WordPressのアイコンが表示されます。

ホーム画面のアイコン下テキスト入力

スマートフォンのホーム画面に表示されるアイコン下のテキストを設定します。入力するとアイコン下に表示せれているテキストが変更されます。

アイコン下テキストのイメージ

アイコンのイメージ

PWAのキャッシュをクリアする

PWA機能を有効にするとキャッシュの利用ができるようになります。キャッシュによってページ表示速度が速くなり、ユーザーがページ移動しやすくなります。

サイトに大幅な変更(デザインなど)があった場合には、キャッシュをクリアすることで新しい情報に更新されます。

アイコンの設定

PWAアイコンの設定

スマホのホーム画面などで使用されるアイコンの設定を行います。設定するアイコンのサイズは、「72px × 72px」「192px × 192px」「512px × 512px」の3種類です。

「画像を選択」をクリックするとメディアライブラリが表示されるので、設定したい画像を選択します。

PWA画像の設定

アイコンを設定するとどこが変わるの?

WordPressのアイコンがオリジナルのアイコンに変更されます。

アイコンのイメージ

スポンサーリンク