WordpressをPWA対応させる方法

こんにちは、Wordpressで「<a href="https://crypto-theta.com/">つみたてシータ</a>」というブログを運営しているシータです。

先日、以下のツイートを見かけてPWAに興味をもったので、WordpressブログをPWA化してみました。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">もうPWAのままGoogle Playに登録できるのか！<br>めっちゃ希望の星。 <a href="https://t.co/QpfLJLTbM9">https://t.co/QpfLJLTbM9</a></p>&mdash; a-ki 🎸 (@akisfactory) <a href="https://twitter.com/akisfactory/status/1122380878636732417?ref_src=twsrc%5Etfw">2019年4月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この記事では、PWA化の手順をメモとして残しておきます。

# WordpressをPWA対応させる手順 
WordpressならPWA対応できるプラグインがいくつかあります。

ここでは比較的PWAで利用されている「Super Progressive Web Apps」でPWA化していきます。

1. プラグイン「Super Progressive Web Apps」をインストール
2. 事前準備：192x192pngアイコンと512x512pngアイコンを用意する
3. 「Super Progressive Web Apps」の設定をする
4. 動作確認する

## 前提条件：PWA対応にはサイトのHTTPS化が必要
PWA対応にはサイトのHTTPS化が必須です。

まだHTTPS対応ができていない場合は、先にそちらから済ませましょう。

## プラグイン「Super Progressive Web Apps」をインストール
Wordpress管理画面から「プラグイン > 新規追加」と遷移し、検索窓に「Super Progressive Web Apps」を打ち込んでください。

以下のリンクからDownloadしてもOKです。
<a href="https://wordpress.org/plugins/super-progressive-web-apps/">Super Progressive Web Apps</a>

インストール->有効化まで済ませます。
## 事前準備：192x192pngアイコンと512x512pngアイコンを用意する
PWAに対応すると、スマホのホーム画面からアプリと同じような感覚でWebサイトへアクセスできるようになります。

PWAでは、次の2つのアイコンが必要になります。

* アプリアイコン：
    * スマホホーム画面に表示されるアイコン
    * ファイル形式：png
    * サイズ：192x192
* スプラッシュアイコン：
    * アプリ起動直後に表示されるアイコン（iOSはまだ表示されない)
    * ファイル形式：png
    * サイズ：512x512

うちのブログではこんなアイコンを用意しました。
192x192アイコン
<img width="363" alt="スクリーンショット 2019-05-05 12.26.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/77e28170-b0f4-2713-3973-5c8cd9d98865.png">

512x512アイコン
<img width="514" alt="スクリーンショット 2019-05-05 12.26.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/acd18b45-cc6d-09f3-04ed-460a21add9b3.png">

かわいいアイコンです。

## 「Super Progressive Web Apps」の設定をする
プラグインのインストール、アイコン準備が済んだら、PWAの設定をしていきます。

Wordpress管理画面から「SuperPWA->Settings」と進みます。
<img width="260" alt="スクリーンショット_2019-05-05_12_44_40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/d1836a31-b519-c8fb-494c-4166066a576d.png">

設定画面ではこんな項目が表示されます。
<img width="1056" alt="spwa_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/1f2747d8-d9f9-f1ab-d3ff-35321f70477f.png">

* Application Name：ブログ名を入れる
* Application Short Name：スマホのホーム画面で表示される名前。（日本語だと4文字までしか入力できなかった）
* Description：お好みで
* Application Icon：事前準備で用意したアイコンを指定
* Splash Screen Icon：事前準備で用意したアイコンを指定
* Backgroud Color、Theme Color：お好みで


<img width="1060" alt="spwa_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/a8dcb67c-cf00-cbc9-c03b-13d199f15fd1.png">

* Start Page：アプリ起動後に表示される画面。ブログならHomepageで良いと思う
* Offline Page：オフラインのときに表示される画面。ここもブログならHomepage(Defalut)で良いと思う
* Orientation：画面の向き。縦向きがいいなら「Portrait」を、横向きがいいなら「Landscape」を指定
* Display：デフォルトでOK。

ここまで設定したら「Save Settings」で保存しておく。

