シングルページアプリケーションとプログレッシブウェブアプリのメリット：CXの改善

公開: 2019-06-06

シングルページアプリケーションの利点は、顧客体験が電子商取引プロバイダーとの迅速で信頼性の高い対話を提供することを要求するにつれて、ますます明確になっています。

過去20年間、ほとんどのWebサイトは、HTML、CSS、およびJavaScriptを使用して同じ方法で構築されてきました。これらのテクノロジーは時間の経過とともに高度化していますが、原則はほぼ同じです。ユーザーがWebページを操作し、ユーザーのブラウザーがWebサーバーを呼び出し、WebサーバーがHTML、CSS、およびJavaScriptは、ロードされてブラウザに表示されます。

（ふぅ。それはたくさんです。）

このプロセスでは、最も一般的にページの更新が行われますが、AJAXなどの一部のテクノロジーでは、開発者はページ全体を更新せずに一部のコンテンツを変更できます。このため、ほとんどのWebサイトは、アプリケーションではなく、Webサイトのように明確に動作および動作します。

ほとんどのWebサイトには、バックエンドとプレゼンテーション層が緊密に結合されています。つまり、両方が単一のモノリシックアプリケーションの一部であるため、Webサイトのフロントエンドとバックエンドの間に実際の分離はありません。

シングルページアプリケーションとプログレッシブウェブアプリが顧客体験をどのように改善できるか

過去10年間で、ネイティブiOSおよびAndroidアプリは、ほとんどすべての人にとって一般的な場所になりました。これらのアプリケーションは実際のWebサイトとは動作が異なり、ユーザーに非常に異なる、多くの場合より満足のいくエクスペリエンスを提供します。

リンクやボタンを押してもページは更新されず、変更の読み込みがはるかに速く、同等のモバイルWebサイトよりもエクスペリエンスがはるかに優れていることがよくあります。ネイティブeコマースアプリの場合、ユーザーがリンクをクリックすると、アプリケーションはバックエンドサーバーを呼び出しますが、そのサーバーがHTML、CSS、およびJavaScriptプレゼンテーションレイヤーを返すのではなく、単純に必要な生データを送信すると、アプリケーションはそれがユーザーにどのように表示されるかを管理します。

たとえば、ユーザーが製品をクリックしてその詳細を表示すると、アプリケーションはバックエンドサーバーを呼び出してその製品の詳細を要求し、サーバーは製品名などの項目を含むデータの文字列で応答します。価格、および画像へのリンク。ただし、表示方法を定義するためにHTML、CSS、またはJavaScriptを送信する必要はありません。

アプリケーション自体はプレゼンテーション層であるため、バックエンドサーバーからのプレゼンテーション層は必要ありません。これははるかに高速であり、アプリケーションはページを更新せずに顧客に製品の詳細を表示できます。このテクノロジーにより、開発者は、従来のモデルの制約を受けることなく、シームレスで流動的なカスタマーエクスペリエンスを自由に構築できます。

アプリのようなエクスペリエンスをWebブラウザーで提供して、ネイティブアプリとWebサイトの区別を曖昧にすることができたら素晴らしいと思いませんか。

ここで、シングルページアプリケーション（SPA）とプログレッシブWebアプリ（PWA）が登場します。

シングルページアプリケーションとは何ですか？

SPAは、Webブラウザで実行されるJavaScriptで記述されたアプリケーションであり、通常、新しい情報を表示するためにページを更新する必要はありません。

ユーザーが最初にWebサイトにアクセスすると、アプリケーションとプレゼンテーションリソース（HTML、CSS、および一部のスクリプト）がブラウザーに読み込まれます。この時点から、ユーザーは単一のWebページにアクセスし、アプリケーションは関連するコンテンツをロードし、必要に応じて表示を変更します。

ネイティブアプリと同様に、ユーザーがリンクをクリックすると、アプリケーションはバックエンドサーバーを呼び出します。バックエンドサーバーは、必要なデータを文字列で送信します。この文字列には、プレゼンテーションリソースがすでに含まれているため、通常は含まれていません。ユーザーが最初にWebサイトにアクセスしたときにロードされます。

ユーザーは基本的に単一のWebページのみを使用しているため、ページを更新するという概念は実際にはありません。代わりに、アプリケーションは必要に応じて異なる情報を表示するようにページを変更します。

SPAは通常、バックエンドアプリケーションから完全に切り離されており、一連のAPIを介してバックエンドにインターフェイスします。多くの場合、独自のサーバー上に配置され、個別に展開できます。ある意味では、バックエンドアプリケーションとの間でデータを送受信するだけであり、サードパーティシステムのように扱うため、バックエンドアプリケーションにはまったく依存しません。

私たちは皆、おそらく気づかないうちに、しばらくの間SPAを使用しています。 Facebook、Gmail、Twitter、LinkedIn、Instagram（その他多数）はすべて、Webサイトの代わりにSPAを使用しています。

これらのWebサイトのいずれかに今アクセスすると、従来のWebサイトよりもネイティブアプリのように動作することに気付くでしょう。ページを操作するときにページが更新されることはめったになく、非常に高速です。リンクやボタンをクリックすると、表示しているコンテンツが変更されますが、ヘッダーやフッターなどのアイテムは、最初に読み込まれた後はほとんど更新されません。

シングルページアプリケーションの利点

SPAの最大かつ最も明白な利点は、デザイナーや開発者がアプリのようなエクスペリエンスを提供し、ページをリロードする従来のアプローチに制約されないようにすることで、SPAを使用してカスタマーエクスペリエンスを向上させる方法です。

