PWAとSPA：似ているが異なる

標準的なWebサイトの魅力はその魅力を失い始めており、Webアプリケーションにその場所を譲っています。 魅力的で驚くほど高速なエクスペリエンスにより、Webアプリケーションは日を追うごとにますます人気が高まっています。

この技術的な成功のほとんどは、特定のアーキテクチャをWebサイトの構造に実装し、Webサイトの安定性、パフォーマンス、およびエンゲージメントを確保することによってのみ得ることができます。

現在、Webアプリケーションを構築するための2つの一般的なアプローチは、PWAとSPAです。 これら2つのアプローチに関する一般的な概念の多くは、同じではありません。 彼らの見落とされた違いはしばしば費用のかかる間違いや機会の喪失につながるため、これは非常に重要です。 確かに、あなた（おそらくミリ秒ごとに重要なサイト所有者）は、Webアプリケーションが他の世界に遅れをとることを望んでいません。

それらはどのように機能しますか？

シングルページアプリケーション（SPA）

SPA（シングルページアプリケーション）は、サーバーから完全にダウンロードされるのではなく、現在のページが動的に更新されるWebサイトです。 つまり、Webアプリケーションに必要なすべてのアプリケーションコード（HTML、CSS、JavaScript）を1回だけロードする必要があります。 ユーザーがWebアプリケーションをナビゲートすると、更新が必要なすべてのコンテンツと要素がフェッチされ、ユーザーがブラウザーをリロードしなくても再レンダリングされます。

これにより、ブラウザとサーバー間の従来のラウンドトリップが節約されるため、対話が高速化され、ユーザーの満足度が向上します。

あなたはおそらくSPAを気付かずにいつも使っているでしょう。 ほとんどのソーシャルメディアのウェブサイトが同じように感じていることに気づきましたか？ これは、すべてSPAを使用してユーザーエクスペリエンスを合理化し、継続的なニュース更新フィードを作成しているためです。

おそらく定期的に使用している注目すべきSPAのいくつかを次に示します。

• フェイスブック
• Gmail
• Linkedin
• Netflix
• グーグルマップ

プログレッシブウェブアプリ（PWA）

SPAとは異なり、プログレッシブWebアプリ（PWA）は、特定のアーキテクチャというよりも、一連のガイドラインとチェックリストに似ています。 PWAは既知であり、次のようないくつかの特性によってSPAから逸脱しています。

• サービスワーカー：サービスワーカーは、PWAの優れた機能の多く、つまりオフラインの可用性とプッシュ通知の技術的基盤を提供します。
• Webアプリマニフェスト：PWAに必要なメタデータを含むJSONファイル。 Webアプリのマニフェストは、PWAマニフェストジェネレーターを使用して自動的に生成できます。
• HTTPS：PWAは常に安全なオリジンから提供されます。

サービスワーカーは、ブラウザーとネットワーク間のプロキシとして機能し、Webサイトの資産のキャッシュとネットワーク要求の傍受を担当します。これにより、Webサイトのオフラインの可用性や、プッシュ通知を含むその他のさまざまな機能が実現します。

サービスワーカーもバックグラウンドで非常に役立ちます。 オフライン機能を提供することに加えて、それらは重い計算の多くにも責任があります。これが、ほとんどのPWAWebサイトが非常に効率的で高速に読み込まれる主な理由です。

プログレッシブウェブアプリとは何かについての詳細なガイドを作成しました。 だからあなたはそれを見逃すことはできません！

彼らはどのように似ていますか？

新しいテクノロジーと革新的なテクノロジーの両方であるこれら2つのアーキテクチャは、従来のWebサイトとは大きく異なるアプリのような魅力的なエクスペリエンスをユーザーに提供します。 一見すると、それらは簡単に互いに間違えられる可能性があります。 ただし、これらすべてのエクスペリエンスを可能にする基本的なプロセスは同じではありません。

違いは何ですか？

PWAはほとんどの場合SPAであるという一般的な誤解がありますが、これはまったく間違っています。 上記のPWA要件から、Webサイトのコンテンツをブラウザーでレンダリングする必要がある、またはPWAがサーバーでレンダリングされたページを要求してはならないという記述がどこにもないことがわかります。

PWAは、簡単に言えば、Webが提供する最高の品質をすべて備えたWebサイトです。 信頼性が高く、高速で魅力的です。

