レスポンシブWebデザインとプログレッシブWebアプリ（PWA）：違い

これら2つの外観とパフォーマンスは非常に似ているため、レスポンシブWebデザインとプログレッシブWebアプリという2つの一般的なWeb開発アプローチの間に詳細な比較がないのはなぜか疑問に思う必要があります。 さて、これです。 この記事では、レスポンシブWebデザインとプログレッシブWebアプリを比較し、それらが実際にどこで実際に異なるのかを調べます。

レスポンシブウェブデザイン

それは何ですか

レスポンシブウェブデザイン（RWD）は、プログレッシブウェブアプリの構想より5年早く、2010年にイーサンマルコットによって最初に説明されたウェブ開発へのアプローチです。

使い方

基本的に、レスポンシブWebデザインの哲学は、ユーザーのデバイスに対応することを目的として設計と開発を行うことです。つまり、使用中のデバイスの動作、サイズ、プラットフォーム、および向きに対応することを意味します。 これは、流動的なグリッド、柔軟な画像、およびCSSメディアクエリを使用して実現されます。

流動的なグリッド、柔軟な画像、メディアクエリは、レスポンシブWebデザインの3つの技術的要素です…

Ethan Marcotte、レスポンシブWebデザイン

流体グリッド

流体グリッドで設計されたレスポンシブWebサイトは、ピクセルベースの寸法を定義する代わりに、流体グリッドが新しいパーセンテージベースの計算を採用するため、市場のさまざまな画面サイズをより適切に処理できます。

柔軟な画像

Web上の画像は自然に流動的ではありませんが、一部の構成（ widthプロパティを100%に設定し、 heightプロパティをautoに設定）を使用すると、すべてのデバイスで任意の画像をレスポンシブにすることができます。

CSSメディアクエリ

柔軟な画像と流動的なグリッドを備えたレスポンシブWebページは技術的にはレスポンシブですが、見た目はそれほど良くありません。 ここでCSSメディアクエリが役立ちます。これらは、さまざまなデバイスに合わせて調整された、さらに優れたエクスペリエンスを作成するために使用されます。 これらの調整されたエクスペリエンスは、特定の画面サイズで有効になるブレークポイントを追加することによって導入されることがよくあります。

全体として、レスポンシブWebデザインにより、今日のWebは非常にアクセスしやすくなりました。これは、このアプローチにより、市場のさまざまな画面サイズに対応するために以前必要だった開発フェーズが不要になるためです。 または、その作成者の言葉では、Web開発へのこのアプローチにより、最終的に「物事の増減に合わせて設計する」ことが可能になります。

例

レスポンシブウェブサイトは今日では当たり前のことであり、あなたが出くわすほとんどすべてのウェブサイトは、その性質上、いくらかレスポンシブです。

プログレッシブウェブアプリ

それは何ですか

2015年にAlexRusselによって最初に造られた、 P rogressive W eb A ppは、典型的なレスポンシブWebサイトに比べて多くの利点があるため、Webの次の自然な進化です。 Pete LePage – Google Developer Advocateによると、「プログレッシブ」の部分は、「ユーザーが時間の経過とともにアプリとの関係を徐々に構築するにつれて、アプリはますます強力になる」と説明できます。

簡単に言えば、PWAは、プッシュ通知やオフライン機能など、ネイティブモバイルアプリケーションに期待できる（ほぼ）すべての機能を備えたアプリのようなWebサイトです。 このため、PWAは、Webベースのプラットフォームに付随するすべての想定される利点を保持できるため、全体的なエクスペリエンスは、レスポンシブWebサイトの対応物からのステップアップになります。

 関連記事：プログレッシブWebアプリケーションとは何ですか？

使い方

実際、PWAのコアコンポーネントを要約するのは非常に簡単です。 基本的に、前述のすべてのプログレッシブ機能を可能にするための要件は次のとおりです。

Webアプリマニフェスト

Webアプリマニフェストは、PWAのインストールプロセスに必要なメタデータを提供し、PWAがユーザーのホーム画面にどのように表示されるかを決定するJSONファイルです。

サービスワーカー

PWAのすべてのプログレッシブ機能を可能にする基本的なコンポーネントと広く見なされているサービスワーカーは、ブラウザーとは独立して、メインのJavaScriptとは異なるスレッドで実行されます。

安全なコンテキスト

Webの新しい標準として、PWAを安全なプロトコル（HTTPS）で切断する必要があります。 これにより、ユーザーとサーバーの両方の間で、そしてその見返りとして安全な通信が保証され、リスクのないエクスペリエンスが保証されます。

例

PWAの動作はネイティブモバイルアプリケーションと同じであるため、知らないうちにPWAサイトにアクセスしたことがあるかもしれません。 InstagramやPinterestのような大きなアプリのようなサイトを考えてみてください。これらはすべてPWAを利用しています。

推奨読書：2020年のプログレッシブウェブアプリの12のベスト例

それらが重なる場所

最新の機能を備えた同様のエクスペリエンス

これまでのところすべてが理にかなっている場合は、ユーザーエクスペリエンスに関して、レスポンシブWebデザイン（RWD）とPWAが大きく重複していることがわかります。 技術的には、PWAはレスポンシブです。このアプローチは、すべてのデバイスでの表示に適しているように作成されており、アプリのような機能を実現するために少し現代的なタッチが施されています。