通常のルールは適用されなくなったため、これには新しい設計と考え方が必要ですが、ユーザーエクスペリエンスへのメリットは非常に大きくなる可能性があります。

プレゼンテーションリソース（HTML、CSS）の多くは一度だけロードされるため、SPAは通常、標準のWebサイトよりもはるかに高速にコンテンツをロードします。アプリケーションとの対話では、完全に形成されたHTML / CSSページではなく、バックエンドサーバーを呼び出して少量のデータを取得するだけで済みます。アプリケーションは、ページをリロードすることなく、変更されたデータをすばやく表示できます。

SPAはバックエンドアプリケーションから完全に切り離されているため、個別に展開でき、非常に大きな利点があります。小さなフロントエンドの変更では、アプリケーション全体をデプロイする必要はありません。これは非常に大きなタスクになる可能性があり、場合によってはダウンタイムが必要になります。

SPAのデメリット

SPAを使用する際の最大の課題の1つは、SPAがSEOに与える影響です。それぞれが個別のURLを持つ個別のページの従来の構造を常に備えているとは限らないため、これにより、コンテンツのインデックス作成で検索エンジンに問題が発生する可能性があります。ただし、これは、サーバー側のレンダリングやクリックによって一意のURLが生成されるようにするなどの手法を使用することで対処できます。

また、検索エンジンのボットがSPAに対応するように変更されているため、時間の経過とともに問題が少なくなっています。結局のところ、Googleはそれらを擁護する企業の1つです。

一部のSPAは、アプリケーションとプレゼンテーションのリソースが最初のページビューで読み込まれるため、最初の訪問で読み込むのに少し時間がかかります。

これは、GmailなどのSPAで非常に顕著です。この場合、最初にWebサイトにアクセスしたときに大きな読み込み画像が表示されます。この問題は、サーバー側のレンダリングと効率的なプログラミングを使用して、アプリケーションとリソースの初期負荷が大きくなりすぎないようにすることで対処できます。

プログレッシブウェブアプリとは何ですか？

PWAは、特定のテクノロジーではなく、Webサイトまたはアプリケーションを多かれ少なかれPWAにする開発方法論または一連の原則であるため、定義するのが少し難しいです。

PWAという用語は、もともとGoogleによって造られました。Googleは、PWAを構成するものを定義するためのチェックリストを作成しました。特にGoogleは、PWAは次のようにする必要があると定義しています。

安全–httpsで提供
レスポンシブ–あらゆるフォームファクターに適合
オフラインで作業できる–サービスワーカーを使用してページをキャッシュする
高速–3G接続で高速にロードできます
アプリのような–アプリシェルモードとデザインを使用してアプリのように感じます
インストール可能–マニフェストファイルを使用して、アプリをホーム画面に追加できるようにします
エンゲージメント–プッシュ通知などのツールを使用する
プログレッシブ–すべてのブラウザで動作しますが、最新のブラウザでは徐々に向上します

ご覧のとおり、チェックリストの項目のいくつかは少し曖昧または主観的です。また、それらのいくつかはSPAに似ていることがわかります。従来のHTML / CSS Webサイトは、SPAと同様にPWAにすることができます。 SPAは自動的にPWAになるわけではありませんが、その方向にそれを推進するいくつかの機能があります。

まだ混乱していますか？

PWAの利点

SPAと同様に、PWAの最大の利点の1つは、カスタマーエクスペリエンスの向上であり、アプリのような感覚を与え、従来のモバイルWebサイトとネイティブのiOSまたはAndroidアプリの間のギャップを埋めます。

ホーム画面に保存する機能や、サービスワーカーを介してページをキャッシュできる機能などの機能により、Webサイトのルックアンドフィールをネイティブアプリのようにすることができます。

PWAは、チェックリストの主要な原則の1つであるため、非常に高速になる傾向があります。

Androidオペレーティングシステムは、ブラウザにモバイルデバイスのハードウェアへのアクセスを提供します。これにより、プッシュ通知やNFCスキャンの使用などが可能になり、CXを大幅に向上させることができます。

PWAのデメリット

PWAの最大の欠点は、Appleからのサポートがないことです。 PWAを最大限に活用するには、Androidオペレーティングシステムがブラウザにデバイス上のかなりの量の機能へのアクセスを提供するのに対し、Appleはこれを厳しく制限しているため、Androidデバイスで実行する必要があります。これは徐々に改善されていますが、まだ長い道のりがあります。

もう1つの欠点は、明確な定義がないことです。これは、解釈の余地があります。

SPAとPWAはウェブサイト開発の未来です

このテクノロジーはまだほとんどのeコマースWebサイトで完全に主流ではありませんが、間違いなくWebサイト開発の未来です。

SPAはeコマースアプリケーションの構築に使用できる特定のテクノロジーですが、PWAは通常、Googleが提示した方法論に従って構築されたウェブサイトであり、最高のカスタマーエクスペリエンスを提供すると考えています。

SPAを開発する人は、可能な限り最高のCXを提供するために、可能な限りPWAチェックリストを満たすことを目指す必要があります。これらのテクノロジーにより、デザイナーと開発者はユーザーエクスペリエンスとジャーニーの自由度が増し、従来のページごとのモデルから離れることができます。

SAPやIBMなどの多くのソフトウェアプロバイダーは、eコマースプラットフォーム用のSPAフロントエンドの作成に多額の投資を行っています。数年以内に、ほとんどのeコマースWebサイトは、AngularなどのJavaScriptフレームワークを使用してこのように構築されると思います。 Vue、またはReact。

従来のHTML / CSSモデルを使用して構築されるeコマースサイトはますます少なくなり、Webサイトとネイティブアプリの間のギャップはますます小さくなり、それらを区別するのが難しくなります。