AMPのコンポーネント amp-web-pushを使用するとプッシュ通知購読機能をAMPページに搭載することができます。プッシュ通知サービスプロバイダー OneSignalは、AMPページでのプッシュ通知購読機能をサポート（提供）しています。
OneSignal Webプッシュ通知購読機能をAMPページに設定する方法
現時点ではAMPのWebプッシュ通知購読機能は、Androidのみ対応可能です。iOSに関しては、まだサポートされていません。以下は、OneSignalのAMP Webプッシュのデモです。
特定のAMP化プラグイン、AMP対応WordPress テーマでの設定方法
WordPress プラグイン AMP for WPを使用してAMP化しているサイトの場合、本記事で紹介する方法ではなく、プラグインの設定の方で簡単に対応可能です。
プラグイン AMP for WPとOneSignal プッシュ通知の連携方法
事前に必要な作業
OneSignalのアカウントとサイトのWeb プッシュ アプリ IDが設定で必要となります。アカウントの作成や通常ページでのプッシュ機能の設定方法とAPP IDの取得方法は、以下の記事を御覧下さい。
AMP Web Push スクリプトの設置
以下のスクリプトコードを AMP ページ <head>タグ内に設置します。
AMPページの<head>タグ内にコードを設置する方法は、AMP化している方法（プラグインやテーマ）によって異なります。AdSenseのAMP 自動広告のコードの<head>タグ内への設置方法と同じです。(<body>タグ直後に設置するコードについては、後で紹介します。）
SimplicityにAdSense AMP 自動広告を設定する方法
CocoonにAdSense AMP 自動広告を設定する方法
AMP for WordPress でAMP化したページにAdSense 自動広告を設置する方法
AMP Web プッシュ通知拡張機能の設定
以下の二つのAMPプッシュ通知設定用のファイルをダウンロードして、サイトのルートにアップロードします。
続いて、以下のコードのYOURDOMAIN.COMを設定するサイトのドメインに置き換え、YOUR-APP-IDにOneSignalのWebプッシュアプリのIDに変更した後、AMPページの<body>タグ内（<body>の直下）に設置します。<body>タグへのコードの設置方法は、上で紹介したAdSense AMP 自動広告コードの設置方法で紹介したページなどをご参照下さい。
<amp-web-push id="amp-web-push" layout="nodisplay" helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID" permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID" service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID" ></amp-web-push>
ウィジェットの設定
AMPページでのプッシュ通知購読ボタンと購読解除メッセージの表示を行うウィジェットを、AMPページに設置します。ウィジェットの設置位置は、以下の様なユーザーエクスペリエンス、ユーザーフローの理由から記事下（メインコンテンツの後）が推奨されています。
- ウィジェットは、AMPの仕様上、スペースが予め必要となります。購読済みのユーザーに対しても、ウィジェットのスペースを埋めて表示することはできません。ウィジェットをページ上部などに設置すると、購読中、非購読を問わずすべてのユーザーに対してウィジェットが表示され、余分なスクロールを強いることになります。
- サイトやコンテンツの価値をユーザーが理解した上で、プッシュ通知の購読を尋ねるのが妥当な流れです。記事の終わりに購読、非購読のボタンを設置するのは、ユーザーにとって自然な位置です。
- デフォルトのAMP Webプッシュ通知 ウィジェットは、デフォルトではプッシュ通知購読ボタン、購読済みのユーザーには購読を止めるメッセージが表示されます。ボタンが記事の上や途中にあると誤タップする可能性があります。
以下のコードをAMPページの<head>タグ内（通常CSSの場所）に設置します。
<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
amp-web-push-widget button.subscribe .subscribe-icon {
margin-right: 10px;
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}
amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
以下のコードを購読・非購読のボタンを表示する位置に設定します。位置は、記事下が推奨です。設定方法は、WordPressの場合は、テキストウィジェットなどを使用します。（記事下に広告コードを設置する方法と基本的に同じです。）
<!-- A subscription widget --> <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45"> <button class="subscribe" on="tap:amp-web-push.subscribe"> <amp-img class="subscribe-icon" width="24" height="24" layout="fixed" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4="> </amp-img> プッシュ通知を購読する </button> </amp-web-push-widget> <!-- An unsubscription widget --> <amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45"> <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">プッシュ通知を非購読する </button> </amp-web-push-widget>
上のコード内の「プッシュ通知を購読する」、「プッシュ通知を非購読する」のメッセージはお好みに合わせて変更して下さい。
AMP ページの記事下に以下の様にボタンが表示されます。
コメントを残す（承認後表示されます）