WordPressをPWA化する方法

この記事では、WordPressで作成されたブログをPWA(Progressive Web Apps)化させた方法を書きます。WordPressをPWAの化する理由はアクセスアップを図れるからです。

PWAの勉強会に参加してきましたのでその内容を追記します。youtubeでここ数回行われている勉強会の様子が見れますので、ご参考までに【Web Working Group 「PWAに備える3ヶ月」】

PWA(Progressive Web Apps)とは？

PWAとは、AndroidアプリやiOSアプリのようなネイティブアプリのような操作やレスポンスをもつWebページを提供するための考え方です。個人的には、名前が抽象的過ぎてわかりづらいです。

PWAという言葉が初めて出てきたのは、「ChromeDevSummit2015」で出てきたものです。

GoogleのPWAのCodeLabsのサイトには次の要素を持つWebページだと書いてあります。

（複数のブラウザに対応している）

（デスクトップやスマホやタブレット対応している）

（高速化が図られている）

HTTPSに対応している

サービスワーカーにより次の機能を備えている

オフライン対応している（LocalStrage／Cache）

アップデートプロセス機能を実装している

マニフェストファイルで検索エンジンが識別可能になっていて、アプリストアの手間をかけずにホーム画面に追加できる（URLで簡単にアクセスでき、複雑なインストール作業がない）

プッシュ通知（Push API／Notification API）が可能

（物によってPayment機能とGPSによる位置情報機能が必要）

何だか難しいことが書いてあるかのように最初は思いましたが、Androidアプリを作るときにキャッシュをつかったり、バージョン管理をしたり、Push通知機能を実装して、それをセキュリティ的に安全なレベルで作るのはアプリ屋さんとしては当然のお仕事です。

スマホアプリと同じような機能をWebページにも持たせようと考えているのがPWAの考え方なので、Webページをアプリ化する要点が書並べられています。

AMPとPWAは何が違うのかとよく聞かれますが、「AMPは、Webページを高速化するためのもの」ですので、視点が異なります。AMPはPWAに統合されていくと私は考えています。

GoogleのPWAの説明の中にAppShellという単語がありますが、この単語の解釈は、UIが機能するための必要最低限度のリソースです。ブログでいえば、最低限記事を読むことができる用になるための「HTML／CSS／JS／画像」です。

PWA化の利点

私が考えるメリットは次の点です。

1つ目は、サイト表示速度が圧倒的に早くなります。表示速度が早くなると検索エンジンから初めて自分のブログに訪れたユーザの第一印象が良くなり、記事を沢山読んでもらえるというデータがあります。
また、オフラインでも表示できるようになるので、読んでもらえる場面が増える。ただし、全ページのオフライン化やキャシュ化は時間がかかる場合も。
2つ目は、プッシュ通知ができることにより、更新された情報を読ませるキッカケを作ることができる。プッシュ通知は開封率は、20%というデータがある。
3つ目は、Webページをスマホアプリの用に画面にアイコンを登録してもらえるキッカケをつくることで、再来率を上げることができる。

私が取り扱うPWAの領域がWordPressのブログに特化したもののため3つに絞っています。ショッピングサイトやゲームサイトであれば、その他の利点もあると思います。

PWAを取り巻く状況

大手企業がPWAをアプリストアに登録できるようにする準備を進めています。

各ブラウザのPWAに必要なAPIの対応状況

WordPressをPWAにするための手段

「PWA(Progressive Web Apps)とは？」のところで書いたPWAの要素にごとに、WordPressではどのように解決を図るのかを書いていきます。

PWA化方法その１（RWD化）

（複数のブラウザに対応している）

（デスクトップやスマホやタブレット対応している）

これは、WordPressのRWD(レスポンシブウェブデザイン)が適用されたテーマを使えば解決ですね。とくに解説は行いません。検索エンジンで検索してください。

PWA化方法その２（高速化）

（高速化が図られている）

