フロントエンド技術を学ぼう 2-24.プログレッシブWebアプリについて学ぶ-もじゃげくらぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第34回はPart II: Learning Front-End Devから、24項のLearn Progressive Web Appを紹介します。

プログレッシブWebアプリについて学ぶの説明です。

プログレッシブWebアプリについて学ぶ

従来のアプリケーションとは異なり、プログレッシブWebアプリケーションは、通常のWebページ(またはWebサイト)とモバイルアプリケーションのハイブリッドです。この新しいアプリケーションモデルは、最新のブラウザーで提供されている機能とモバイルエクスペリエンスの利点を組み合わせる試みです。

2015年にデザイナーのFrances Berriman氏とGoogle ChromeエンジニアのAlex Russell氏は、Service WorkersやWeb App Manifestsを含んだ最新のブラウザでサポートされている新しい機能を利用したアプリを意味する、プログレッシブWebアプリという言葉を作り出しました。これはWebアプリをネイティブOS上のファーストクラスアプリケーションと同等にアップグレードします。

Google Developersによれば、これらの特性は次のとおりです。

特性	概要
プログレッシブ	中核となる思想として、プログレッシブな強化により構築されているので、ブラウザ種類に関わらず、すべてのユーザーが使用できます。
レスポンシブ	デスクトップ、モバイル、タブレット、まだ見ぬ形状のものですら合う様に設計されています。
オンライン状態に依存しない	Service Workersは、オフラインでの作業や低速ネットワークでの作業を可能にします。
アプリの様に	アプリスタイルの動作とナビゲーションにより、ユーザーはネイティブアプリのように感じます。
フレッシュ	Service Workersのアップデートプロセスのおかげで、常に最新の状態を保てます。
安全	スヌーピングを防止し、コンテンツが改ざんされていないことを保証するために、HTTPS経由で提供されます。
見つけやすさ	W3Cマニフェストのおかげでアプリケーションとして識別可能となり、Service Worker registration scopeのおかげで、検索エンジンがそれらを見つけることが出来ます。
再エンゲージブル	プッシュ通知などの機能を使用して簡単に再エンゲージメントを実現できます。
インストール可能	ユーザーがアプリストアにわずらわされずに、最も便利なアプリをホーム画面に保持できるようにします。
リンク可能	URL経由で簡単に共有でき、複雑なインストールを必要としません。