WordPressでPWAを有効にする人気のプラグイン3種・比較と設定~動作確認方法


 

PWAって?

PWAとはサイト内で、AppStoreなどを経由することなくインストールでき、スマホアプリのような機能を実現する技術です。ユーザーにとっては読み込みが速い(高速表示)事や、オフラインでも閲覧でき、アイコンから簡単にアクセスできるメリットがあります。

 

PWA(Progressive Web Apps/プログレッシブ ウェブ アプリ)

プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

引用元:はじめてのプログレッシブウェブアプリ(Google公式)

 

ブラウザやOSで違いは?

Firefox、Chrome、BlinkベースのブラウザーはPWA技術に対応。
マイクロソフトはEdgeでの対応に取り組み。
アップルはiOS  Ver.11.3 から不完全ながら対応。

今のところブラウザーによって対応は様々ですが、ブラウザにさほど関係ないとも言えます。

PWAアプリは、PWA技術に非対応のブラウザーでも動作する

 

但し、Androidでは全く問題ありませんが、iOsではまだまだ未対応な部分多し

 

※プッシュ通知(「ホーム画面に追加」)が出るのは、初めてサイトを訪れた時ではなく、複数回目の訪問時になります。タイミング(訪問回数や間隔の条件)はブラウザの仕様による差があります。

 

iOSはプッシュ通知に未対応、前のページへ戻る事もできなかったのですが、Ver.12..2~「スワイプで戻る」ことは出来るようになり、今後も対応機能が増えることに期待。

 

ルクセリタスをお使いの方へ

ルクセリタスには標準の機能でPWA対応ありですので、プラグインは不要

設定方法は以下をご覧ください。

ルクセリタス・PWAの設定方法と動作確認の仕方
ルクセリタスにはPWA機能がありますが、ワードプレスのテーマでPWA機能が標準搭載されているのは、おそらくルクセリタスが世界で初めてだそうです。 はじめに この「PWA」、スマホやタブレット端末で便利に使えるようですが、当サイトはほとんど関...

 

準備

SSL化が必要

push通知を行う為にはSSL接続が必須で、PWAを有効にする際にはSSL化されている事が前提になります。

 

SSL化されていない場合は以下をご覧ください。

SSL化手順・サイトをHTTPS対応に設定するとメリットしかない!?
HTTPS対応とは HTTPS(ハイパーテキスト転送プロトコル セキュア)対応とは、サイトの安全性を高めるセキュリティ強化設定です。 「Google Adsence」で以下のような表示が出たので、対応することにしました。  サイトをHTTP...

PWA プラグイン

いずれも簡単にPWAを実装できるプラグインです。

 

記事作成時点でインストール数・評価数の多い順に、独自の特徴があれば簡単に記載しています。

 

設定をしてみて一番簡単だったのは1つ目の「Super Progressive Web Apps」。インストール数が圧倒的多数なのは、数分で完了するからのようです。

 

機能が充実しているのは2,3番目ですが更に日本語対応している3つ目の「PWA for WordPress」は、わかりやすい上、キャッシュの設定も細かくできたり、プラグインを停止しなくてもPWAの稼働・停止切り替えがワンクリックで出来る機能があります。

 

 

Super Progressive Web Apps

 

Super Progressive Web Apps

 

特徴

  • インストール数は圧倒的に多い
  • 非常に簡単な設定で完了
  • キャッシュ優先
  • キャッシュ有効時間の設定は無し

設定

 

  • Application Name
    サイトネーム(ホーム画面への追加バナーに表示)
  • Application Short Name
    サイトネーム ショート(アプリ下に表示される)
  • Description
    アプリ(サイト)の説明文(キャッチフレーズ)を入力
  • Application Icon
    アプリのアイコン画像を選択(192×192)
  • Splash Screen Icon
    アプリ起動時(ローディング)に表示されるアイコン画像を選択(512×512)
  • Background Color
    アプリ起動時の画面背景色
  • Theme Color
    画面のステータスバーの色等
  • Start Page
    初期値はトップページ、固定ページから選択可能(アプリ起動後に表示されるページ)
  • Offline Page
    初期値でOK、固定ページから選択可能(未キャッシュページにリンクした場合のリダイレクト先)
  • Orientation
    デバイスを縦横にしたときの画面回転など可能にするか設定

 

Statusの3項目が緑色になっていることを確認します。

※上記画像は、SSL化していなかったテストサイトの為、一番下がNGの例

 

最後に「Save Setting」を押せば完了です。

 

 

Progressive WordPress (PWA)

 

Progressive WordPress (PWA)

 

特徴

  • キャッシュ優先
  • 非同期にキャッシュ更新する設定が可能
  • スタートページの設定はフロントページか固定ページを指定
  • 「ホーム画面に追加」ボタンを独自作成可能
  • AMPをサポート

 

設定

ホーム画面に追加ボタン設定

  • Show “add to homescreen” banner
    ホーム画面に追加ボタンの設定

 