これは色々な方法があります。HTMLやJavaScriptの書き方1つで早くなることがあります。本当に地道な知識の積み重ねが高速化につながります。その点に関しては触れません。。今回は、HTTPS化とオフライン化とキャッシュ化を持って高速化と置き換えます。

PWA化方法その３（HTTPS化）

HTTPSに対応している

PWAにするためには、HTTPSが必須です。ブログサイトをHTTPS化サれていない方は、まずは、ここから始めてください。HTTPS対応は、私も実施しました。

404 NOT FOUND | しもた帳

PWA化方法その４（サービスワーカーによるキャッシュ＋マニフェスト）

サービスワーカーにより次の機能を備えている

オフライン対応している（LocalStrage／CacheAPI）

アップデートプロセス機能を実装している

マニフェストファイルで検索エンジンが識別可能になっていて、アプリストアの手間をかけずにホーム画面に追加できる（URLで簡単にアクセスでき、複雑なインストール作業がない）

サービスワーカーについて

WordPressの場合は、プラグイン「Super Progressive Web Apps」で簡単に作り込むことができます。PWAにするプラグインもいくつか出てきていますが、インストール実績が一番多いものにしました。この記事を書いている時点で、キャッシュ化（オフライン対応）とアイコンの追加ができるとPWAとして恥ずかしくないレベルに到達します。また、GoogleやBingなどの検索エンジンがサイトをクローリングする際に、manifestファイルがありPWAの要件に合致していると、自動的にストアに登録してくれます。Microsoftの場合は、後に紹介するpwabuilderにPWA作りましたと申告することができます。INDEX化されたくない場合は、Robot.txtでブロックしましょう。

プラグインを使わない場合は、自分でJSファイルとマニフェストファイルを実装する必要があります。JSを書く際に便利なサイトがこちら。２つを組み合わせるといい感じのサービスワーカーをお手軽に実装することができます。

https://www.pwabuilder.com/
- microsoft製
- マニフェストファイルとサービスワーカーのJSを作るのに便利
- ネットワークファーストとキャッシュファーストを選択できる。（NoCacheも選択肢にしておく）
WorkBox
- Google製
- ブラウザキャッシュは、自分で明示的に削除しないと消えませんが、キャッシュの制限時間を設ける事ができます。その他にも機能がありますが、勉強中です。

生のサービスワーカーの理解にはPWAのCodeLabsが一番わかり易いです。最近はサービスワーカーについて調べて書いてくれている方が沢山いるので検索エンジンで情報を探してもよいかと思います。サービスワーカーで利用する際には、「install／activate／fetch」イベントは最低限実装しましょう。

ホーム画面に追加

ホーム画面にアイコンを追加する方法は、こちらのサイトが分かりやすかったです。私も作ってみました。ブログをPWAに対応させていると、裏側ばっかりの処理でアプリっぽい動きが目に見えないのですが、自分のブログにアクセスした時に「ホーム画面に追加」という通知が出たときは、ワクワクしました！WordPressをPWAにして、スマホのホーム画面に追加するとどういう風に見えるのか？どういう風に作り込むのかという点を中心に書いていきます。

ホーム画面に追加機能を実装した結果

PWA化したサイトにアクセスする。次の通知が来る。

ホーム画面に追加するを選択すると、アイコンが作られます。わかりやすいように「pokemonGo」と並べてみました。

追加されたアイコンをクリックすると、アプリっぽい起動画面が出る。

起動後の画面(左)。通常の画面(右)。全画面表示になりますね。アドレスバーがないとスッキリします。

ここまででもすごいなーと思っていたのですが、Googleから自分のサイトを選択してURLをクリックすると、Chromeブラウザで開くか、アプリとして開くか聞いてくれる。最初は嬉しい。（多分数日立つとうざい）

この他にも、アイコンを削除しようとすると、アンインストールするという風に出てくる。Androidアプリを作ったような嬉しさがある。

スマホのホーム画面に追加（インストール）する条件

詳細は、Googleのページを参照して頂きたいのですが、要点を掻い摘むと次の条件がそろうと、スマホのホーム画面に追加を促すポップアップが出ます。

