まるでネイティブアプリなWebサイト「プログレッシブWebアプリ」実装のヒント（1/2 ページ）

ネイティブアプリケーションのような操作性を有する「プログレッシブWebアプリケーション」。その実装方法を取り上げる。

公開 2017年08月30日 05時00分

更新 2017年08月30日 18時16分

著者

George Lawton

[TechTarget]

印刷する

　これまでモバイルデバイスからクラウドアプリケーションへアクセスしてきたのは、Webブラウザか専用のクライアントアプリケーション（ネイティブアプリケーション）だった。Webページの処理をバックグラウンドで支えるスクリプト「Service Worker」、キャッシュの機能強化、新しいインストールオプションなど、新しいWebブラウザ機能の登場により、開発者はWebブラウザベースのアプリケーションとネイティブアプリケーションそれぞれの機能を融合する「プログレッシブWebアプリケーション」を作成できるようになった。米国で開催されたWeb開発者向けイベント「O'Reilly Fluent Conference」で、不動産サービス会社Settledの最高技術責任者（CTO）ディーン・ヒューム氏は、この新しいスタイルのアプリケーションを実装するヒントを紹介した。

　Settledは英国で不動産情報の掲載サービスを提供する。同社はプログレッシブWebアプリケーションを使用して、顧客向けに新しいダッシュボードを構築することを考えていた。このダッシュボードにより、ユーザーはネットワークに接続しているかどうかに関係なく、迅速かつ容易に同社の情報へアクセスできるようになる。このプログレッシブWebアプリケーションを実装してからというもの、SettledのユーザーはWebサイトの閲覧に2倍の時間を費やすようになり、Webサイトの約15分の1のデータを利用するようになった。その上、ページの読み込み時間は3分の1に短縮した。

　これまでのネイティブアプリケーションの大きなメリットは、ユーザーがアイコンをクリックすることで起動できる点にある。プログレッシブWebアプリケーションは、ページに含まれるマニフェストファイル（アプリケーションの実行に必要な情報を記載したファイル）を利用して同じ機能を実現する。マニフェストファイルは144×144画素のアイコンを含み、このアイコンをユーザーのホーム画面にインストールできる。Webページ自体は、HTTPS接続経由で実行するService Workerを使用する必要がある。ユーザーがアプリケーションへのリンクをインストールするオプションを得るには、少なくとも2回はWebサイトへアクセスしなければならない。

併せて読みたいお薦めの記事

ネイティブアプリとWebアプリに関する解説

ユーザー企業によるアプリケーション開発

プログレッシブWebアプリケーションを支えるService Worker

　Service Workerは、アプリケーションロジックをバックグラウンドで処理する。つまり開発者はクライアントの表示、アプリケーションロジック、クラウドとのバックエンド通信を分離することができる。「Service Workerは、Webブラウザの能力を解き放つ鍵になる」とヒューム氏は話す。「Webブラウザからの要求の取り出しと、サーバへの要求をバックグランドで実行する」（同氏）。Service Workerがヘッダを検査し、ヘッダを操作してからサーバへ送信するか、フロントエンドの要求であれば直接応答する。

　現状ではService Workerは、全ての最新Webブラウザに搭載されているか、搭載が計画されている。ただしAppleの「Safari」にはまだ実装されていない。同社の経験によると、ユーザーの75％がService WorkerをサポートするWebブラウザから同社のサイトへアクセスしていたという。プログレッシブWebアプリケーションを構築する場合、ヒューム氏は「Service Worker Toolbox」（SW Toolbox）の利用を勧めている。SW Toolboxは、Service Workerを実装するための多種多様なコードスニペット（断片的なサンプルコード）を含んでいる。

　要求を直接操作できるService Workerの機能は、新たなセキュリティの脆弱（ぜいじゃく）性をもたらす可能性がある。ハッカーは理論上、Service Workerを使用して、銀行口座に意図しない要求をする中間者攻撃を仕掛けることができる。そのためService WorkerはSSLを使用して、クライアントとバックエンドサーバ間のデータを暗号化し、セキュリティを確保する必要がある。ヒューム氏によれば、Cloudflareの「CFSSL」やオープンソースの「Let's Encrypt」などの無料ツールを使えば、開発者はSSLを非常に簡単に実装できるという。

次ページへ Service Workerに求められる新しいテスト手法