また、どちらもWeb開発へのアプローチであるため、次のようなWebからのほぼすべての同じ利点を共有しています。

• すべてのプラットフォームに1つのURL、1つのコードベース
• HTTPSによる強化されたセキュリティ
• 発見可能性が向上し、常に最新の状態になります

それらが異なるところ

Web開発に対するこれらの2つのアプローチは、外観はほとんど同じですが、実際の影響が大きく異なるため、ここで物事が興味深いものになります。

機能の面で

PWAは、定義上、通常のレスポンシブWebサイトよりも多くの機能が満載されています。 PWAは、Webテクノロジーの最近の進歩、つまりサービスワーカーやWebアプリマニフェストを利用することで、以前はネイティブモバイルアプリに限定されていた次のような機能を提供できます。

ホーム画面に追加します

登録済みのサービスワーカーとWebアプリマニフェストを使用すると、PWAはサポートされているブラウザーを備えたすべてのデバイスにインストールできます。

>>詳細：最初のPWAを作成する

プッシュ通知

Service Workerを使用すると、ネイティブアプリケーションと同じように、通知を送信してユーザーのデバイスに表示できます。 これは、Push API、Notifications API、およびWebPushProtocolを利用するWebの比較的最近の機能です。 近い将来、この機能は、通知トリガーとバッジAPIの登場のおかげで改善されています。

オフライン機能

ブラウザ内のプログラム可能なネットワークプロキシ、つまりサービスワーカーの助けを借りて、PWAは、HTTPキャッシュなどの古いキャッシュメカニズムに依存することなく、オフラインコンテンツをプロアクティブにキャッシュして提供できます。

注：レスポンシブWebサイトは、Webの既存のすべてのAPIの恩恵を受けて、最適なユーザーエクスペリエンスを提供することもできます。サービスワーカーに依存するすべての機能を利用できないだけです。

 推奨読書：プログレッシブウェブアプリ（PWA）とハードウェアアクセス

パフォーマンスの面で

レスポンシブウェブサイトは、現在のHTTPキャッシングメカニズムに関連するすべての欠点によって抑制されている典型的なウェブサイトであるため、サービスワーカーと呼ばれる新しい、よりパフォーマンス指向のキャッシングメカニズムを使用するため、PWAのパフォーマンスが向上することを期待できます。

より高速なキャッシュメカニズム

サービスワーカーを登録すると、キャッシュされているものを正確に制御でき、その結果、リピーターのエクスペリエンスが向上します。

サービスワーカーの実際のパフォーマンスへの影響も、注意深く観察されていないものではありません。 Google自身が、ユーザーのWebサイトでの最初のエクスペリエンスを測定するための指標として、最初にペイントするまでの時間を使用して、制御されたグループ（サービスワーカーがWebアプリを制御する）でGoogle I /OWebアプリのパフォーマンスを観察する調査を実施しました。サポートされているグループ（サービスが機能する場合は、使用中のブラウザーでサポートされていますが、まだWebアプリを制御していません）。

結果はデスクトップで特に印象的でした。ここでは、サービスワーカーが、元の最初のfirstpaint時間（912ms）をわずか583msに短縮する役割を果たしたことがわかります。 これは、瞬時の体験に限りなく近いものです。

ただし、モバイルデバイスでは物事は少し印象的ではありません。

ここでは、制御されたグループの末尾が、サポートされているグループと少し似ていることがわかります。 これは主に、モバイルでは、Service Workerスレッドが最適化されておらず、デスクトップと比較して開始に時間がかかるためです。

全体として、サービスワーカー、つまりPWAによって達成されるパフォーマンスの向上は、驚異的なものに他なりません。 もちろん、モバイルサービスワーカー側で行うべき作業はまだいくつかあります。 しかし、全体として、それはかつてのWebへのわずかな一歩であり、正しい方向への一歩であると私たちは感じています。

セキュリティの観点から

HTTPS-行分割

一般的なレスポンシブWebサイトはPWAと同じように保護できますが、レスポンシブWebサイトで安全な通信プロトコルを使用する必要はありません。 これは、PWAの創設者であるGoogleが、PWA内のサーバーとクライアント間のすべての通信をHTTPSを使用して暗号化する必要があるため、PWAを利用したWebサイトの場合とは逆です。

ジオロケーションやサービスワーカーなど、PWAに関連するほとんどの機能は、HTTPSを使用してアプリが読み込まれた後にのみ利用できます。

MDN Webドキュメント、プログレッシブWebアプリ（PWA）

 関連記事：HTTPSが必要ですか？

結論

プッシュ通知などの追加のアプリのような機能と組み合わせて、サービスワーカーによって達成された上記のパフォーマンスの向上（および近い将来、ジオフェンスと定期的な同期）はすべて、PWAを次の候補として適したものにすることを証明していますWebの進化。 現在のところ、PWAの動きは、Windows 10でのPWAの採用を推進しているマイクロソフトを含む、ほぼすべての大物によってすでに広く奨励されています。スティーブジョブズが想定したもの：

完全なSafariエンジンはiPhoneの内部にあります。 そのため、iPhoneのアプリとまったく同じように表示され、動作するすばらしいWeb2.0およびAjaxアプリを作成できます。 そして、これらのアプリはiPhoneサービスと完全に統合できます。 電話をかけたり、メールを送信したり、Googleマップで場所を検索したりできます。

スティーブジョブズ、2007年