「PWA for WordPress」というプラグインでWordPressをPWA化してみた

2018年12月14日 WordPress

以前の記事でPWAのホームアイコンをユーザーに追加してもらうための実装を書かさせてもらいました。
ServiceWorker.jsやmanifest.jsonをサーバーに直接設置しなければならず、状況によっては難易度の高い実装方法になってしまっていたのですが、「PWA for WordPress」というWordPressを簡単にPWA化するプラグインが話題になっているので使ってみました。

PWA for WordPressの使い方手順

１．PWA for WordPressプラグインをインストールして、有効化する
 ２．manifest.jsonを設定する
 ３．serviceworker.jsを設定する
 ４．PWAが動作しているか確認する

１．PWA for WordPressプラグインをインストールして、有効化する

まずは、PWA for WordPressプラグインをインストールしましょう。WordPressの管理画面から、「プラグイン」⇒「新規追加」⇒キーワードで「PWA for WordPress」と入力して検索⇒「PWA for WordPress」というプラグインをインストールします。

インストールしたらさっそく有効化しましょう。有効化すると以下のような画面になり、WordPress管理画面の左側に「PWA for WordPress」というメニューが追加されます。

僕の場合初期状態は以下のような表示になりました。ManifestとServiceWorkerが動作していない状態のようです。（PWAは実装済なので普通に使える状態なんだけどな？）
※プラグイン上で設定がされていないという意味のようです。

どんどん設定していきましょう。

２．manifest.jsonを設定する

WordPressの左側に表示された「PWA　for WordPress」のメニューを選択すると下の方に以下のように表示されていますのでそれぞれ設定していきます。（左のメニューからそれぞれ選択して設定していっても問題ございません)

「マニフェストの構成」をクリックすると、以下のような設定画面が開かれるので、どんどん設定していきます。

設定内容は以下の通りです。

項目名	設定内容
Sitename	PWAから起動した際に表示されるサイト名を設定
Short_name	スマホに追加されるアイコンの名前を設定
description	サイトの説明文を記載します。（サイトのmetaタグからdescriptionをフィルインしてくれます。）
start_url	アイコンを起動したときに初期表示するURLを設定します。また、ホームアイコンからのアクセスなのか把握したい場合はurmパラメータを付与しておくのがよいでしょう。
scope	PWAの機能を特定URLでのみ動作させていた場合に設定します。ここでは「/」で設定します。

続いてアイコンを設定していきます。

作成したアイコンをアップロードします。
続いて、「theme_color」、「background_color」ですが、ここを設定するとブラウザのアドレスバーなどの UI 要素の色を指定できます。好みに合わせて設定しましょう。

最後です。ここが一番大事な設定です！

まずは「display」。
この設定方法は、端末に追加されたアイコンからの起動方法を設定します。
それぞれ設定の意味は下記の通りです。

項目名	設定内容
fullscreen	利用可能な表示エリアをすべて使って表示されます。
standalone	ブラウザの UI （アドレスバーなど）が非表示になり、ネイティブアプリのような表示ができます。
minimal-ui	standalone のような外観や操作感ですが、ナビゲーション制御のために最小限の UI を表示になります。ブラウザによってUIが異なります。
browser	ブラウザを立ち上げます。

いろいろ設定変更して、立ち上がり方を確認しながら好みのものを選ぶとよいと思います。

続いて、「orientation」。
画面の縦方向、横方向の向きに関する動作を設定します。
設定できる内容は以下の通りです。

項目名	設定内容
any	すべての向きに対して回転を許可します。
natural	screen.orientation.angle が 0 (正面) になる向きに固定します。
landscape-primary	横長が正面の端末で横方向に固定します。
landscape-secondary	横長が正面の端末で縦方向に固定します。
landscape	“landscape-primary”, “portrait-secondary” の省略形です。
portrait-primary	縦長が正面の端末で縦方向に固定します。
portrait-secondary	縦長が正面の端末で横方向に固定します。
portrait	“portrait-primary”, “landscape-secondary” の省略形。/td>

webサイトがレスポンシブで、特に縦横の指定がなければ「any」を設定しておけばよいです。
ゲームなど、横画面固定の場合にlandscapeに設定しておきたい。みたいな使い方ですね。

設定が終わったら「Save Manifest configurations」を押してmanifestの設定完了です！

３．ServiceWorkerを設定します。

続いてserviceworkrerを設定します。ホームアイコンを追加する機能において、特に難しい設定は必要ないので、基本的にはデフォルト設定でOKです。

デフォルトでよいと言いながら、以下を変更しています。

項目名	設定内容
基本キャッシュ計画	更新頻度の高いブログなどのサイトをPWA化するならOnline firstを選択すべきなので、僕はonline firstで。
オフラインページURL	オフライン時に表示する固定ページ指定します。なので、オフライン時に見ても苦にならない固定ページを設定します。 ※と言いながら自己紹介くらいしか固定ページがなくとりあえずこれを設定。
キャッシュ有効期間	デフォルトでいいでしょう。サイトの更新頻度に規則性を持たせてたりするのであればそれに合わせて設定します。
キャッシュ除外URL	キャッシュする必要がないページ（常に更新されているようなページ）を設定します。

項目名	設定内容
初期キャッシュ/td>	マニフェストで指定した start_url とオフラインページは自動的にキャッシュしてくれるので、特に設定はしなくてよいです。
デバッグモード	プラグインから生成されるserviceworkerをいじるときに使うんですかね？。とりあえずオフでよいです。

一通り確認したら「Save Cache configurations」を押して設定完了です。

PWAが動作しているか確認する

PWA for WordPRessの画面に戻ると、無事にすべて稼働中になっています。

ほんとにPWAで機能しているか確認してみましょう。
Chromeのデベロッパーツールで「Application」のタブを選択します。

さきほどmanifest.jsonで設定した内容が反映されていれば成功です。

続いて、Chromeのデベロッパーツール内の「Application」タブの左側のメニューに「Service Workers」というのがあるので選択します。

「status」の部分が「activated and is running」となっていれば成功です。

これでPWA　for WordPressを使った実装は完了です。
長々と書きましたがやること自体は簡単ですね！

さいごに

いかがでしたでしょうか？プラグインを利用してWordPressサイトをPWAに対応する方法をご紹介しました。
シンプルな設定でPWA対応ができてアイコン追加機能を提供できるのでこれもやっておいて損はない設定です。
ぜひトライしておきましょう！

サイトにアクセスしてくれた時に、ホームアイコンを追加してくれたかどうかをGAで確認する方法をこちらにまとめてみました。よかったら見てみてください。
⇒PWAでホームアイコンが追加されたかをGA/GTMで計測する！

PWAのServiceWorkerを使いこなしていくにはJavaScriptの知識が必須になってきますので
javascriptの基本から応用までいくつか利用している勉強法があるのでご紹介です。
場所と時間に縛られないUdemyは特におすすめです。初心者向けの講座をリンクしておきましたが、玄人向けの講座もあるので一度見てみてください。
いきなりスクールに通うのは勇気がいりますよね。
人に直接教えてもらうなら、ストアカで一度トライしてみるのもありです。
ちょっと知りたいことがあるだけ、とかならストアカの方が都合がよいです。
ご都合に合わせてぜひ★