釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

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

PWAforWordpress

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

PWA for WordPressの使い方手順

1.PWA for WordPressプラグインをインストールして、有効化する
2.manifest.jsonを設定する
3.serviceworker.jsを設定する
4.PWAが動作しているか確認する

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

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

プラグイン選択

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

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

PWAプラグインの初期状態

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

2.manifest.jsonを設定する

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

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

manifest-settings

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

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

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

manifest-icons

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

最後です。ここが一番大事な設定です!
manifest-type
まずは「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の設定完了です!

3.ServiceWorkerを設定します。

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

serviceworker1

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

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

serviceworker2

項目名 設定内容
初期キャッシュ/td>

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

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

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

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

ほんとにPWAで機能しているか確認してみましょう。
Chromeのデベロッパーツールで「Application」のタブを選択します。
PWAの動作確認
さきほどmanifest.jsonで設定した内容が反映されていれば成功です。

続いて、Chromeのデベロッパーツール内の「Application」タブの左側のメニューに「Service Workers」というのがあるので選択します。
serviceworker-動作確認
「status」の部分が「activated and is running」となっていれば成功です。

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

さいごに

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

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

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

  1. Webで勉強してみたい人向け

  2. 実例でわかるJavaScript講座

  3. 講義を受けてみたい方

  4. 日本最大級のまなびのマーケット「ストアカ」

  5. スクールでしっかり勉強したい人向け

  6. キャリアチェンジを支援する・社会人のためのWebクリエイタースクール【デジタルハリウッド STUDIO by LIG】


コメントを残す

メールアドレスが公開されることはありません。