Home-theater-designers
シングルページアプリケーション（SPA）とプログレッシブウェブアプリ（PWA）は、ウェブに革命をもたらしています。どちらも似ているように見える新しいテクノロジーですが、そうではありません。直面して、人々はしばしばそれらを交換可能に使用します。
それらをよりよく理解するために、それぞれのコア機能とアーキテクチャを掘り下げてみましょう。
シングルページアプリケーションとは何ですか？
SPAは、そのように聞こえますが、単一のページ内でコンテンツを動的にロードするWebサイトです。本質的に、操作する必要のあるあらゆる形式のコンテンツと要素が1ページに広がります。つまり、このようなWebサイトをナビゲートするときに、個別のドキュメントオブジェクトモデル（DOM）をロードする必要はありません。
とは言うものの、目的は、ユーザーが使用して表示する必要があるすべてのものを一度にロードすることにより、ユーザーを同じページに維持することです。これは、ユーザーエクスペリエンスの向上につながります。
一方、ユーザーインターフェイスは、SPAの設計と配置の方法によって異なります。これは、引き伸ばされたページをナビゲーションに分割したい理由に要約されます。また、コンテンツは1回しか読み込まれないため、1ページになることを妨げるものではありません。
したがって、SPAをナビゲートするときは、プリロードされたコンテンツを単一のDOMで参照しており、誤って信じていた可能性があるため、別のDOMにアクセスしていません。
SPAを個別のコンテンツセクションに分割するには、通常、JavaScriptビューを使用して各セクションにURLを指定する必要があります。 NS データリンク コネクタは、これらのセクションをメインDOMにリンクし、非同期でアクセスできるようにします。
のような他の技術が NS と elm-spa JavaScriptは、SPAを作成するための最も一般的なプログラミング言語です。
関連：学ぶ価値のあるJavaScriptフレームワーク
JavaScriptは 非同期/待機 1つの入力が別のリクエストの出力をブロックすることなく、動的コンテンツと静的コンテンツの両方を非同期にロードできるようにする関数。したがって、SPAは非ブロッキング入出力（I / O）システムで動作します。
とはいえ、ReactJS、Vue.js、AngularJS、Ember.js、Backbone.jsなどのJavaScriptフレームワークはすべて、SPAの迅速な開発をサポートしています。開始するには、この初心者向けのVue.jsの概要を確認できます。
速度が上がるため、ほとんどのエンタープライズアプリは、Webサイトを単一のページに変換するというアイデアを採用しています。 Netflix、YouTube、PayPal、Facebook、Instagram、Twitter、PinterestはすべてSPAの例です。
プログレッシブウェブアプリとは何ですか？
PWAは、その機能に標準および新しいWebブラウザのガイドラインを使用するWebアプリケーションまたはソフトウェアです。 PWAは、SPAとは異なり、スケーラブル、ユーザー適応、超高速、インストール可能、ネイティブのような一連のガイドラインに基づいてアーキテクチャを構築します。
2015年にGoogleによって導入されたPWAの目標は、ユーザーと直接かつ段階的に話すアプリを構築することです。これは、ネットワーク接続が不十分または存在しない場合でも、ユーザーがアプリを使い続けることを目的としています。
常に、PWAは必要なものすべてを瞬時に提供します。 SPAの典型的な初期コンテンツ読み込み特性を通過しません。
その結果、ユーザーはアプリをネイティブであるかのように操作します。 PWAの主要な特徴はインストール可能性ですが、インストールしなくてもWebブラウザーを介してその場でPWAにアクセスできます。とはいえ、他のWebサイトと同様に、PWAにもURLが必要です。
関連している： プログレッシブウェブアプリとは何ですか？どのようにインストールしますか？
プログレッシブウェブアプリは、瞬く間にコンテンツを配信するバックグラウンドヘルパーを備えているという点で独特です。そのため、Webアプリにアクセスする前でも、コンテンツとコンポーネントをすぐに使用できます。それはそれらを超高速でより信頼できるものにします。
Spotify、Slack、UberなどのアプリはPWAの例です。
PWAには通常、共通のアーキテクチャルールがあります。 PWAが正常に機能するには、次の属性が必要です。
1.労働者
サービスワーカーは、PWAでコンテンツを簡単に配信します。これにより、ネットワーク接続がない場合でも、アプリが関連性のあるキャッシュデータをロードできるようになります。これは、オフラインリクエストへの応答を保存するCacheAPIの助けを借りて可能です。したがって、ワーカーはナビゲーションとユーザー要求を妨害します。
関連している： CPUキャッシュはどのように機能しますか？
を使って 約束 オブジェクト、ワーカーは、ユーザーによる最終的な要求の場合（オフラインの場合でも）、ダウンロード済みのコンテンツを配信できます。ただし、サービスワーカーは、PWAに非ブロッキングプロパティを付与します。
2.安全なコンテキスト
サービスワーカーは、配信されるコンテンツの機密性のためにセキュア接続（HTTPS）を必要とします。リクエストを送信すると、ワーカーはPWAとブラウザ間の安全な通信を確立します。したがって、安全なコンテキストは、PWAでのman-in-the-middle攻撃（MITM）のような機密性の侵害を防ぎます。
3.Webアプリケーションマニフェストファイル
Webマニフェストは、PWAの特性を定義するJSONファイルです。 PWAのコンテンツにアクセス、検出、および使用するための前提条件について詳しく説明します。通常、アプリの名前、URL、およびコンポーネントが含まれます。最終的に、マニフェストファイルには、Webアプリをインストール可能なアプリケーションに変えるために必要な情報が含まれています。
PWAとSPAの類似点は何ですか？
PWAとSPAのバックグラウンドロジックは異なりますが、共通点はごくわずかです。配信速度は大幅に異なる場合がありますが、従来のWebサイトは、速度とアクセシビリティの点で依然として遅れをとっています。
どちらも、応答性の高いインターフェイスを提供することでユーザーエクスペリエンスを向上させることを目的としています。
どちらもアプリエクスペリエンスを提供するため、それらを混同するのは簡単であり、それらを操作するときにどちらがどちらであるかはほとんどわかりません。最後に、このメモでは、アクセスする前に両方にURLが必要です。
SPAとPWAの主な違い
PWAとSPAはいくつかの顕著な特徴を共有しているかもしれませんが、それらは2つの異なるものです。注意すべき主な機能の違いは次のとおりです。
シングルページアプリケーションの主な機能
- ブラウザからのみアクセスできます。
- 推奨されていませんが、安全でないネットワーク（HTTP）を介してサービスを提供できます。
- 彼らはサービスワーカーを必要としません。
- SPAにはJSONマニフェストファイルがありません。つまり、SPAはアンインストール可能です。
- それらは単一ページでなければなりません。
- ネットワークがない場合はアクセスできません。
プログレッシブウェブアプリの主な機能
- それらはインストール可能であるため、ブラウザを介してそれらにアクセスすることはオプションです。
- すべてのPWAにはサービスワーカーが必要であり、セキュアネットワーク（HTTPS）を介して要求を行う必要があります。
- 応答はキャッシュされ、 約束 物体。
- ネットワークに接続していなくてもアクセスできます。
- SPAよりも高速です。
- それらは常にマニフェストファイルを持っているので、ダウンロード、インストール、そして簡単にアクセスできます。
- PWAは単一ページのアプリケーションではない場合があります。
SPAとPWAがウェブサイトの配信に影響を与えている
現在、多くの企業Webサイトがこれらの新しいテクノロジーを採用しているため、サービス提供への前向きな変化が見られます。
さらに重要なことに、PWAの採用により、一般的なユーザーエクスペリエンスが向上し、その結果、バウンス率が低下し、ほとんどのエンタープライズアプリの収益が増加します。一方、SPAはソーシャルメディアを活性化させ、ページの読み込みが遅くなることなく、人々がWebを介して簡単に対話できるようにしました。
グーグルホームで仕事を鳴らします共有 共有 つぶやき Eメール 同期プログラミングと非同期プログラミング：それらはどのように異なりますか？
次のプロジェクトで同期プログラミングと非同期プログラミングのどちらを使用する必要がありますか？こちらをご覧ください。
次を読む 関連トピック- プログラミング
- プログラミング
- アプリ開発
Idowuは、スマートな技術と生産性に情熱を注いでいます。暇なときは、コーディングで遊んだり、退屈したときにチェス盤に切り替えたりしますが、たまに日常から離れることも大好きです。現代のテクノロジーの周りの道を人々に示すことへの彼の情熱は、彼がもっと書くように動機づけます。
IdowuOmisolaのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください