Webシステムの開発効率を高めるにはJavaScriptの習得が不可欠だ。今回はJavaScriptを使った開発を便利にする、前途有望な新しいAPIを紹介していこう。

 Webシステムを開発する際に、JavaScriptは欠かせなくなっている。JavaScriptを利用した開発を便利にするのがJavaScriptから利用できるAPIだ。Webフロントエンドで使えるJavaScript APIは今なお進化し続けている。前回は現在のWebシステム開発において定番ともいえるJavaScript APIを紹介した。今回はWebフロントエンドの開発で注目の「PWA(Progressive Web Apps)」に欠かせないAPIなど、前途有望な新しいAPIを取り上げる。

PWA実現のカギ「Service Worker」

 近年、注目のPWAを実現するためのキーテクノロジーとして注目を集めているAPIが、「Service Worker」だ。Service Workerとは、バックグラウンドで動作する環境を指す。ネットワークプロキシーとして、またオフラインでも動作する点が特徴である。PWAはWebブラウザー向けのWebアプリケーションを、あたかもネイティブアプリのように利用するための枠組みだ。

 バックグラウンドの処理というと「Web Workers」が以前からある。Service Workerは、基本的にWebコンテンツ側のHTTPリクエストを横取りし、HTTPリクエストの発生に伴い起動する。単に複数の処理を同時実行するWeb Workersとは利用場面が異なる。

 またService Workerは、Webコンテンツのキャッシュが可能だ。そのため、一度リソースがキャッシュされれば、オフラインであってもWebコンテンツを起動し動作させることができる。かつて「AppCache」と呼ばれたオフラインWebアプリケーションの仕組みがあった。現在はWebブラウザーからその機能は削除されているが、Service Workerはその代替として期待されている。

 このAPIは、Internet Explorer 11(IE11)を除く主要なWebブラウザーで利用可能だ。

スマホでおなじみのプッシュ通知を実現

 スマートフォン向けアプリでは当たり前のプッシュ通知。それをWebアプリケーションで実現するのが「Push API」だ。Push APIはService Worker内で動作する、PWAのキーテクノロジーの1つである。

プッシュ通知の例
[画像のクリックで拡大表示]

 例えばニュースサイトなどで、通知の許可を求めるダイアログが表示されることが多くないだろうか。これはまさにPush APIによるプッシュ通知の許可を求めている表示だ。

 一方でPush APIは最近、あまりにも多くのサイトで多用されているため、悪名高いAPIになってしまった側面も否めない。もしPush APIの利用が候補に挙がったら、それが本当にユーザーにとって良いものなのかどうかを熟考したほうがよいだろう。このAPIは、Chrome、Edge、Firefoxで利用可能だ。

決済用画面を簡易に構築「Payment Request API」

 「Payment Request API」は、ショッピングサイトなどで必要となる決済フローを実現するAPIだ。分かりやすく言えば、ユーザーが注文を簡単に進められるようにJavaScript APIとして標準化したものだ。

Payment Request APIを使った画面の例
左はChrome、右はEdgeの例
[画像のクリックで拡大表示]

 支払い方法や配送先住所、配送方法の情報は、Webブラウザーベンダーが何らかの方法で保持する。ChromeならGoogleアカウントとひも付いており、EdgeであればMicrosoftアカウントにひも付いている、といった具合だ。

この先は有料会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら