PWA vs React Native：詳細な外観

PWAやFlutterと同様に、PWAとReact Nativeは、現在、クロスプラットフォームアプリケーションを開発するための最も人気のあるアプローチの1つです。 そして、このテーマについて研究するとき、あなたのビジネスのための正しい開発経路を決定しようとするときに混乱を感じることは理解できます。 この記事では、各開発アプローチの詳細、その概要、ユースケース、および各開発アプローチがビジネスにどのように役立つかについての詳細について説明します。

簡単な詳細

ここでは、各開発アプローチの簡単な要約と、その使用例を示します。

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

定義

プログレッシブウェブアプリ（PWA）は、ウェブベースのアプリケーションを開発するための新進気鋭のソリューションです。 PWAは、基本的に、サービスワーカーとウェブアプリマニフェストに依存して、プッシュ通知、オフラインの可用性、インストール可能性など、以前はアプリ専用だった機能を含むアプリのようなエクスペリエンスを提供します。

ユースケースと例

PWAは、そのWebベースの性質により、より魅力的で接続に依存しないエクスペリエンスを提供することが主な関心事であるWebサイト、または単に幅広いオーディエンスにリーチしたいWebサイトに最適です。

現在、PWAは、購入のコンバージョン率を向上させ、より忠実な顧客ベースを構築するためにプッシュ通知やオフラインの可用性などの機能が必要なEコマース業界で広く採用されています。

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

リアクトネイティブ

定義

React Nativeは、クロスプラットフォームのJavaScriptベースの真のネイティブアプリケーションを開発するためのフレームワークです。 React Nativeで構築されたアプリは、Reactの宣言型UIパラダイムとJavaScriptを介してネイティブAPIと対話できます。つまり、単一のReactコードベースを使用して2つのプラットフォーム（iOSとAndroid）を維持でき、すべてユーザーエクスペリエンスを損なうことはありません。

ユースケースと例

React Nativeは、人気のソーシャルメディアアプリ（Facebook、Instagram、Pinterestなど）やデジタル通信アプリ（Skype、Discordなど）などのさまざまな種類のアプリを構築するために使用されるため、特定のユースケースを定義するのは困難です。 、Tencent QQなど）。 React Nativeで構築されたアプリのリストについては、ReactNativeアプリのショーケースをご覧ください。

詳細に入る

次のパートでは、各開発アプローチの詳細と、各開発アプローチがビジネスの計画にどのように適合するかについての洞察について説明します。

言語

PWAは、アプリのようなエクスペリエンスを提供するためにWebテクノロジーに依存しています。 そのため、HTML、CSS、JavaScriptなどのWeb言語は依然としてPWAを構成するコア言語ですが、React Nativeアプリはコア言語としてReact.js（JavaScriptライブラリ）を使用します。

これが、React Nativeアプリのコードを掘り下げるときに、Web言語といくつかの類似点を共有していることがわかるはずですが、唯一の大きな違いは、ReactNativeアプリがWebコンポーネントではなくネイティブコンポーネントを使用してユーザーインターフェイスを作成することです。

ユーザーインターフェース

PWAはWebテクノロジに基づいており、ブラウザのエンジンで実行されるため、一般的なPWAのユーザーUIは、訓練を受けた人の目にはそれほどネイティブではないように見える場合があります。 ただし、一般的なユーザーにとって、PWAのアプリのようなUIと真のネイティブアプリのUIの違いはせいぜいごくわずかです。

代わりに、React Nativeアプリは、ネイティブコンポーネントを使用することで、真のネイティブエクスペリエンスを提供できます。これには、iOSの場合は<DatePickerIOS>や<ProgressViewIOS> 、 <ViewPagerAndroid>や<ToastAndroid>などのプラットフォーム固有のコンポーネントが含まれます。アンドロイド用。

パフォーマンス

これの真実を知るのは難しいので、パフォーマンスはデリケートなテーマです。 しかし、 どちらの開発アプローチもJavaScriptを多用しているため、パフォーマンスはすべての端で非常に似ていると期待できます。ReactNativeは、使用中のシステムと緊密に統合されており、ブラウザーを介して通信する必要がないため、わずかな利点があります。

ただし、PWAがブラウザ環境に存在するという事実は、実際には、平均的なWebサイトのように機能することを意味するわけではありません。 PWAで採用されている高度なキャッシュ方法のおかげで、平均的なWebサイト/ Webアプリで見られるように、ページ間でロードするときに時折発生する問題がなくなりました。 また、PWAは本質的に拡張されたシングルページアプリケーションであるという事実と相まって、PWAの知覚されるパフォーマンスは、実際のネイティブアプリのエクスペリエンスに可能な限り近いものになっています。

この一例は、使い捨て商品業界のクウェートを拠点とするブランドであるTemoorstです。 SimiCartをソリューションプロバイダーとして選択したことで、ブランドは可能な限り最高のROIを得るためにネイティブアプリとPWAの両方を選択しましたが、PWAのパフォーマンス面は依然としてブランドが期待していなかったものです。 ブラインドテストでは、PWAとReactNativeアプリのパフォーマンスと視覚的な違いを見つけるのは難しいでしょう。

React NativeアプリとPWAのパフォーマンスの違いをテストするには、Temoorstアプリを試してみることをお勧めします。 アプリ自体は、ReactNativeアプリまたはPWAが最大限にプッシュされたときにどのように見えるかを示すものです。

• React Nativeアプリ：GooglePlayストア| Apple App Store
• PWA ：https://temoorst.com/

安全

