Webプッシュ通知サービス「Push7」の使い方や
活用方法をご提案します。

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> で定められるルールに沿って動作します。

具体的には、

  1. 関連ファイルの設置
  2. amp-web-push コンポーネントの読み込み
  3. appno, ServiceWorkerなどを指定する設定タグの設置
  4. 購読ボタンを表示するタグの設置

の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-config.html

ボタンに適用される上記CSSを head タグ内に設置します。

購読ボタンの文字やCSSは自由にカスタマイズしていただけます。AMPのサンプル実装を参考に、独自のボタンやメッセージを表示していただくことも可能です。