WordPressをPWA対応させるのにハマったこと

どうもWorkshipMAGAZINEの中の人のつちやの人（つちやのひと）です。

最近PWAとAMPなど、Googleが新たしい技と次々と投入してきますが、ついていくのがなかなか大変。
今回はWordpressをPWA化させるということで、「そもそも出来るのかな……？」と思って調べたところ

まったく情報がねぇ

なので、できませーんと言ってノの民に戻ろうとしたのですが、それはだめみたいでした、無念。
なので、今回はWordpressをPWA……つまりWorkshipMAGAZINEをPWA化させるにあたって愚痴ハマったポイントを紹介したいと思います。
モバイルならPWA……そんな未来に向けて俺は一歩足を踏み出した……！

本記事は2018/04/24地点の情報になります、もし古い・記事が間違っているというご指摘はぜひお問い合わせ・ツイッターにいただければと思います。
またWordpressとWebアプリケーションではPWAの対応方法などが違うと思われますので、Webアプリケーションの場合は参考程度に見ていただければと思います。

なお今回の記事でPWAとはなんぞやという記事は本記事では一切触れません。
PWAとはのこちらを読んでいただければと思います。僕も読みました。

さらに前提としてですが、PWA対応させるためにはAMP対応が必要と書いてあるメディアもありますが、実際は不要です。

必要なファイルを配置する

必要なファイルたちを配置します。

manifest.json

このファイルはうちのサイトはこういうサイトだよ！という情報を定義するファイルです。

PWA時にアプリ名などは、このファイルの情報が使用されます。

{
  "name": "Workship",
  "short_name": "Workship",
  "description": "Workship magazineはフリーランスのエンジニア・デザイナーをはじめとしたWebクリエイター向けの情報メディアです。海外発のトレンド情報、勉強会のレポート、最新ニュースをお届けいたします。",
  "start_url": "/magazine/?utm_source=home-screen&utm_medium=pwa",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [{
    "src": "/magazine/icons/pwa-48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "/magazine/icons/pwa-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

例としてはこんな感じです。

ほとんどのパラメータは見ればわかるようなパラメータが多いと思いますので、一点だけ解説しますと、

"display": "standalone"

こちらのパラメータが、重要でiOSでPWAさせるためには現状これ以外指定できません、詳しくは後述の注意点を見ていただければと思います。

service-worker.js

これはPWAを登録させるために必要なファイルです。

PWA動作時にアプリケーションでどのようなこと（たとえばインストール時・ページ遷移時・・・など）をやりたいか、を記載するファイルです。

  self.addEventListener( 'fetch', function( event ) {
  });

ファイルはこのような感じで配置しました。
何かしら記載してあれば問題ないようです。

PWAを動作させるためのjsファイル

PWAで必要なJSファイルです。

window.addEventListener('load', function() {
  console.log('pwa onload');
  'serviceWorker' in navigator & amp; & amp;
  navigator.serviceWorker.register('/magazine/service-worker.js').then(function() {
    console.log('serviceWorker registed.');
  })['catch'](function(e) {
    console.warn('serviceWorker error.', e)
  })
});

windowが読み込まれたときにPWAを登録させるプログラムです。

各種アイコンファイル

具体的にどのようなサイズが必要か・・・という情報がなくて以下のサイズを用意しました。

48 / 60 / 72 /76 / 96 / 114 /120 /144 /152 / 168 / 180 / 192 / 256 / 512

こちらのサイズ（正方形）でpngで用意しました。

アイコンサイズについてこれさえあればええんやで……みたいな情報をお持ちの方……ご共有いただければ……！

headタグ

headタグに以下を追加します。

アイコンファイル

 <link rel="apple-touch-icon" href="/magazine/pwa-images/pwa-48.png" sizes="57x57">

記述例はこんな感じで定義しました。

manifestファイルに書いたから、ここに書く必要ないんじゃないかーと思ったあなた、僕もそう思いました。

しかし現実とは非情で、残念ながらここでアイコンを定義しないとアイコンとして使用されません、がっでーーーーむ！！

manifestファイル

 <link rel="manifest" href="/magazine/manifest.json">

こんな感じ、hrefの配置場所は好きに変えてください。

PWAのJSファイル

 <script src="/magazine/js/pwa.js"></script>

これでだいたいの開発は終わりました、これだけで済むと結構楽ですね。

プラグインを導入する

せっかくPWAで動くようになったので、Webブラウザ通知も導入しましょう。

firebase・GCP の cloud functionsを使えば、ネイティブで実装することも出来るそうですが、本格的に作ると結構しんどいし、Wordpressなので、プラグインに頼る今回はonesignalという通知のSAASを導入しました。

https://onesignal.com/

こちらのプラグインについては、ドキュメントを見ながらで導入できるのでドキュメントを見ていただければと思います。

デバッグ方法

PWAは動作環境として以下の場合のみ動作します。

• SSL
• localhost

※ ちなみにSSLの場合はオレオレ証明書で作成したSSLはPWAでエラーが表示され動作しません。

iOS

Xcodeに搭載されているiOS iOSsimulatorを使用します。

Xcodeのメニューを押して

を選択して、iOSを起動します。

こちらはlocalhostが使用できるため、safariなどを起動してlocalhostに接続してデバッグしましょう。

Android

Androidだとlocalhostが自分自身になってしまうためSSLが入っている環境で動作させる必要があります。

AndroidのエミュレータなどでAndroidを起動し、Chromeなどで対象のサーバーに接続しテストします。

注意点

iOSだとPWA周りの動作が一部対象外

iOSだとpush通知が届かない

iOS11.3の仕様です、対応を待ちましょう。

iOSだとdisplayパラメータの仕様が結構めんどくさい。

先程manifest.jsonで記載しましたdisplayパラメータ・これが結構めんどくさいことになってます。

このdisplayパラメータ何かと言いますと

Web アプリケーションで、開発者が好む表示モードを定義します。

-出典： https://developer.mozilla.org/ja/docs/Web/Manifest

ふむ、何言ってるか全然わからんな。

用はアプリケーション動作時の画面の見た目を変えるパラメータかー・・・と思ったがそうでもないらしい

まず最初にiOSだと“display”: “standalone”だとスワイプで戻ることができません。

これは多分別にWordpressのバグじゃない気がします、Safariの仕様です、もうどうすればいいんだこれ。

まぁ仕様ということでいいさ、ならdisplayの値をminimal-uiにすれば戻るボタンとは出るだろう。

・・・出ねぇ

それどころか、PWAで動作せず普通にブラウザで開くようになりました。

２点目は“display”: “minimal-ui”はiOSだと動作しない

以上がiOSでの注意点です、もっと開発進めれば解決する方法ありそうだけど、今のところ限界っぽいです。

おわりに

PWA化してみましたが、現状では実装コストに対して評価は難しいかなという印象でした。
モバイルはアプリという風潮が大きかったですが、Swiftなどをやっている自分からすれば結構対応コスト安く対応できたのではないかな？と思いました。

特に日本はiOSのシェアが大きいので特にiOSのPWA周りがまだまだ弱いので対応コストも高いかなという印象です。

あとはこれからPWAも少しずつ良くしていく予定ですがPWAと絡ませれば、爆速アプリが作れるのではないかなと思います。

にしてもプラグインひとつで対応できるって・・・うらやましいなぁ（遠い目）