多くのサイトやサービスが導入しているのが PWA 。
Google が推進する PWA は、ウェブサイトとアプリのメリットを併せ持つウェブアプリの仕組みです。
Twitter や Instagram 、日経電子版などが導入し、大きな成果をあげています。
PWA の中で最も簡単に実装できるのが、ホーム画面への追加機能。
WordPress サイトにも簡単に実装でき、あなたのサイトがウェブアプリに変貌します。
PWA のメリット
PWA を実装することで、多くのサイトやサービスが訪問数やページビューを大きく高めています。
成功例として真っ先に挙げられるのが Twitter 。 Twitter Lite として提供されている PWA 版 Twitter は、閲覧ページ数やツイートの投稿数が高まっています。
また、通常のアプリのサイズは約 72MB に対し、 Twitter Lite は 約 0.16MB しかありません。それでいて使い勝手は通常のアプリと変わりません。
日本のサイトでは、楽天レシピが成功例として 2017 年の Google 開発者向け会議で紹介されています。
また、不動産総合情報サイト SUUMO も成功事例として知られています。
私も Twitter 、 Instagram 、 Pinterest 、日経電子版の PWA を使っており、いずれもアプリはアンインストールしました。
導入後の動作
ホーム画面への追加機能を導入後に、どのように動くのかをご説明します。
ホーム画面への追加機能に対応したブラウザでサイトにアクセスすると、「 ホーム画面に追加 」バナーが表示されます。
バナーが表示される条件は、 2 回以上アクセスすること、前回のアクセスより 5 分以上が経過していることです。ただし、この条件は、今後変更される可能性があります。
執筆時点でホーム画面への追加機能に対応している主要ブラウザは、 Android の Chrome と Firefox です。
ただ、ベータ版 iOS 11.3 の Safari 11.1 では対応しています。
また、 Microsoft は Windows 10 の次期大型アップデートで、 Edge と Windows 10 で PWA を正式にサポートする予定です。
さらに、2018 年中に PC 版 Chrome も PWA に対応すると言われています。すでに Chrome OS は対応済みです。
尚、ホーム画面への追加機能に対応していないブラウザでも、ブラウザのメニューからホーム画面への追加を選ぶことで追加は可能です。
ホーム画面に追加すると、アプリと同じくサイトのアイコンがホーム画面に追加されます。
アイコンをタップすると、アプリと同様の起動画面が表示されます。
起動後は、アプリと同様にブラウザのアドレスバーがない画面でサイトを閲覧できます。
また、アプリとして取り扱われるため、アプリドロワーにアイコンが表示されます。
端末の設定から、アプリとしての情報を確認できます。
この PWA のホーム画面への追加機能をサイトに導入するには、以下の条件を満たす必要があります。
- https に対応していること
- 次の情報が記述されたマニフェストが作成されていること
- name
- short_name
- start_url
- 192 x 192px の png アイコン
- Service Worker が登録されていること
アイコン作成、マニフェスト作成、 Service Worker の登録をご説明します。マニフェスト作成はほぼコピペ、 Service Worker の登録は全てコピペでできます。
アイコンを作成
必須条件の 192 x 192px の png アイコンを作成します。
ただ、サイトパフォーマンス計測ツールの Lighthouse は、512 x 512px のサイズが必要だと指摘してきます。
さらに様々なケースに対応するために、全部で 8 つのサイズの png アイコンを作成します。
作成するサイズと、作成した画像に付けるファイル名は以下のとおりです。
| サイズ | 画像ファイル名 |
|---|---|
| 48 x 48px | pwa-48.png |
| 72 x 72px | pwa-72.png |
| 96 x 96px | pwa-96.png |
| 144 x 144px | pwa-144.png |
| 168 x 168px | pwa-168.png |
| 192 x 192px | pwa-192.png |
| 256 x 256px | pwa-256.png |
| 512 x 512px | pwa-512.png |
WordPress 標準のサイトアイコン機能を使っていれば、現在使用しているアイコンをリサイズするだけで全てのサイズを作成できます。
512 x 512px のアイコンをお持ちでない場合には、 512 x 512px のみを新規作成し、あとはリサイズすれば OK 。
作成したアイコンは、サーバーに設置します。
設置場所は、管理のしやすさを考慮し WordPress をインストールしたディレクトリにします。 wp-admin フォルダ や wp-content フォルダ、 wp-includes フォルダと同じ階層です。
ほとんどのサイトでは、ドメインディレクトリの直下に WordPress をインストールされているはずです。
FTP ソフトやサーバーのファイルマネージャーなどを使い、上記のディレクトリに 1 つフォルダを作成し、フォルダ名を pwa-images とします。
pwa-images フォルダに、作成した 8 つのアイコンをアップロードします。
マニフェストを作成
次に必須条件のマニフェストを作成します。
WordPress をインストールしたディレクトリに 1 つファイルを作成し、ファイル名を manifest.json とします。
アイコンをアップロードした pwa-images フォルダと同じ階層です。
作成した manifest.json ファイルに、以下の内容を追加します。
{
"name": "FirstLayout",
"short_name": "FirstLayout",
"description": "WordPressのカスタマイズを紹介",
"start_url": "/?utm_source=home-screen&utm_medium=pwa",
"display": "standalone",
"theme_color": "#161825",
"background_color": "#ffffff",
"icons": [
{
"src": "pwa-images/pwa-48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "pwa-images/pwa-72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "pwa-images/pwa-96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "pwa-images/pwa-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "pwa-images/pwa-168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "pwa-images/pwa-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "pwa-images/pwa-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "pwa-images/pwa-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}このうち必須要素が、 name 、 short_name 、 start_url 、 192 x 192 の png アイコンです。
また、 icons 以外の要素は、サイトに合わせて変更します。
各要素をご説明します。
name
ホーム画面への追加バナーに表示される名前です。
通常はサイト名にします。
short_name
ホーム画面のアイコン下に表示される名前です。
サイト名が長い場合には、略称などの短く省略したサイト名を指定します。一般的な長さである場合には、サイト名をそのまま指定します。
description
ウェブアプリの説明を指定します。
サイトのキャッチフレーズと同じにするといいでしょう。
start_url
ホーム画面から起動した時に、最初にアクセスする URL です。
通常は、トップページ（ フロントページ 1 ページ目 ）を指定します。
上記のマニフェストでは、 "/?utm_source=home-screen&utm_medium=pwa" としています。これは Google Analytics で計測できるように、トップページにパラメータを追加しているためです。
Google Analytics の集客 → すべてのトラフィック → 参照元 / メディアより、 home-screen / pwa で PWA からのアクセスを解析できます。
ただ、 utm_medium に pwa との分類名はないため、集客 → すべてのトラフィック → チャネルでは（ other ）に分類されます。
パラメータは、サイトに合わせてご指定ください。 Google Analytics での計測が不要な場合には、 "/" だけで構いません。
display
表示モードを指定します。
表示モードは以下の 4 つから選べます。
fullscreen | デバイス画面の利用可能な表示エリアがすべて使用されます（ つまり全画面 ）。ゲームアプリに適しています。 |
|---|---|
standalone | ステータスバーやナビゲーションバー（ ホームボタン・戻るボタンなど ）は表示されますが、ブラウザの UI は表示されません。一般的なアプリに適しています。 |
minimal-ui | standalone に最低限のブラウザの UI が追加されます。ただし、追加される UI はブラウザによって異なります。 |
browser | ブラウザと全く同じです。 |
通常は standalone を選びます。
一般的なサイトでは、 fullscreen は全くおすすめできません。戻るボタンが常に表示されないため、スムーズに 1 つ前のページに戻れません。サイト回遊率が著しく低下する恐れがあります。
theme_color
基本色を指定します。
この基本色は、ステータスバーに使用されます。
CSS ではないため、 3 桁ではなく 6 桁のカラーコードで指定します。
白を指定する場合は、 #fff ではなく #ffffff です。
background_color
起動画面の背景色を指定します。
Google は、サイトの背景色と同じ色の指定を推奨しています。起動画面とサイトの背景色が同じだと、スムーズな遷移を表現できるためです。
Twitter や Instagram は、推奨どおりにサイト背景色の白を指定しています。
一方、日経電子版はサイト背景色の白とは異なる #00385c を指定しています。ただ、 theme_color も #00385c を指定していること、ナビの背景色が似た色であることから、遷移がスムーズに感じます。
6 桁のカラーコードで指定します。
icons
作成したアイコンを指定します。
アイコンは、ホーム画面や起動画面などで使用されます。 192 x 192px が必須のサイズです。
serviceWorker.js を作成
必須条件の Service Worker を使えるように、ファイルを作成します。
WordPress をインストールしたディレクトリに 1 つファイルを作成し、ファイル名を serviceWorker.js とします。
すでに作成した pwa-images フォルダや manifest.json ファイルと同じ階層です。
serviceWorker.js ファイルに以下のコードを追加します。
self.addEventListener( 'fetch', function( event ) {
});中身は空の Fetch イベントを追加します。
今回は PWA の通知機能もオフライン機能も実装しません。だからと言って serviceWorker.js に何も記述しないと、以下のエラーが出てしまいます。
Site cannot be installed: the page does not work offline
このエラーが出ると、いつまで経ってもホーム画面への追加バナーが表示されません。
私の環境だけではなく、 PWA を導入しているいくつかのサイトでも同じエラーが出ています。
エラーを出さないために、中身は空でも Fetch イベントを追加する必要があります。
manifest.json の読み込みと Service Worker の登録
作成した manifest.json の読み込みと Service Worker への登録をするために、以下のコードをサイトの <head> タグ内に追加します。
<link rel="manifest" href="/manifest.json">
<script>
window.addEventListener("load",function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("/serviceWorker.js").then(function(){console.log("serviceWorker registed.")})["catch"](function(e){console.warn("serviceWorker error.",e)})});
</script>Simplicity をお使いであれば、子テーマの header-insert.php に追加すれば OK 。
これで WordPress サイトに PWA のホーム画面への追加機能の実装は完了です。
確認
きちんと動作をしているか、 Chrome のデベロッパーツールで検証します。
Chrome でサイトにアクセスし右クリック → 検証より、デベロッパーツールを開きます。
Console タブで確認
デベロッパーツールを開いた後は、まず Console タブを開きます。 serviceWorker registed. と表示されると、 Service Worker の登録に成功しています。
一方、 serviceWorker error. と表示されると、登録に失敗しています。 <head> タグ内に追加したコードに間違いがないか確認します。
Application タブで確認
次に Application タブを開きます。 PWA の検証は、主に Application タブで行います。
マニフェストがある場合には、その内容が表示されます。
右側にある Add to homescreen をクリックすると、アドレスバーの下に「 このサイトをシェルフに追加するといつでも使えるようになります。 」のバナーが表示されます。
このバナーが表示されると、ホーム画面への追加機能は正常に動作しています。
バナーが表示されない場合には、エラーの内容に従い修正します。
今回ご紹介した方法は、最もシンプルなホーム画面への追加機能の実装です。
シンプルであるがゆえに、何人にバナーが表示されたのか、そのうち何人がホーム画面に追加したのかは分かりません。 Google Analytics で、おおよその数を計算するしかありません。
ただ、難易度は極めて低く、 CSS を変更するよりも簡単に実装できます。アイコンさえ作ってしまえば、 5 分から 10 分しかかかりません。
個人ブログで、どれだけ成果を得られるのかは不明です。しかし、やって損はありません。リピーターが多いブログであれば、予想以上の成果を得られるかもしれません。
企業や店舗、サービスのサイトであれば、絶対にやるべきです。
ホーム画面への追加機能は、 PWA への入り口です。
Google だけではなく、 Firefox や Microsoft 、 Apple も PWA の対応を急いでいます。
今後は PWA に対応しているかで、サイトのアクセス数が大きく異なる時代になるかもしれません。