AngularのPWA（Progressive Web Apps）機能でWebプッシュ通知を実装
次世代Webアプリケーションフレームワーク「Angular」の活用 第17回
ダウンロード サンプルファイル (131.0 KB)
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はネイティブアプリのような使い勝手のWebページを実現するPWA（Progressive Web Apps）の利用法を紹介しましたが、今回はPWAならではの機能と言える、Webプッシュ通知をAngularで実装する方法を説明します。
はじめに
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ページにプッシュ通知を送信します。
この記事は参考になりましたか？
- 次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
