【ブロガー必見】wordpressサイトをPWAでアプリ化してユーザー体験を向上させてみよう！

先日、当ブログサイトをPWA化して、サイト表示速度を改善しユーザビリティの向上を図りました。効果はまずまずといったところかと思います（※あくまで私の主観にはなります）
具体的な導入方法メモを残します。

そもそもPWAとは

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができ、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。
PWAは何か特殊な技術、というわけではないようです。 レスポンシブデザインやHTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPIを利用しているWebサイトをPWAサイトと呼ぶようです。

PWAでできないこと

アプリストア経由で新規ユーザーに接触出来ない

PWAは基本的に、Webサイトを訪問したユーザーに直接インストール（スマートフォンのホーム画面に追加 等）をおこなってもらいます。
Webサイトとネイティブアプリを運用していれば、Webからもアプリストアからも新規ユーザーを獲得する機会がありますが、ネイティブアプリを持たずWebサイトにPWAを実装させた場合、アプリストアなどで新規ユーザーを獲得する機会は得られません。

iframeでの外部読み込みが表示されなくなるケースがある

そもそもiframe自体があまり良しとされていないようです。
当サイトではInstagramフィードの自動読み込みページでの表示がうまくいかなくなりました。
（解決方法は調査中）
（プリキャッシュの設定で、外部読み込みページを “キャッシュさせない” に設定したら、うまく表示されるようになりました。）

iOSでは一部機能が制限される

当方の実装後検証結果では、PC（Chrome）での表示とi Phone（12 miniのSafari・Chrome）とで差が見受けられました。

• i Phoneでは新着通知の受取りをアナウンスするバナーが表示されない。
• i Phoneでは［ホーム画面に追加］のバナーが表示されない。

（今後も試行錯誤して改善できれば記事にしていきます。）

PWA実装手順

PWA for WP&AMPをインストール

当サイトでは ” PWA for WP&AMP ” を実装したので、このプラグインでのPWA化の説明をしていきます。
有償版もありますが、とりあえずの実装であれば無償版で問題なく実装できます。

以下、プラグイン有効化後の説明になります。

Dashboard

WPサイトをPWA化するにあたっての設定は必要なかったです。
プラグインを有効化するだけでステータスに稼働中と表示されます。

Setup

iconの設定以外は特に変更せずにデフォルトの設定で大丈夫です。

Features – Push Notification

プッシュ通知の設定項目になります。

案内に従い別途プラグインのインストールとAPI提供サイトへのアカウント登録とAPI key の取得が必要となります。

Features – Pre Caching

ページをプリキャッシュすることで、サイトの高速表示が可能になります。
記事や固定ページのプリキャッシングをアクティブにしておかないと、PWAがうまく機能しない場合があるようです。

Features – UTM Tracking

こちらの設定をアクティブにすることで、通常のアナリティクスとPWAサイトでのトラッキングを分けることができるようです。
個人運営のブログサイトであればアクティブにする必要なないかと思います。

Features – Loader

PWAサイト読み込み時に表示させるローディング画像の設定ですが、無償版では細かい設定ができないようなので、まずいらないでしょう。
他のプラグインを使用してローディング画面を設定する方が選べる種類も多くて良いと思います。

Features – Tools

設定をリセットして1からセッティングし直す際に使用します。
「あー、なんかよくわかんなくなった」といった時以外は特に使用することはないと思わまれす。

Features – Advance

ここも基本はデフォルトで大丈夫そうです。
当サイトは画像を入れ替える機会が多いので、”Caching Strategy”の項目をちょくちょく変更して動作検証を行っております。

上部の ”Offline Google Analytics“ ”prefetch manifest URL“ の項目は運用しているサイトに合わせて設定を変更したほうがよさそうです。

以上でPWA化の手順は終わりです。

あとがき

P WA化の設定が完了しても、インストールいているプラグインとコンフリクトを起こしたりし、使用できなくなるプラグインが出てきたりしますので、実装完了後もご自身のサイトを細かくチェックし検証・改善を行うことをオススメいたします。

最後までご拝読いただきありがとうございます。
それでは皆様も、楽しいブロガー生活を💻🎉

当サイトではPWA実装にあたり、以下のサイトを参考にさせていただきました。

記事参考元:
CHIYOBLOG 様
https://chiyo-blog.com/wordpress-pwa/（外部リンク）