マニフェストファイルがあり、htmlからリンクが貼られている
- ```
<link rel="manifest" href="/thinkIT/superpwa-manifest.json">
```

マニフェストファイルには、次の情報がかかれていること

short_name（ホーム画面で使用）
name（バナーで使用）
192×192のpngアイコン（MIME タイプ image/png の指定が必要）
読み込み先の start_url

マニフェストサンプル（WordPressのプラグインで作成）

{
    "name":"shimota.site",
    "short_name":"shimota.site",
    "icons":[
                {
                    "src":"https://shimota.site/thinkIT/中略/cropped-7757-192x192.png",
                    "sizes":"192x192",
                    "type":"image/png"
                },
                {
                    "src":"https://shimota.site/thinkIT/中略/cropped-7757-512x512.png",
                    "sizes":"512x512",
                    "type":"image/png"
                }
            ],
    "background_color":"#D5E0EB",
    "theme_color":"#D5E0EB",
    "display":"standalone",
    "orientation":"any",
    "start_url":"/thinkIT",
    "scope":"/thinkIT/"
}

サイトに Service Worker が登録されている。(service-worker.jsは、「install/activate/fetch」イベントは最低限実装しましょう。）

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }

HTTPS 対応されている（Service Worker を使用するための要件）。
2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。

※１〜３は、WordPressプラグイン「Super Progressive Web Apps」で自動設定されます。

※４については、対応を行いましょう。

※５に関しては、今後仕様が変わるかもしれませんね。しかも、これは実装しているときになんで出てこないのかわからず、ハマってしまいました。お急ぎの方は、次の方法で確認することができます。

直接ホーム画面に追加するを直接クリックする
ChromeDevTool＞Application＞Manifest＞Add to homescreenを選択する。ChromeBookだと駄目だったけど、WindowsのChromeでやったら、次のような画面が出る。
- （↓　結果　↓）

ホーム画面に追加機能を作り込んだ感想

HTTPS化してあれば、簡単に実装することができます。もう少しするとPWA化する機能が標準装備されたCMSが出てきそうですね。PWA化しても最後はやっぱりコンテンツ勝負なるので、コンテンツの洗練も忘れずにやりましょう。

PWA化方法その５（PUSH通知）

プッシュ通知（Push API／Notification API）が可能

Push通知とは

プッシュ通知とは、スマホのアプリやパソコンのソフトなどで何かのお知らせしたい事があったときにアプリ側から自動的に、お知らせを表示する機能のことです。ちょっと前までは、iOSやAndroidのアプリケーション（LINEやSKYPE）だけのものでしたが、ブラウザへの通知も可能になりました。このブラウザへ通知の機能を使うと、例えば、ブログを更新した際に更新したことを直接スマホに通知することができます。

プッシュ通知についても最近はJSだけで解決することができます。ナマのコードが気になるかたは、このサイトを御覧ください。基本が理解できます。WordPressを利用されている場合は、外部サイトに登録＋プラグインの導入で解決することができます。この記事を書いている時点で有効なサイトは、「Push7」「onesignal」があります。

Push通知を導入した理由

固定ファンを作る手法に適している

今まで、ブログの更新を通知するためには、RSSリーダーに購読登録してもらったり、ツイッターやFaceBookに更新情報を投稿することで、友達（フォロワー）に来てもらうことや、メールマガジンによるお知らせをする方法などがありました。従来の方法では、ブログのファン方以外を呼び込もうとした場合は、メールマーケティングは開封率3%というデータもあります。

それに比べてPush通知を利用した場合の利点は次の点です。

検索エンジンから流入したユーザにPUSH通知登録を促すことができる
Push通知の開封率は20%という調査があります(Push7)
通知だと宣伝方法に嫌悪感を持たれにくい

この利点を活かして、従来の方法と組み合わせて宣伝していくことが良いかなと思います。

PWAの要件の１つになっているから

冒頭にも書いたとおり、PWAの要件の１つになっているので作り込んでみたかった。

プッシュ通知の実現方法

