Service Workerを活用

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

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

　これまでモバイルデバイスからクラウドアプリケーションへアクセスしてきたのは、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アプリケーションを支えるService Worker

この記事の著者

関連記事

• 

  「ネイティブアプリ」と「Webアプリ」、モバイルアプリはどれが使いやすい？

• 

  スマホで使いたいのはやっぱりネイティブアプリ、「モバイルの常識」はどう変化？

• 

  モバイルアプリで知っておきたいHTML5の「完全無欠ではない」ポイント

• 

  AWSの最大の魅力はAPI、キヤノンのサービス開発部隊がクラウドで実現したこと

• 

  劇的に進むユーザー企業の内製化　IT部門はスピードと“シャドーIT”にどう対応する？

新着ホワイトペーパー PR

• 事例
  [株式会社キーエンス] PCが苦手でも自動化できる　ポポラマーマなど4事例に学ぶ「ナビ搭載型RPA」活用
• 製品資料
  [株式会社クレオ] IT部門を“価値創造組織”へ転換　IT管理プロセスの改革で戦略的リソースを確保
• 製品資料
  [株式会社クレオ] Excel管理が限界に――ITサービス管理の脱・属人化と運用高度化を実現する方法
• 製品資料
  [株式会社クレオ] 西武グループやイオングループも実践　事例に学ぶ「ITサービスデスク業務」改善
• 製品レビュー
  [株式会社クレオ] 「使われないITシステム」から脱却　現場が求める業務改善を実現する方法