プログラミング言語の進化や新たな技術の台頭により、Webフロントエンド開発が劇的に進化している。処理が遅い、ネットなしでは利用できない、はもう過去の話。現在のWebフロントは、高速にサクサクと動き、オフラインでも動作するのが当たり前になりつつある。Webフロントエンド開発を支える新技術を解説する。

 最新のWebフロントエンド開発を牽引するのがPWA(Progressive Web Apps)だ。ブラウザーの対応が進み、今年はPWA対応のアプリが急増する可能性が高い。PWAとは、特定の技術やフレームワークを指すものではない。Web標準技術を使って、これまでのWebアプリでは実現できなかったユーザー体験を提供するというコンセプトや、それを実現するための技術群を指す。

 まず、PWAのWebアプリの特徴を挙げる。PWAのWebアプリは、スマホのネイティブアプリのような操作性を可能にする。インターネットに接続していないオフライン環境でも使える、ホーム画面にアプリのアイコンを追加できる、プッシュ通知が可能、といった特徴がある。App StoreやGoogle Playストアを使わずに、アプリを配布できるのもPWAのメリットだ。

 具体的にどのような仕組みで動くのかを説明する。PWAのWebアプリを実装するには、JSON形式で記述されたマニフェストファイルと、Service WorkerというJavaScriptプログラムが必要になる。

PWAを実現する2つの要素
[画像のクリックで拡大表示]

 マニフェストファイルには、ユーザー端末のホーム画面にWebアプリを追加する際に必要な基本情報を記述する。定義するのはアプリの動作ではなく、主にその外観がメインと考えてほしい。例えば、アプリ名やアプリのアイコン、アプリの背景色、アプリの概要、縦や横といった起動時の画面の向き、などがこれに当たる。

 Service Workerは、WebアプリとWebサーバーのネットワークを仲介して、リクエストを制御する。プロキシーのような役割と考えてほしい。Webアプリのオフライン対応やバックグラウンドでの同期処理、プッシュ通知などを提供する基盤になる。ブラウザーがバックグラウンドでService Workerを実行し、ブラウザーのウインドウが閉じられても動作し続ける。

 ただし、Service Workerを使うにはSSL接続が必須だ。つまり、HTTPSを使った通信しか利用できない。Service Workerには、Webアプリとサーバーの間の通信に割り込む機能が備わっている。この機能を悪用されて攻撃を受けると、ユーザーが想定しないサーバーと通信し、悪意のあるプログラムを実行する、といった危険性があるからだ。

この先は日経 xTECH Active会員の登録が必要です

日経xTECH Activeは、IT/製造/建設各分野にかかわる企業向け製品・サービスについて、選択や導入を支援する情報サイトです。製品・サービス情報、導入事例などのコンテンツを多数掲載しています。初めてご覧になる際には、会員登録(無料)をお願いいたします。