マニフェスト設定
  • Name
    サイトネーム(ホーム画面への追加バナーに表示)
  • Short Name
    サイトネーム ショート(アプリ下に表示される)
  • Start Page
    初期値はトップページ、固定ページから選択可能(アプリ起動後に表示されるページ)
  • Description
    アプリ(サイト)の説明文(キャッチフレーズ)を入力
  • Icon
    サイトアイコンで設定しているものが自動でセットされます
  • Display mode
    画面サイズの設定
  • Orientation
    Both、Landscape、Poatraitから選択
  • Theme Color
    画面のステータスバーの色等
  • Background Color
    アプリ起動時の画面背景色

 

「変更を保存」を押して完了します。

 

キャッシュの設定

 

画像、CSS、フォントのキャッシュを個別に設定可能です。

 

オフラインの際のメッセージや文字色・背景色などが設定できます。

 

「変更を保存」を押して完了します。

 

 

PWA for WordPress

 

PWA for WordPress

 

特徴

  • 日本語説明あり
  • キャッシュ制御は正規表現で除外設定可能
  • 「ホーム画面に追加」ボタンを独自作成可能
  • マルチサイト対応
  • 設定完了後はPWA稼働・停止がいつでもワンクリックで可能

 

設定

設定が日本語でわかりやすいです。マニフェストから設定していきます。

マニフェスト設定

 

  • Site Name
    サイトネーム(ホーム画面への追加バナーに表示)
  • Short Name
    サイトネーム ショート(アプリ下に表示される)
  • description
    アプリ(サイト)の説明文(キャッチフレーズ)を入力
  • start_url
    アプリ起動時のスタートページURL
  • scope
    初期値でOK
  • Icons
    アプリアイコン、アプリ起動時に表示されるアイコン画像を設定(512×512)
  • theme_color
    画面のステータスバーの色等
  • background_color
    アプリ起動時の画面背景色
  • display
    画面サイズの設定
  • orientation
    デバイスを縦横にしたときの画面回転など可能にするか設定
背景色、テーマ色は初期値がないので、白にする場合等も色を選択する必要あり

 

「マニフェスト設定を保存する」を押します。

 

キャッシュの設定

キャッシュの有効期限、除外URLなどを設定できます。

「キャッシュ設定を保存する」を押します。

 

稼働・停止の確認及び切替

 

すべての赤(NG)がグリーンになれば完了です。

またこちらから簡単に停止も出来ます。

※上記画像は、SSL化していなかったテストサイトの為、HTTPS化がNGの例です。

 

 

動作確認方法

設定が完了するとすぐに反映されて「インストールボタン」が出る訳ではなく、ブラウザによって変わり表示されるには条件があります。

※例えば、「1回目の訪問から5分以上経過後に2回目の訪問をした時」など。

 

動作の検証

Chrome(ブラウザ) のデベロッパーツールで検証します。

Google Chrome

 

どこでもいいので、サイトの表示画面で右クリックをしてメニューを開き「検証」を選択し、デベロッパーツールを表示します。

 

Consoleの確認

「Console」タブを選択し、以下のように記述されているか確認。

service worker registered

 

 

 

Manifestの確認

「Application」タブ・右側メニューの「Manifest」を選択

 

※デベロッパーツールの幅が狭い場合は、左側のスクロールバーの上にカーソルを載せると矢印が出て広げられますが、幅が狭いままなら以下の画像の矢印ボタンからメニューを展開して下さい。

 

 

設定した項目が出ています。

 

 

Service Workersの確認

「Application」タブ・左側メニューの「Service Workers」を選択

 

ドメイン名、Source、Status 等が表示されていればOK。

 

オフラインキャッシュの確認

「Application」タブ・左側メニューの「Clear Strage」を選択

 

 

「Application」タブ・左側メニューの「Service Workers」を選択

「Offline」にチェックしてからページ遷移し、キャッシュされているページが表示されるかチェックできます。

 

 

表示されない時

上記の検証の項目が何も表示されない、または「Application」タブが以下のような画面の場合(この時、「Console」タブに(PWA: service worker registered>も出ていない)

 

 

ワーニングメッセージは以下の通り

No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

翻訳すると

一致するService Workerは検出されませんでした。ページをリロードするか、現在のページのサービスワーカーがマニフェストから開始URLも制御することを確認する必要がある場合があります。

 

ブラウザを再読み込みしてみる

 

通常のリロードでダメなら以下の方法もお試し下さい。

デベロッパーツールを開いた状態で、リロードボタンを右クリックするとメニューが出ますので、「キャッシュの消去とハード再読み込み」を選択。

 

 

正直、上記方法が有効かどうかはわかりませんが、当サイトの場合、設定してすぐに検証を見ても表示されていなかったので、何度かリロードしたりしているうちに、有効が確認できる状態になりました。

 

 

有効になった後

最初にも書きましたが、インストールボタンが出るタイミングはブラウザの仕様により異なります。

時間を置いて複数回、サイトを訪問するとプッシュ通知が表示されます。

 

以上です。

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています