AMPとWebプッシュ通知の連携
AMPの発表から約2年が経ち、AMP ProjectはこれまでのAMPの成長と今後の方針をブログで公開しました。この2年間でAMPページが約40億ページ以上、2500万ものドメインで公開されており、次のような効果が出ていることも発表しています。
- Webサイトのトラフィックが約10%向上
- ユーザーのページ滞在時間が約2倍に増加
- ECサイトでの売上に関係するコンバージョン率が非AMPページと比べて20%増加
AMP対応を行うことで大きな効果を期待できますが、さらに効果を高める手段の一つにWebプッシュ通知があります。
Webプッシュ通知は購読を許可したユーザーに対してネイティブアプリのような通知を送る機能のことで、ユーザーのリピート率を向上させることに特化しています。AMPとWebプッシュ通知を組み合わせることで、新規ユーザーだけでなくリピートのユーザー数を向上させる手助けになります。
AMPは仕様で既定のJavaScript以外は使用を禁止されているため、非AMPページでWebプッシュ通知の実装方法をそのまま用いることはできません。amp-web-pushという専用のコンポーネントを使用することでWebプッシュ通知の購読を行う環境を実装することができます。amp-web-pushはあくまでもWebプッシュ通知の購読を行う環境を実装するためのものなので、購読者IDなどをデータベースと連携したり、通知を受信した際の処理などは別途作成する必要があります。
amp-web-pushを使用するためには、非AMPページでWebプッシュ通知を実装する際に必要な、「manifest.json」と「serviceworker.js」に加え、「helper-iframe.html」と「permission-dialog.html」が必要となります。
helper-iframe.html
Webプッシュ通知を購読するために必要なJavaScriptを実行するためのファイルです。serviceworker.jsのインストールや、「permission-dialog.html」を別ウィンドウで表示したりする処理を記述します。
執筆時点では、amp-web-pushのドキュメントに雛形へのリンクがあるため、雛形をもとに作成すると効率が良いです。
permission-dialog.html
ブラウザの通知機能の使用を申請するためのダイアログを表示します。購読者IDをサーバーサイド側に送信するなどの処理はこのファイルに記述します。
こちらも「helper-iframe.html」と同様に、amp-web-pushのドキュメントに雛形へのリンクが用意されているので基本的に雛形を活用することを推奨します。
AMPページに実装してみる
今回はGoogle Chrome 63から使用できる、DevToolのWebプッシュ通知のシミュレーションを使用してAMPページでも購読が開始できるか確認してみます。執筆時点ではGoogle Chrome 63はまだベータ版のため、Google Chrome Canaryを使用します。
またWebプッシュ通知とamp-web-pushの仕様上、HTTPS環境でなければ動作を確認することができないので注意が必要です。
今回は、「helper-iframe.html」と「permission-dialog.html」は雛形のまま使用します。次がAMPページのマークアップです。
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<title>AMP Web Push Sample</title>
<link rel="canonical" href="/">
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
main{padding:16px}.btn-subscribe,.btn-unsubscribe{font-size:16px;font-family:sans-serif;display:block;border:0;min-height:40px;padding:4px 16px}.btn-subscribe{background:#00acc1;color:#e0f7fa;box-shadow:3px 3px 0 0 #007c91}.btn-unsubscribe{background:#1e88e5;color:#e3f2fd;box-shadow:3px 3px 0 0 #005cb2}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
</head>
<body>
<main>
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://example.com/helper-iframe.html"
permission-dialog-url="https://example.com/permission-dialog.html"
service-worker-url="https://example.com/serviceworker.js"
></amp-web-push>
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="210" height="42">
<button type="button" class="btn-subscribe" on="tap:amp-web-push.subscribe">プッシュ通知を購読する</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="subscribed" layout="fixed" width="210" height="42">
<button type="button" class="btn-unsubscribe" on="tap:amp-web-push.unsubscribe">プッシュ通知の購読を解除する</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="blocked" layout="fixed" width="210" height="42">
<p><strong>ブラウザの通知機能がブロックされています。購読する場合は通知機能を許可してください。</strong></p>
</amp-web-push-widget>
</main>
</body>
</html>
amp-web-push要素のhelper-iframe-url属性、permission-dialog-url属性、service-worker-url属性には、対象となるファイルのURLを「https://」から始まる形式で記述します。そしてamp-web-push-widget要素を用いて、ブラウザの通知機能の使用状況ごとに表示する要素をマークアップします。
「serviceworker.js」は次のようにタイトルとアイコン、リンクURLは固定の情報を記載し、本文はDevToolに入力された内容を表示するようにします。
self.addEventListener('push', (event) => {
event.waitUntil(
self.registration.showNotification('お知らせ', {
body: event.data.text(),
icon: 'https://example.com/img/icon.png'
})
);
});
self.addEventListener('notificationclick', (event) => {
clients.openWindow('https://www.mitsue.co.jp/knowledge/blog/frontend/');
event.notification.close();
});
上記ファイルの準備ができたら実際にページを確認します。購読ボタンをクリックすると別ウィンドウで通知を許可するか質問されるので許可します。通知機能を許可したらDevToolの「Service Workers」、Push欄に通知本文を入力し、PushボタンをクリックすることでWebプッシュ通知をシミュレートすることができます。実際に通知してみると、次のキャプチャのようにPush欄に入力した内容が本文に反映して表示されます。
Push欄に記載した内容が通知本文に反映されています。
今回はGoogle ChromeのDevToolを使用して簡易的なテストを行いましたが、AMP Cacheにキャッシュされた、ドメインの異なるページで購読された場合も問題なくWebプッシュ通知を受信することができます。
まとめ
AMPでプッシュ通知を実装する際には、非AMPページとは異なり購読処理を行うJavaScriptを外部のHTMLファイルとして読み込む必要があります。そのため、通常ページで既にWebプッシュ通知を導入している場合は、購読用のJavaScriptをAMP用に「helper-iframe.html」と「permission-dialog.html」の二つに処理を分割して作成するなどの作業が必要になります。
高速にページを表示することでユーザーを離脱させないAMPと、訪問したユーザーに対してリピートを促すことができるWebプッシュ通知の相乗効果でユーザーのWebサイト利用率が向上できるのではないでしょうか。