### ステータスを管理画面から確認する
設定画面の一番下に「ステータス」が表示されてるので、ここをみてみます。
<img width="525" alt="スクリーンショット 2019-05-05 12.56.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/f50f6e45-349a-b5fb-528f-e86001650469.png">

以下の3つ、すべてに緑色のチェックマークが入っていたらOKです。

* Manifest
* Service Worker
* HTTPS

## iOSで確認する
ちゃんとできているか、実機で確認してみます。

僕はAndroidを持っていないので、iPhoneで確認します。

自分のブログへiPhoneからアクセスし、画面下の真ん中にあるアイコンをタップします。

<img width="375" alt="IMG_0947.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/b9edbef0-7e59-c3a6-4fc5-4c1a30d9132d.png">

すると、下からぬるっとメニューが出てくるので、「ホーム画面に追加」をタップしましょう。
<img width="375" alt="IMG_0946.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/4a45ba77-b75c-c5b7-386f-2bc42e3ecc72.png">

「ホーム画面に追加」画面になります。「アイコン」や「アイコンショート名」が正しく表示されているかを確認します。
<img width="375" alt="IMG_0948.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/45d3c4f8-90f2-6e8b-a85c-1f791b6b2b8a.png">

「追加」できるとこんな感じでホーム画面にアイコンが並びます。（かわいい猫がホーム画面に並ぶと気分がよくなります）
<img width="375" alt="IMG_0949.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/c865e42e-cfb6-1f41-71dd-c45f9b968e8b.png">

アプリアイコンをタップすると、こんな感じに全画面でブログが表示されるはずです。（URLバーがない）
<img width="375" alt="IMG_0950.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/817e25cd-dd17-cf5a-b22b-0843fd7c87bd.png">

ここまで見れたら基本動作はOKです。

# 補足
## iOSでアイコンが表示されない場合、Add-OnsからApple Touch Iconsを有効にする
アドオンはWordpress管理画面の「SuperPWA > Add-Ons」から有効にできます。
<img width="255" alt="スクリーンショット_2019-05-05_13_17_12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/35e10bac-8dca-1b6d-3a4b-483fbdd0111e.png">

アドオン画面に入ると「Apple Touch Icons」があるので、有効化します。

<img width="1299" alt="スクリーンショット 2019-05-05 13.15.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/cda11a4e-ddc5-9cb4-34b4-831a27adfd1c.png">

これで僕の場合は、iOSでアイコンが表示されるようになりました。

## UTM Trackingも有効にしておくとGoogle Analyticsでアクセスが見れるようになる
特に理由がなければAdd-Onsにある「UTM Tracking」も有効にしておくといいと思います。

「UTM Tracking」を有効にすると、Google Analyticsからアクセスを見れるようになります。

「UTM Tracking」はWordpress管理画面の「SuperPWA > UTM Tracking」から設定できます。

<img width="255" alt="スクリーンショット_2019-05-05_13_21_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/bfa60be8-39e1-f9e2-baa0-889a0dd4fc13.png">

UTM Trackingは初期設定でこんな感じになっています。
<img width="1040" alt="スクリーンショット 2019-05-05 13.21.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/a34353f2-915a-26ce-8892-b1363c4c1822.png">

「Campaign Source」に「superpwa」が指定されていますね。これがGoogle Analyticsでアクセス元を識別する名前になります。

### Google AnalyticsでPWA経由のアクセスを確認する
Google Analyticsを開いて、「集客 > すべてのトラフィック > チャネル」をクリックします。
<img width="616" alt="スクリーンショット_2019-05-05_13_26_05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/4db2b6ba-54e9-79a9-a06c-712a2f0cba3e.png">
チャネルグループが並んでいると思いますが、「Other」の中にPWA経由のアクセスが記録されているので、「Other」をクリックします。

すると、こんな感じで参照元が「superpwa」となっているアクセスを確認できます。
<img width="1174" alt="スクリーンショット 2019-05-05 13.26.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410690/225ea094-90de-0b31-49ba-5281f7698f09.png">

GW中に設定をしたのですが、少しずつPWAでアクセスしてもらえていることが確認できて嬉しかったです。

まだまだPWAで何がどう変わるのか勉強していかねばですが、今後が楽しみです。