[Sentry]PWAに対応！「ホーム画面に追加」機能を利用する手順

Pwa

2017年のウェブのトレンドと言えば、AMPとPWA。
どちらもGoogleが主で進めているどちらも主にモバイル向けのプロジェクトで、ざっくり言うと「AMP」はWEBページを高速化するための技術、「PWA」はWEBページにネイティブアプリのようなUXを提供するための技術です。

Sentryは「AMP」プラグインを有効化することで、デザインされたAMPページを提供していましたが、この度PWAにも対応しました。
PWAはiOSが未対応のため採用を見送っていましたが、将来的にiOSも対応しそうな雰囲気が出てきたので採用することにしました。

PWAの機能として主なものと言えば、「ホーム画面に追加」「オフライン」「プッシュ通知」の3つ。

「オフライン機能」は広告収益モデルのブログを想定しているSentryでは、オフラインだと広告先に飛ばないのでちょっと微妙…。
また「プッシュ通知」の機能は自前で作ろうとなるとプッシュ配信サーバーなど、それなりに複雑な機能が必要になってしまいます。

というわけで、今回はシンプルに「ホーム画面に追加」の機能だけを提供することにしました。
（※今後PWAが普及していくにあたって、広告側も何か手を打ってくると思いますので、様子を見ながら「オフライン」への対応も検討したいと思います！）

「ホーム画面に追加」ってどんな機能？

サイトに5分以上の間隔を開けて2回目以降に訪問した際に「ホーム画面に追加」のバナーを出すというのが、「ホーム画面に追加」の機能。
iOSは対応していないので、基本的にはAndroid向けの機能になります。
Androidユーザーがほとんどいないサイトであれば、対応する効果はあまり無いかもしれません…。

5分以上の間隔を開けて2回目以降の訪問というのが結構良い感じで、初回たまたま来た時ではなく、それなりに接点がある（縁がある）ユーザーに対してバナーが出るので、クリックされる確立は高いと思います。
なお、バナー表示のタイミングやバナーのデザインは完全にブラウザが決定するので、カスタマイズすることは今のところできません。

IMG 4615

「ホーム画面に追加」機能を利用するための条件

「ホーム画面に追加」機能を利用するにあたって、サーバー側には以下の条件があります。

  • HTTPS接続に対応している（テスト環境としてlocalhostの環境でも実行できます。）
  • ルートディレクトリ(/)にファイルをアップロードできる（wordpress専用サーバーなどで、wp-contentディレクトリ配下にしかファイルを置けない場合は今回の対応は難しい状況です…。）

Sentryの利用環境としてオススメの「wpX（ダブリューピーエックス）」であればどちらも条件を満たしています（HTTPS対応は追加料金は不要だが設定は必要。）。
その他の環境でお使いの場合は、上記の条件を満たすか確認してみてください。

また、利用するAndroid側の端末の条件として、Android Chrome 42以上が必要です。
動作の確認をしたい場合は、上記を満たした端末を用意しましょう。



「ホーム画面に追加」機能を利用するための準備

manifest.jsonを用意する

まず、必要になるのが、サイトの情報を記載したmanifestファイルです。

記述する内容は、

  • name：サイト名
  • short_name：サイトの短縮名（ホーム画面のアイコン下に表示される名前。英数なら12文字くらいまでいける。日本語だと6文字くらい。端末によって微妙に差がありますが…。）
  • icon：ホーム画面に追加されるアイコン（サイズは1つでも可。複数あるといい感じに適正なサイズを表示しれくれる。最近の端末は解像度が高いので192×192くらいのサイズ以上を入れておくと良く、小さいサイズはなくても良いかも。）
  • start_url：ホーム画面のアイコンをタップすると起動するページ。基本は「/」を指定する。（?utm_source=xxx&utm_medium=xxxというトラッキングパラメータを仕込んでおくと、GoogleAnalyticsでホーム画面起動のセッション数をチェックできるのでおすすめです。）
  • display：fullscreen：サイトが全画面表示されブラウザのUI要素は表示されない、standalone：全画面表示。アプリ風の見た目でステータスバーなど一部のUIが表示：minimal-ui：ブラウザのUIは表示されるがナビゲーションなどの制御のための最低限のUIのみ、browser：通常のブラウザとして起動する。fullscreenやstandaloneを使いたくなるところですが、ウェブサイトとしては使いにくくなるのでbrowserにしておくのが無難。minimal-uiでも良い。
  • theme_color：起動時の画面など、一部に利用されるサイトのテーマカラー

最低限、nameとiconがあればホーム画面に表示はできます。

manifestファイルには他にも設定できる項目があります。
詳しく知りたい人はこちらを参照してください→Web App Manifest

ファイルが用意できたら、サーバーのルートディレクトリのアップロードしましょう。

serviceworker.jsファイルを用意する

続いて、serviceworker.jsファイルを用意します。
こちらは「ホーム画面を追加」機能だけであればファイルさえあれば良いので、中身は空のserviceworker.jsというファイルを作成し、manifestと同じようにルートディレクトリにアップロードしましょう。

Sentryの設定を行う

wordpressの管理画面から「外観」→『カスタマイズ」を選択。
「PWA設定」の項目から、PWA用のHTMLを出力するにチェックをいれて保存してください。
Pwa setting

これで設定は完了です。

正しく設定できたかを確認する

ただしくアップロードできたかはChromeで確認することができます。

デベロッパー・ツールを開き、まずはApplicationタブのManifestの項目を見てみましょう。
Pwa developer
正しくアップロードされていれば、manifestファイルに記載した内容が反映されているはずです。

ServiceWorkerの設定は、ApplicationタブのServiceWorkerの項目を見てみましょう。
Pwa developer sw
エラーがなく、statusの項目で緑の丸アイコンが表示されていればServiceWorkerの設定も完了です。

これで、設定は完了です。

Sentryのアップデート方法

Sentryの公式ページのダウンロードボタンから最新版をダウンロードすることができます。
コアである「Sentry-Void」をダウンロードいただき、サーバーにアップロードすることで最新版に置き換えることができます。
※子テーマである「Sentry」に修正点はないので、コアを入れ替えるだけでメインカラー等の設定はそのままアップデートすることができます。

差分だけをダウンロードしたい方や、テーマの修正等にある程度慣れている方は、GitHubから必要な部分だけをダウンロードすることもできます。

日本でPWAの利用が本格化するのはiOSが対応してからにはなると思いますが、Androidユーザーが多いサイトでは今時点でもそれなりの効果があると思います。
是非、新機能「PWA：ホーム画面に追加機能」を試してみてください！！

Sentryは、「こういう新機能が欲しい！」「こうすればもっと便利！」「不具合あるよ！」「ここが使いにくい！」というご意見をいろいろ頂き、私自身のwordpressに対する理解と知識をパワーアップさせるのを目的に無料で提供しています。（超利己的！！）
Sentryユーザーの方は、是非いろんなご意見・不平不満を教えてください！
（私のTwitterアカウント@UltimateEz宛に送ってもらうのが一番はやくリアクションできると思います。）