プッシュ通知の方法としてWordPressを使っている場合は簡単に行うことができます。この記事を書いている時点の有効な方法は、次の２つでした。

Push7
onesignal

どちらも簡単にPush通知を設定することができます。

また、自前のJavaScriptだけでプッシュ通知を実装することも可能です。簡単に説明してくれているサイトが有りました。「ウェブアプリへのプッシュ通知の追加」（エンジニア向け、コードをコピペしながら解説を読んで理解して60分位で内容を理解できました）。

今回はこの中からPush7を使いたいと思います。設定方法は他のサイトが書いてくれているため割愛します。Push7への質問は、「Push7へのよくある質問」をご参照ください。

Push7で設定したもの

以下は、私がPush7上で設定したものと、WordPressに設定したものの一覧です。

Push7
- アカウント登録
- 「一般設定」にサイト名とURLとカテゴリを登録
- 「自動送信」にRSSを設定
- 「自動送信」のWelcomを設定
WordPress
- プラグインを導入しないので、JavaScript3行をbodyタグの末尾に貼り付け。

プッシュ通知の状態

１）プッシュ通知の購読を求める通知

検索エンジンなどから私のブログに来てくれた方に次のような通知が出ます。一度通知を拒否した場合、しばらく表示されません。色々試した結果、クッキーを削除すると再度、通知されるようになります。

２）「１）」にて購読すると選択した場合は、最終確認画面が出る。

この2ステップ目があるのが鬱陶しいですね。ここで許可を選択していただけると私のブログが更新されたときに、通知が来るようになります。

３）購読登録完了は、通知で来ます

プッシュ通知を削除したい場合

間違ってプッシュ通知を登録したい場合は、サイトの設定から削除をしてください。

PWA化方法対象外

（物によってPayment機能とGPSによる位置情報機能が必要）

今回の対象範囲外。

PWA化でのハマりどころ

SPAは、読み込まないと、サービスワーカーにキャシュされない。
PWAのスタートページは、１回目にサイトに来る人と２回目以上に来る人の特性をみて決めましょう。
OS間で生まれる動作差異に気をつけましょう。お客様向けの商品を作る場合は一通りのテストをした上でレビューしましょう。
- iOSでは、apple-touch-iconがmanifestより優先される
- PWA上の戻るボタンの出る／出ないの差がある
- iOSの場合は、Basic認証がある場合は、アイコンを指定できない
ブログの場合はそんなに気にすることはないが、ゲームなどの場合は、キャッシュサイズを気にしましょう。目安は50MBらしいです。

PWA化の改善点

WordPressをPWA化したときに次の点を改善したいと考えています。

ホーム画面に追加したアイコンから最初に表示する画面が悩ましい。
- TOP画面（index.php）は何か違う感じがする
  - PWA用のランディングページが必要で、そのランディングページに表示されているリンクは、キャッシュさせて置くべき。（RSSファイルから最近の投稿記事１０個くらいあればよい？）
キャッシュの持ち方を考える必要がある。
通常の初期表示が遅い

私が今後試したいPWAの機能

どうやって自走するかはわかりませんが、今後試したいPWA機能を箇条書きにします。

WebVR
WebPayments
純粋なPWAからは離れますが、Microsoftの場合は、Windowsから起動させた場合のみWIndowsAPIを呼び出すことが可能。他のNativeAplも同じようなことが可能かも。

まとめ

WordPressをPWA化する利点とその方法について書いてきました。自身のサイトでPWA化が完了したら、Googleが提供してるPWAのチェックリストで確認しましょう。Chromeの拡張機能「Lighthouse」で自動で確認することができます。（sonarwhalというものでもチェック可能）私のサイトを確認したところ、結構良いところまで行ったのですが、ページの表示速度が圧倒的に悪いという結果が出ました。こればっかりは、サーバーをお引っ越しするしかありません(笑)それとは別に、PWA化した感想ですが、WordPressはプラグインで簡単にPWA化できますが、あくまで最低ラインです。これから色々改善してみたいです。