はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
PWA（Progressive Web Apps）は、まるでネイティブアプリのような使い勝手を提供するWebページです。前回記事では、「Web App Manifest」でWebページのアプリ名やアイコンを定義する方法や、「Service Worker」でWebページをキャッシュしてオフライン時に利用する方法を説明しました。
今回取り上げる「Webプッシュ通知」は、スマホアプリで利用されるプッシュ通知機能を、Webページで実現するものです。例えば、新着記事やお得なキャンペーンといったWebページからのお知らせを、利用者にプッシュ通知で送信して、Webページへのアクセスを促すといった活用方法が考えられます。Webプッシュ通知は、ネイティブアプリの使い勝手を目指すPWAならではの機能と言えます。
本記事では、Webプッシュ通知の概要を説明するとともに、AngularのPWA対応機能を利用して、Webページからのお知らせをWebプッシュ通知で送信する想定でサンプルを実装していきます。
対象読者
- Web技術でスマホアプリを作成したいWeb技術者の方
- Webプッシュ通知を手軽に利用してみたい方
- プッシュ通知を送信して、Webページ利用を促進したい方
必要な環境
Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）が利用されます。本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。Webブラウザーは、PWA機能が動作確認しやすいGoogle Chromeを利用します。なお、今回のサンプルは、Webプッシュ通知に対応するMicrosoft EdgeやMozilla Firefoxでも動作します。EdgeとFirefoxのいずれも、受信したプッシュ通知を画面に表示できますが、Edgeではプッシュ通知受信イベントをWebページで受け取る処理（後述）が動作しません。
-
Windows 10 64bit版
- Angular 7.0.1
- Angular CLI 7.0.3
- Node.js v8.12.0 64bit版
- Google Chrome 70.0.3538.77
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、独自定義した「npm run pwa」コマンドを実行して、ブラウザーで「http://localhost:8080」にアクセスします。
Webプッシュ通知の仕組み
まず、Webプッシュ通知が送信される仕組みを説明します。Webプッシュ通知を構成する要素は表1の通りです。Webページとサーバーは開発者が実装します。プッシュサービスは、一般にWebブラウザーのベンダー（例えばChromeならGoogle）が提供します。
| No. | 構成要素 | 説明 |
|---|---|---|
| 1 | Webページ | プッシュ通知を受信するWebページ |
| 2 | サーバー | プッシュ通知を送信するサーバー |
| 3 | プッシュサービス | プッシュ通知を仲立ちするサービス |
最初に、利用者がWebページを表示したり、Webページでお知らせ通知の受信を希望したりしたタイミングで、Webページからプッシュサービスにプッシュ通知の登録（Subscribe）を行います。登録が成功すると、プッシュサービスはAPIのURL（エンドポイント）など、プッシュ通知の送信に必要な情報を返します。Webページはその情報をサーバーに送り、サーバーはそれらを保存しておきます。
プッシュ通知でお知らせを送信するときは、保存しておいたエンドポイントなどの情報を利用して、サーバーからプッシュサービスにプッシュ通知の送信を要求します。プッシュサービスは、その要求に基づき、Webページにプッシュ通知を送信します。
