先進のWebフロントエンド技術を導入する事例が増えている。この動きに乗り遅れてはまずい。本特集では、ITリーダーやITエンジニアが知っておくべきWebフロントエンド技術のAtoZを取り上げる。 今回から「PWA」について学ぼう。

 最新Webフロントエンド技術であるPWA(Progressive Web Apps)に対応したアプリが続々と登場している。注目を集める理由は前回紹介したオフライン利用を実現したことに加えて、今回紹介するプッシュ通知の存在が大きい。業務システムでは、担当者に即座に連絡できたり、システムで問題が発生したときに迅速に通知したりすることが求められる。これにプッシュ通知が役立つのだ。

 プッシュ通知は、スマホユーザーにはなじみ深い機能だろう。何かのイベントに応じて画面上に通知を表示する機能だ。ユーザー自身が取得操作をすることなく、自動的に端末に届くのが特徴である。例えば、新着メールが届いた際に画面上にメールのタイトルなどが表示される、といった使い方ができる。

Firefoxに届いたプッシュ通知の例
Firefoxに届いたプッシュ通知の例
[画像のクリックで拡大表示]

 プッシュ通知はこれまで、スマホアプリ専用の機能だった。プッシュ通知を実現するために、わざわざスマホアプリを開発するといったニーズがあったほどである。それがPWAの登場で、ブラウザーベースのWebアプリでもプッシュ通知を送信したり、表示したりできるようになった。

 ここではスマホアプリのプッシュ通知と区別するため、Webブラウザー向けプッシュ通知を「Webプッシュ通知」と呼ぶ。Webプッシュ通知によって、PWAの用途はさらに広がったと言っていい。

 なお、PWAのWebプッシュ通知はとても便利な機能だが、現時点では表示できるOSやブラウザーが限定される点に注意してほしい。スマホやタブレットでは、Androidだけがサポートしている。残念ながらiOSではWebプッシュ通知を表示できない。デスクトップPC向けブラウザーのGoogle ChromeやFirefox、Edgeでは、標準仕様としてWebプッシュ通知に対応している。一方で米アップル(Apple)のブラウザーであるSafariでは、macOSの独自機能を使ってWebプッシュ通知に対応しなければならない。

Webプッシュ通知の方法は4つある

 Webプッシュ通知の実現方法は、以下のように大きく4つある。

  • Notifications API
  • Push API/VAPID
  • macOS Safari独自のWebプッシュ通知
  • Google Chrome独自のWebプッシュ通知

 下2つの独自仕様は、Webプッシュ通知を実現できるブラウザーが限られてしまう。Webアプリはどんなブラウザーでも同じように動作するのがメリットの1つだ。ブラウザー独自のWebプッシュ通知では、このメリットを生かせない。

 そこでまずは、Notifications APIとPush API/VAPIDへの対応を検討し、macOSのSafariへの対応は必要なときに作り込むのが現実的な対応となる。

 それでは、上2つの特徴を説明しよう。Notifications APIは、JavaScriptプログラムだけで実現できるWebプッシュ通知の仕組みだ。スマホやタブレットへのプッシュ通知を可能にするには通知専用のサーバーを用意する必要があるが、Notifications APIを使えば不要になる。

 ただし、Notifications APIを使う場合は注意も必要だ。ブラウザーで実行するので、Webプッシュ通知を送受信するWebページを開いていないと動かない。通知を受け取るには、ずっと同じページを開いていないといけないわけだ。

 そのため用途は限られる。例えば長時間かかる処理を実行し、終わったら通知するという使い方が考えられる。また、メールやチャットのような常時表示しているWebアプリの新着通知にも利用できるだろう。FacebookやTwitterのようなSNS、Gmailのようなメールアプリ、Slackのようなチャットサービスなどに利用できる。