使用中のデバイスとの統合レベルが高いため、React Nativeアプリケーションは当然、より安全であり、脆弱性が発生しにくくなっています。 React Nativeアプリにセキュリティのレイヤーを追加するには、次のようなさまざまなアプローチを開発プロセスで採用します。

• SSLピン留め：アプリからサーバーへの接続を保護します
• キーチェーン/機密情報：生体認証/顔認証とともに安全なローカルストレージを提供します
• Jscrambler：自己防衛レイヤーを追加することでコードの改ざんを防ぎます

PWAはブラウザ環境に存在し、ほとんどの機能でブラウザを利用するため、セキュリティ作業のほとんどはブラウザ自体によって行われます。 PWAのコアコンポーネントであるサービスワーカーはHTTPS上でのみ実行されるため、通常のWebサイトと比較して、PWAはより安全です。つまり、クライアント側とサーバー側の間の通信は常に暗号化されます。

サービスワーカーはHTTPSでのみ実行されます。 サービスワーカーはネットワーク要求を傍受して応答を変更できるため、「man-in-the-middle」攻撃は非常に悪い可能性があります。

サービスワーカーの紹介

発見可能性

これがPWAが優れているところです。 PWAはWebで利用可能であり、検索エンジンに公開されているだけでなく、実際にはアプリストアにも公開できます。 Google、Microsoft、さらにはSamsungもすべて、再パッケージ化されたPWAをアプリストアに採用することでPWAの採用を促進するために時流に参加しています。 たとえば、Microsoft Storeはさらに一歩進んで、独自のBingクローラーによってインデックス付けされた高品質のPWAをアプリストアに自動的に再入力することを計画しています。

Bingクローラーを搭載したMicrosoftStoreは、選択した高品質のプログレッシブWebアプリに自動的にインデックスを付けます

プログレッシブウェブアプリをMicrosoftEdgeとWindows10に歓迎

現在のところ、Apple App Storeは、PWAが到達できないと思われる唯一の人気のあるアプリマーケットプレイスです。 これは、Appleがレビューガイドラインで、承認されるためにはアプリが「再パッケージ化されたWebサイトを超えている」必要があることを明確にしたためです。これは、Appleがどのように積極的に開発を思いとどまらせているかについてのまったく別の議論です。彼らの収益を傷つけることを恐れてウェブ。
PWAと比較すると、React Nativeで構築されたアプリの検出可能性はそれほど印象的ではありませんが、フレームワークのクロスプラットフォームの性質により、単一のコードベースで、GooglePlayストアとAppleAppStoreの両方でアプリを検出可能にすることができます。 また、iOSユーザーが一部の国（米国を含む）で過半数を占めており、PWAをApple App Storeに公開できないことを考えると、これは、どこでサービスを提供するためにReactNativeアプリ開発を選択する十分な理由になるはずです。ユーザーの大多数は..

ハードウェアのアクセシビリティ

React Nativeアプリは真のネイティブアプリケーションであるため、ネイティブAPIへのアクセスがはるかに広くなります。 これは、デバイスのハードウェアへの低レベルのアクセス（たとえば、NFC（近距離無線通信）、連絡先リストなどへのアクセス）およびシステムアクセス（たとえば、システム設定、ログなどへのアクセス）も可能であり、活用できることを意味します。ユーザーエクスペリエンスを向上させるため。
また、PWAはハードウェアのアクセス可能性をWeb APIに依存しているため、PWAは当然、システムのリソースをどのように利用できるかについてより制限されています。 最良のシナリオ（つまり、使用中のブラウザーがすべての最新のハードウェアアクセスAPIをサポートしている場合）では、PWAは、ジオロケーション、カメラとマイクへのアクセス、拡張現実（WebXRを使用）など、以前はネイティブアプリ専用だったさまざまなハードウェア機能にアクセスできます。デバイスAPI）。

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

開発費

開発コストの観点から、React Nativeプロジェクトは、複雑さが伴うため、コストがかかる傾向があります。 たとえば、基本的なReactNativeプロジェクトにはコストがかかるのが一般的です 基本的なPWAプロジェクトの費用は約$1000〜 $ 10.000であるのに対し、 $15.000以上です。 ただし、他のネイティブアプリフレームワークと比較すると、React Nativeは、プラットフォームに依存しないアーキテクチャのおかげで、費用効果の高いソリューションのままです。 単一のReactNativeコードベースを使用して、アプリをGooglePlayストアとAppleApp Storeの両方に公開し、ユーザーエクスペリエンスを損なうことなく総開発コストを大幅に削減できます。

また、通常、React Nativeプロジェクトよりも安価ですが、PWAプロジェクトの開発コストは、選択した開発経路によって大幅に異なる可能性があります。 たとえば、ヘッドレスアーキテクチャ（従来のアーキテクチャと比較してより柔軟でスケーラブルなソリューション）を採用する場合、プロセスに必要な技術的専門知識のレベルが高いため、PWAの開発コストが大幅に増加することが予想されます。 。

結論

これらは非常に特定のニーズに対応する2つの開発経路であるため、ReactNativeとPWAのどちらを選択するかは難しい決断になる可能性があります。 PWAは軽量で、更新とインストールのプロセスが簡単で、PWAが提供する機能は、平均的なアプリユーザーにとって十分すぎるはずです。 ただし、AppleがApp Storeに課している現在の制限のため、モバイルユーザーの大多数がiPhoneを使用している場合は、優れたReactNativeアプリに投資することをお勧めします。

クロスプラットフォームのReactNativeアプリまたはヘッドレスPWAのいずれかを構築しようとしているMagentoの加盟店向けに、ここSimiCartでは、競合他社に対して競争力を獲得するのに役立つ費用対効果の高いソリューションを提供しています。