また、PWAはUIとは別のスレッドで実行されるサービスワーカーを必要とするため、サイトのプリフェッチ用の特定の初期ロード画面をほぼ常に伴うSPAとは異なり、PWAはコンテンツが常にほぼ瞬時に表示されるように異なります。資産。 これは、SPA JavaScriptフレームワークがWebアプリに配置する豊富なJavaScriptオーバーヘッドのすべてではないにしても、ほとんどを代わりにServiceWorkerに再割り当てできることを意味します。

明らかに、これら2つの違いはそれだけではなく、分析することがもっとたくさんあります。

スピードの面で

速度に関しては、これら2つのアーキテクチャはどちらも最先端のテクノロジーであるため、非常によく似ています。 ただし、ここで優位に立つのはPWAです。

これは、SPAとPWAの両方が開発にJavaScriptを使用しているのに対し、PWAはサービスワーカーを活用して一部の作業をレンダリングできるためです。 つまり、SPAがWebアプリに追加する過剰なJavaScriptオーバーヘッドの多くは、代わりにService Workerに委任できるため、JavaScriptのフットプリントが大幅に削減されます。

これにより、PWAサイトは、スクリプト、CSS、画像、マークアップなど、多くのサイトアセットを必要になる前に事前にキャッシュできます。 これらのプリキャッシュのおかげで、ユーザーのネットワークは、レンダリングに伴う追加のストレスから解放され、オフラインで作業できるようになります。

コストの面で

PWAがSPAに負けるのはここです。 その結果、最先端のテクノロジーを備えたPWAには追加コストがかかります。 言うまでもなく、PWAの開発は、SPAに比べてプロセスが合理化されていないため、一度に数週間または数か月も続くことがよくあります。

PWA ： $ 2000 – $ 20.000

スパ： $ 1500 – $ 12.000

開発者のレート、仕事の複雑さ、好み、カスタマイズなど、建物のコストに影響を与える要因はたくさんあります。コストを見積もる際には、これらすべてを考慮に入れる必要があります。

 推奨読書：Magento PWAを構築するのにどれくらいの費用がかかりますか？

ユーザーエクスペリエンス/ユーザーインターフェイスの観点から

SPAは過去にその役割を果たしていましたが、より優れたユーザーエクスペリエンス（UX）を提供するため、人々はPWAに変換し始めています。

どちらもアプリのようなインターフェースを備えているため、PWAは、オフラインまたは低速の接続状態でも、より多くのエンゲージメントと信頼性をもたらします。 これらの理由から、Twitterなどの影響力のあるブランドは、独自のPWAバージョンのサイトであるTwitter Liteをリリースすることにより、PWA運動を開始しました。

そしてそれはTwitterだけではありません。 PWA運動はここにとどまることが期待されています。 さらに、最近のSpotifyの参加により、動きがすぐに減速する兆候は見られないようです。

シングルページアプリケーションには、大規模なサイトで満足のいくUXを提供できないという制限があります。そのため、GmailやFacebookのように、データ指向で視覚的に魅力的であるとは限らないサイトに最適です。

セキュリティの観点から

セキュリティはデリケートなテーマです。 PWAとSPAはどちらも開発用のメインライブラリとしてJavaScriptを使用していますが、セキュリティに関する問題は大きく異なり、そのほとんどはSPAとそのXSS（クロスサイトスクリプティング）の問題に起因しています。

プログレッシブウェブアプリの性質上、すべての接続が安全なHTTPSオリジンを経由するため、PWAで発生するセキュリティに関する懸念ははるかに少なくなります。 PWAと同様に、HTTPSもWebの未来であり、サービスワーカーなどの最先端の機能にアクセスして可能にします。

アクセシビリティの観点から

SPAと比較すると、特に最近のChromeでのデスクトップPWAのサポートにより、PWAは一般的にアクセスしやすくなっています。 PWAを操作するユーザーは、使用しているアプリのショートカットをホーム画面またはデスクトップに追加するオプションを利用できます。

SPAは、ページ遷移が実行されるたびにユーザーをどこにも行かせない傾向があるため、アクセシビリティに関しては実際にはひどいものです。 ページがDOM（Document Object Model）構造を完全に変更し続けると、ariaまたはrole属性がユーザーを支援できないため、これは特に障害を持つユーザーにとって苛立たしいものです。

まとめ

SPAは革命的だったかもしれませんが、時間はゆっくりとそれに追いついてきたようです。 SPAとPWAは同じ種類ですが、SPAよりもPWAを選択する人が増えており、PWAがもたらすメリットを考えると、それは理解できます。

SimiCartを使用すると、Magentoの加盟店に最高のPWAソリューションを提供できます。