Push7をAMPページに導入する
AMPについて
AMP (Accelerated Mobile Pages) は、Googleの推進するモバイルでのWeb閲覧を高速化することを目的としたプロジェクトです。
このページでは、Push7をAMP対応のページに追加する方法についてご紹介します。
サンプル実装
下記ページにて、AMPページでのPush7の動作サンプルをご確認いただけます。
https://push7-amp.netlify.com/
完全なソースコードをGitHubで公開していますので、実装される場合には参考として下さい。
https://github.com/gnexltd/push7-amp-sample
導入方法
Push7のService Workerは、AMPのコンポーネント <amp-web-push> で定められるルールに沿って動作します。
具体的には、
- 関連ファイルの設置
amp-web-pushコンポーネントの読み込み- appno, ServiceWorkerなどを指定する設定タグの設置
- 購読ボタンを表示するタグの設置
の4点を実施する必要があります。 ここからはその4点についてそれぞれ解説を行います。
関連ファイルの設置
Push7をAMPページに導入するために、3つのファイルをサイト直下に設置する必要があります。
- amp-web-push-permission-dialog.html
- ボタンをクリックした際に表示されるポップアップの内容です。内部にはメッセージが記載されており、必要に応じて変更が可能です
- amp-web-push-helper-iframe.html
- AMPページとポップアップの通信をサポートするファイルです。内容を変更する必要はありません。
- push7-worker.js
上2つのファイルは、上記リンクを 右クリック→リンク先を保存する として保存します。
push7-worker.js は、こちら からダウンロードしてください。なお、このファイルはPush7 Nativeモードで利用されるファイルと同じであるため、既にPush7をNativeモードで導入されている場合、追加でのファイル設置は不要です。
amp-web-push コンポーネントの読み込み
AMP公式ドキュメント に従って amp-web-push コンポーネントをロードします。
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
上記タグを head タグ内に設置します。
appno, ServiceWorkerなどを指定する設定タグの設置
amp-web-push のドキュメントに沿って、設定タグを設置します。
amp-web-push タグに、以下の属性を設定し、サイトに埋め込んでください。
| 属性 | 値 | 例 |
|---|---|---|
| helper-iframe-url | 設置した amp-web-push-helper-iframe.html への絶対URL |
https://example.com/amp-web-push-helper-iframe.html |
| permission-dialog-url | 設置した amp-web-push-permission-dialog.html への絶対URL |
https://example.com/amp-web-push-permission-dialog.html |
| service-worker-url | 設置した push7-worker.js への絶対URL末尾に ?appno=[使用するPush7 アプリケーションのappno] を加えたもの |
https://example.com/push7-worker.js?appno=123456789 |
具体的な実装については、以下ファイルも御覧ください。
https://github.com/gnexltd/push7-amp-sample/blob/master/src/_push7-config.html
購読ボタンを表示するタグの設置
ユーザーに購読を促すボタンを設置します。
https://github.com/gnexltd/push7-amp-sample/blob/master/src/_push7-widget.html
上記タグを購読ボタンを表示したい場所に設置します。
https://github.com/gnexltd/push7-amp-sample/blob/master/src/_push7-amp-style.html
ボタンに適用される上記CSSを head タグ内に設置します。
購読ボタンの文字やCSSは自由にカスタマイズしていただけます。AMPのサンプル実装を参考に、独自のボタンやメッセージを表示していただくことも可能です。